Не получается копировать видеопоток из navigator.getUserMedia в

Моя задача, снять видеопоток с вебкамеры с помощью navigator.getUserMedia и копировать этот видеопток в canvas . Камера включается, но в браузере ничего нет. Еще вопрос, будет ли видно эту трансляцию с другого устройства в локальной сети?

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br>


   <script type="text/javascript">
     var video = document.querySelector("#vid"),
     canvas = document.querySelector('#canvas'),
     ctx = canvas.getContext('2d'),
     localMediaStream = null,
     onCameraFail = function (e) {
          console.log('Camera did not work.', e); // Исключение на случай, если камера не работает
      };
     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      navigator.getUserMedia({video: true}, function(stream) {
          video.src = window.URL.createObjectURL(stream);
          localMediaStream = stream;
      }, onCameraFail);
      cameraInterval = setInterval(function(){ snapshot();}, 1);
       function snapshot(){
       if(localMediaStream){
              ctx.drawImage(video, 0, 0);
        }
      }

   </script>