<h2>Simple Media Stream Example</h2>
<p id="para"></p>
<video autoplay="autoplay" id="ourVideo"></video>
video {width:480px; height:360px; border:1px solid black;}
var note = document.getElementById('para');
var videoEl = document.getElementById('ourVideo');

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;


if (navigator.getUserMedia) {
  // Media Stream Supported
  navigator.getUserMedia(
    {audio: true, video: true},
    function(stream) {
      success(stream, videoEl);
    },
    function(error) {
      fallback(error, videoEl);
    });
} else {
  // No support
  note.innerHTML = 'Sorry media stream not supported';
}

function fallback(e, vidEl) {
  vidEl.src = 'fallbackvideo.webm';
}

function success(stream, vidEl) {
  vidEl.src = window.URL.createObjectURL(stream);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.