<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.