Allow Users to Record and Upload Videos Into Website via Api

Published: Feb 22nd, 2012 Updated: November 24th, 2020 Comments: 0

Your browser may non back up the functionality in this article.

Introduction

The power to capture audio and video has been the Holy Grail of web evolution for a long time. For many years, you had to rely on browser plugins (Flash or Silverlight) to get the chore done. Come on!

HTML5 to the rescue. It might non be credible, but the rise of HTML5 has brought a surge of access to device hardware. Geolocation (GPS), the Orientation API (accelerometer), WebGL (GPU), and the Spider web Sound API (sound hardware) are perfect examples. These features are ridiculously powerful and expose high-level JavaScript APIs that sit on top of the organisation's foundational hardware capabilities.

This tutorial introduces navigator.mediaDevices.getUserMedia(), which allows web apps to access a user's camera and microphone.

The road to the getUserMedia() API

If you're not aware of its history, the road to the getUserMedia() API is an interesting tale.

Several variants of media-capture APIs evolved over the by few years. Many folks recognized the need to access native devices on the web, only that led many people to advise a new spec. Things got so messy that the W3C finally decided to class a working group. Their sole purpose? Make sense of the madness! The Devices and Sensors Working Group has been tasked to consolidate and standardize the plethora of proposals.

Here's a summary of what happened in 2011.

Round one: HTML Media Capture

HTML Media Capture was the group's starting time go at standardizing media capture on the spider web. It overloads the <input type="file"> and adds new values for the accept parameter.

If you want to allow users take a snapshot of themselves with the webcam, that's possible with capture=camera:

            <input blazon="file" accept="paradigm/*;capture=camera">                      

Pretty nice, correct? Semantically, it makes a lot of sense. Where this item API falls short is the power to practise real-time effects, such every bit render alive webcam data to a <sheet> and apply WebGL filters. HTML Media Capture merely allows you to record a media file or take a snapshot in time.

Support

• Android iii.0 browser—1 of the beginning implementations. Bank check out this video to see information technology in activeness.
• Google Chrome for Android (0.16)
• Firefox Mobile 10.0
• iOS 6 Safari and Chrome (partial support)

Circular 2: Device element

Many thought HTML Media Capture was likewise limited, so a new spec emerged that supported whatever blazon of (time to come) device. Not surprisingly, the blueprint called for a new element, the <device> element, which became the predecessor to getUserMedia().

Opera was among the kickoff browsers to create initial implementations of video capture based on the <device> element. Soon subsequently (the same day to be precise), the WhatWG decided to scrap the <device> tag in favor of another up and comer, this time a JavaScript API chosen navigator.getUserMedia(). A calendar week later, Opera put out new builds that included back up for the updated getUserMedia() spec. Later that year, Microsoft joined the party by releasing a Lab for IE9 supporting the new spec.

Here's what <device> would have looked like:

            <device blazon="media" onchange="update(this.data)"></device> <video autoplay></video> <script>   part update(stream) {     certificate.querySelector('video').src = stream.url;   } </script>                      

Support:

Unfortunately, no released browser ever included <device>. Ane less API to worry most. <device> did have two smashing things going for it, though:

• It was semantic.
• It was easily extensible to back up more than than audio and video devices.

Accept a jiff. This stuff moves fast!

Circular iii: WebRTC

The <device> element eventually went the fashion of the dullard.

The pace to find a suitable capture API accelerated thanks to the larger WebRTC (spider web real-time advice) try. That spec is overseen by the Web Real-Fourth dimension Communications Working Group. Google, Opera, Mozilla, and a few others have implementations.

getUserMedia() is related to WebRTC because it's the gateway into that set of APIs. It provides the means to access the user'southward local photographic camera and microphone stream.

Back up:

getUserMedia() has been available since Chrome 21, Opera xviii, and Firefox 17. Support was initially provided by the Navigator.getUserMedia() method, but this has been deprecated.

You lot should now apply the navigator.mediaDevices.getUserMedia() method, which is widely supported.

Get started

With getUserMedia(), yous can finally tap into webcam and microphone input without a plugin. Camera access is now a call away, not an install away. It's baked straight into the browser. Excited yet?

Feature detection

Feature detection is a unproblematic cheque for the being of navigator.mediaDevices.getUserMedia:

            function hasGetUserMedia() {   return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia); } if (hasGetUserMedia()) {   // Good to get! } else {   warning("getUserMedia() is not supported by your browser"); }                      

Gain access to an input device

To use the webcam or microphone, you lot need to request permission. The parameter to getUserMedia() is an object specifying the details and requirements for each type of media y'all want to access. For instance, if you want to access the webcam, the parameter should be {video: true}. To apply both the microphone and photographic camera, pass {video: true, sound: truthful}:

            <video autoplay></video>  <script> const constraints = {   video: true, };  const video = certificate.querySelector("video");  navigator.mediaDevices.getUserMedia(constraints).then((stream) => {   video.srcObject = stream; }); </script>                      

Okay. And so what'south going on here? Media capture is a perfect example of HTML5 APIs working together. It works in conjunction with your other HTML5 buddies, <sound> and <video>. Discover that yous don't set a src attribute or include <source> elements on the <video> element. Instead of the URL of a media file, yous give the video a MediaStream from the webcam.

You also tell the <video> to autoplay, otherwise it would be frozen on the first frame. The addition of controls also works every bit you lot'd wait.

Set media constraints (resolution, pinnacle, and width)

The parameter to getUserMedia() can also be used to specify more requirements (or constraints) on the returned media stream. For instance, instead of merely bones access to video (for example, {video: true}), you can additionally require the stream to exist Hd:

            const hdConstraints = {   video: { width: { min: 1280 }, height: { min: 720 } }, };  navigator.mediaDevices.getUserMedia(hdConstraints).then((stream) => {   video.srcObject = stream; });                      

            const vgaConstraints = {   video: { width: { exact: 640 }, height: { exact: 480 } }, };  navigator.mediaDevices.getUserMedia(vgaConstraints).then((stream) => {   video.srcObject = stream; });                      

If the resolution isn't supported past the currently selected camera, getUserMedia()is rejected with an OverconstrainedError and the user isn't prompted to grant permission to admission their photographic camera.

For more than configurations, see the Constraints API.

Select a media source

The navigator.mediaDevices.enumerateDevices() method provides information near available input and output devices, and makes it possible to select a photographic camera or microphone. (The MediaStreamTrack.getSources() API has been deprecated.)

This example enables the user to choose an audio and video source:

            const videoElement = document.querySelector("video"); const audioSelect = document.querySelector("select#audioSource"); const videoSelect = certificate.querySelector("select#videoSource");  navigator.mediaDevices   .enumerateDevices()   .then(gotDevices)   .so(getStream)   .catch(handleError);  audioSelect.onchange = getStream; videoSelect.onchange = getStream;  function gotDevices(deviceInfos) {   for (let i = 0; i !== deviceInfos.length; ++i) {     const deviceInfo = deviceInfos[i];     const option = document.createElement("option");     option.value = deviceInfo.deviceId;     if (deviceInfo.kind === "audioinput") {       option.text =         deviceInfo.label || "microphone " + (audioSelect.length + 1);       audioSelect.appendChild(option);     } else if (deviceInfo.kind === "videoinput") {       option.text = deviceInfo.characterization || "camera " + (videoSelect.length + 1);       videoSelect.appendChild(option);     } else {       console.log("Found another kind of device: ", deviceInfo);     }   } }  part getStream() {   if (window.stream) {     window.stream.getTracks().forEach(role (track) {       runway.terminate();     });   }    const constraints = {     audio: {       deviceId: { exact: audioSelect.value },     },     video: {       deviceId: { exact: videoSelect.value },     },   };    navigator.mediaDevices     .getUserMedia(constraints)     .so(gotStream)     .catch(handleError); }  function gotStream(stream) {   window.stream = stream; // brand stream available to console   videoElement.srcObject = stream; }  office handleError(fault) {   console.error("Fault: ", error); }                      

Cheque out Sam Dutton'southward great demo of how to let users select the media source.

Security

getUserMedia() tin can only be called from an HTTPS URL or localhost. Otherwise, the hope from the call is rejected. getUserMedia() also doesn't work for cross-origin calls from iframes. For more than information, meet Deprecating Permissions in Cantankerous-Origin Iframes.

All browsers generate an infobar upon the call to getUserMedia(), which gives users the option to grant or deny admission to their cameras or microphones. Hither'south the permission dialog from Chrome:

Permission dialog in Chrome

This permission is persistent. That is, users don't accept to grant or deny access every time. If users modify their listen later, they tin update their photographic camera access options per origin from the browser settings.

The MediaStreamTrack actively uses the photographic camera, which takes resources and keeps the camera open (and photographic camera light on). When you lot no longer utilize a track, telephone call track.cease() so that the camera can be closed.

Bones demo

Accept screenshots

The <sail> API's ctx.drawImage(video, 0, 0) method makes it trivial to draw <video> frames to <canvas>. Of grade, now that you lot have video input through getUserMedia(), information technology'southward just equally easy to create a photo-booth app with real-time video:

            <video autoplay></video> <img src=""> <canvass mode="display:none;"></sail>  <script> const captureVideoButton = document.querySelector(   "#screenshot .capture-push" ); const screenshotButton = document.querySelector("#screenshot-button"); const img = document.querySelector("#screenshot img"); const video = certificate.querySelector("#screenshot video");  const canvas = document.createElement("canvas");  captureVideoButton.onclick = function () {   navigator.mediaDevices     .getUserMedia(constraints)     .and then(handleSuccess)     .take hold of(handleError); };  screenshotButton.onclick = video.onclick = function () {   canvas.width = video.videoWidth;   canvas.pinnacle = video.videoHeight;   sail.getContext("2d").drawImage(video, 0, 0);   // Other browsers will fall back to image/png   img.src = canvas.toDataURL("image/webp"); };  function handleSuccess(stream) {   screenshotButton.disabled = false;   video.srcObject = stream; } </script>                      

Apply effects

CSS Filters

With CSS filters, you can employ some gnarly effects to the <video> as it is captured:

            <video autoplay></video> <p><push button grade="capture-push button">Capture video</button> <p><button id="cssfilters-apply">Apply CSS filter</button></p>  <script> const captureVideoButton = document.querySelector(   "#cssfilters .capture-button" ); const cssFiltersButton = certificate.querySelector("#cssfilters-employ"); const video = document.querySelector("#cssfilters video");  allow filterIndex = 0; const filters = [   "grayscale",   "sepia",   "blur",   "brightness",   "contrast",   "hue-rotate",   "hue-rotate2",   "hue-rotate3",   "saturate",   "invert",   "", ];  captureVideoButton.onclick = function () {   navigator.mediaDevices     .getUserMedia(constraints)     .then(handleSuccess)     .grab(handleError); };  cssFiltersButton.onclick = video.onclick = function () {   video.className = filters[filterIndex++ % filters.length]; };  function handleSuccess(stream) {   video.srcObject = stream; } </script>                      

WebGL textures

One amazing apply instance for video capture is to render live input as a WebGL texture. Requite Jerome Etienne's tutorial and demo a await. It talks nigh how to apply getUserMedia() and Three.js to render live video into WebGL.

Utilize the getUserMedia API with the Spider web Audio API

Chrome supports live microphone input from getUserMedia() to the Spider web Audio API for real-time furnishings. It looks like this:

            window.AudioContext = window.AudioContext || window.webkitAudioContext;  const context = new AudioContext();  navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {   const microphone = context.createMediaStreamSource(stream);   const filter = context.createBiquadFilter();   // microphone -> filter -> destination   microphone.connect(filter);   filter.connect(context.destination); });                      

Demos:

• Alive-input visualizer
• Sound recorder
• Pitch detector

For more than information, meet Chris Wilson'southward post.

Determination

Historically, device access on the web has been a tough nut to crevice. Many tried, few succeeded. Virtually of the early ideas never gained widespread adoption or took hold outside of a proprietary environment. Possibly the primary problem has been that the spider web'southward security model is very dissimilar from the native world. In detail, you probably don't want every Joe Shmoe website to accept random access to your video camera or microphone. It's been difficult to get right.

Since then, driven by the increasingly ubiquitous capabilities of mobile devices, the spider web has begun to provide much richer functionality. Y'all now have APIs to take photos and command camera settings, record audio and video, and access other types of sensor information, such as location, move, and device orientation. The Generic Sensor framework ties all this together, alongside generic APIs to enable web apps to access USB and interact with Bluetooth devices.

getUserMedia() was merely the commencement wave of hardware interactivity.

Additional resources

• W3C specification
• Bruce Lawson's HTML5Doctor article
• Bruce Lawson's dev.opera.com article
• Get Started with WebRTC

Demos

• WebRTC samples: Canonical demos and code repository
• Paul Neave'south WebGL camera effects
• Alive video in WebGL
• Play xylophone with your hands

mottsixed1938.blogspot.com

Source: https://www.html5rocks.com/tutorials/getusermedia/intro/

Share this post