WebRTC stands for Web Real Time Communication and is a relatively new method for accessing video and audio from the browser. It allows us to write JavaScript code for the browser that can directly access a microphone or webcam. No flash or plugins needed. These examples show how to access audio and video using Firefox.
mozGetUserMedia is the important function that gets the media stream. Once we have access to that stream we can send it to a video element, an audio element, or a canvas for a still image. Other browsers have their own prefixes for getUserMedia. This example only works with Firefox because of the moz prefix.
Audio Only
<html>
<body>
<audio autoplay id="myAudioElement"></video>
<script>
var failHandler = function(e) {
console.log('Failed to get user media.', e);
};
navigator.mozGetUserMedia({audio: true}, function(localMediaStream) {
var video = document.querySelector('#myAudioElement');
video.src = window.URL.createObjectURL(localMediaStream);
}, failHandler);
</script>
</body>
</html>Video and Audio
<html>
<body>
<!-- Video element is good for video and audio -->
<video autoplay id="myVideoElement"></video>
<script>
var failHandler = function(e) {
console.log('Failed to get user media.', e);
};
navigator.mozGetUserMedia({video: true, audio: true}, function(localMediaStream) {
var video = document.querySelector('#myVideoElement');
video.src = window.URL.createObjectURL(localMediaStream);
}, failHandler);
</script>
</body>
</html>Taking a Snapshot
<html>
<body>
<video autoplay id="myVideoElement"></video>
<img src="" style="width:500px; height:500px;">
<canvas id="snapshotImageCanvas" style="display:none;" style="width:500px; height:500px;"></canvas>
<script>
var failHandler = function(e) {
console.log('Failed to get user media.', e);
};
navigator.mozGetUserMedia({video: true, audio: true}, function(localMediaStream) {
var video = document.querySelector('#myVideoElement');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something
};
}, failHandler);
var sourceVideo = document.querySelector('#myVideoElement');
var targetSnapshotCanvas = document.querySelector('#snapshotImageCanvas');
var ctx = targetSnapshotCanvas.getContext('2d');
var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(sourceVideo, 0, 0);
document.querySelector('img').src = targetSnapshotCanvas.toDataURL('image/png');
}
}
sourceVideo.addEventListener('click', snapshot, false);
navigator.mozGetUserMedia({video: true}, function(stream) {
sourceVideo.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, failHandler);
</script>
</body>
</html>