Add own video stream to layout

src/js/components/app.js

@@ -16,6 +16,7 @@ function app() {
     let url = createObjectURL(stream);
 
     function markActive() {
+      if (activeStore.isActive(userId)) return;
       dispatcher.dispatch({
         type: 'mark-active',
         userId

src/js/index.js

@@ -1,16 +1,17 @@
+'use strict';
 if (window.localStorage && !window.localStorage.debug) {
   window.localStorage.debug = 'video-client:*';
 }
 
+const App = require('./components/app.js');
 const React = require('react');
 const ReactDom = require('react-dom');
-
-const App = require('./components/app.js');
-const handshake = require('./peer/handshake.js');
-const debug = require('debug')('video-client:index');
-const getUserMedia = require('./browser/getUserMedia.js');
-const socket = require('./socket.js');
 const activeStore = require('./store/activeStore.js');
+const debug = require('debug')('video-client:index');
+const dispatcher = require('./dispatcher/dispatcher.js');
+const getUserMedia = require('./browser/getUserMedia.js');
+const handshake = require('./peer/handshake.js');
+const socket = require('./socket.js');
 const streamStore = require('./store/streamStore.js');
 
 function render() {
@@ -30,6 +31,10 @@ socket.once('connect', () => {
   debug('socket connected');
   getUserMedia({ video: true, audio: true })
   .then(stream => {
+    dispatcher.dispatch('add-stream', {
+      userId: '_me_',
+      stream
+    });
     debug('forwarding stream to handshake');
     handshake.init(socket, 'test', stream);
   })

src/js/store/activeStore.js

@@ -10,6 +10,9 @@ const removeListener = cb => emitter.removeListener('change', cb);
 let active;
 
 const handlers = {
+  'add-stream': ({ userId }) => {
+    active = userId;
+  },
   'mark-active': ({ userId }) => {
     debug('mark-active, userId: %s', userId);
     active = userId;