Allow background color to be specified

src/node/StreamWindow.js

@@ -16,8 +16,9 @@ import {
 } from '../constants'
 
 export default class StreamWindow extends EventEmitter {
-  constructor() {
+  constructor({ backgroundColor = '#000' }) {
     super()
+    this.backgroundColor = backgroundColor
     this.win = null
     this.offscreenWin = null
     this.overlayView = null
@@ -30,7 +31,7 @@ export default class StreamWindow extends EventEmitter {
       title: 'Streamwall',
       width: WIDTH,
       height: HEIGHT,
-      backgroundColor: '#000',
+      backgroundColor: this.backgroundColor,
       useContentSize: true,
       show: false,
     })
@@ -103,7 +104,7 @@ export default class StreamWindow extends EventEmitter {
         sandbox: true,
       },
     })
-    view.setBackgroundColor('#000')
+    view.setBackgroundColor(this.backgroundColor)
 
     const machine = viewStateMachine
       .withContext({

src/node/index.js

@@ -59,6 +59,10 @@ async function main() {
       boolean: true,
       default: true,
     })
+    .option('background-color', {
+      describe: 'Background color of wall (useful for chroma-keying)',
+      default: '#000',
+    })
     .help().argv
 
   // Reject all permission requests from web content.
@@ -70,7 +74,9 @@ async function main() {
 
   const idGen = new StreamIDGenerator()
 
-  const streamWindow = new StreamWindow()
+  const streamWindow = new StreamWindow({
+    backgroundColor: argv.backgroundColor,
+  })
   streamWindow.init()
 
   let browseWindow = null

src/node/viewStateMachine.js

@@ -12,11 +12,11 @@ const VIDEO_OVERRIDE_STYLE = `
   }
   html, body, video {
     display: block !important;
-    background: black !important;
+    background: transparent !important;
   }
   html, body {
     overflow: hidden !important;
-    background: black !important;
+    background: transparent !important;
   }
   video, iframe.__video__ {
     display: block !important;