Media capture and streams

Microsoft Edge for Windows 10 introduced support for the Media Capture and Streams APIs based on the W3C Media Capture and Streams specification. These JavaScript APIs allow webpages to access media capture devices, like webcams or microphones, with permission from the user. By using the Media Capture and Streams APIs, you can create scenarios like capturing a photo using a webcam or capturing a voice message from a microphone.

Have you ever wanted to take a selfie while browsing the web? Now's your chance! Setup a webcam and check out our demo on the Microsoft Edge Dev site to see the APIs in action.

A brief summary

Media Capture functionality is commonly referred to as getUserMedia, which is the main interface that allows webpages to access media capture devices. The getUserMedia() call takes MediaStreamConstraints as an input argument. These constraints define the preferences and/or requirements for capture devices and captured media streams like facingMode, aspectRatio, microphone volume, etc. Through MediaStreamConstraints, you can also pick the specific capture device using its deviceId, which can be derived from the enumerateDevices method. Once the user grants permission, the getUserMedia() call will return a promise with a MediaStream object if the specific MediaStreamConstraints can be met.

The MediaStream object will have one or both of the following: one MediaStreamTrack for the captured video stream from a webcam, and one MediaStreamTrack for the captured audio stream from a microphone. The MediaStream object can be rendered on multiple rendering targets, for example, by setting it on the srcObject attribute of media element (e.g. video or audio tags), or the source node of a Web Audio graph.

The media elements have also been updated, enabling them to be used as a rendering target for MediaStream objects. For more information on certain restrictions on the behaviors of media elements, see the Media Element Attributes when Playing a MediaStream table on the MediaStream page.

Capture device selection and settings

The getUserMedia method allows a lot of flexibility in capture device selection and settings through MediaStreamConstraints. Visit ConstrainablePattern or the W3C spec for more information.

The following table summarizes the default setting we have internally on some of the constraints:

Constraints Default Values
width 640
aspectRatio 1.7777777778 (16:9)
frameRate 30
volume 1.0
sampleRate device default
sampleSize device default (16 or 32-bit)

When setting constraints, remember that capture devices tend to have a wide range of different capabilities. Allow flexibility in these constraints to avoid over constraining.

Examples

Capturing a photo with a webcam

Below is an example demonstrating how to use Media Capture functionality to capture a photo from a webcam.

First, get a video stream from a webcam and put it in a video tag for preview. Let's assume we have a video tag on the page and it is set to autoplay.

navigator.mediaDevices.getUserMedia({
    video: {
        facingMode: "user"
}}).then(function (stream) {
    var video = document.getElementById('videoTag');
    video.srcObject = stream;
}).catch( function (error) {
    console.log(error.name + ": " + error.message);
});

Next, copy a video frame onto a canvas. Assume we have set up the event listener so when you tap the video tag, we will invoke the following function:

function capturePhoto()
{
   var video = document.getElementById('videoTag');
   var canvas = document.getElementById('canvasTag');
   var videoWidth = video.videoWidth;
   var videoHeight = video.videoHeight;
   if (canvas.width !== videoWidth || canvas.height !== videoHeight)
   {
       canvas.width = videoWidth;
       canvas.height = videoHeight;
   }
   var ctx = canvas.getContext('2d');
   ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
}

Save the picture:

function savePhoto()
{
   var canvas = document.getElementById('canvasTag');
   var imgData = canvas.msToBlob("image/jpeg");
   navigator.msSaveBlob(imgData, "myPhoto.jpg");
}

Release the webcam device after you complete the task:

var video = document.getElementById('videoTag');
var videoTracks = mediaStream.getVideoTracks();
video.srcObject = null;
videoTracks[0].stop();

API reference

Media Capture and Streams APIs

Announcing media capture functionaliry in Microsoft Edge

Specification

W3C Media Capture and Streams