How to Record Video of Face and Screen and Read Script

Mat is a correspondent to WebFundamentals

Many browsers now have the ability to admission video and sound input from the user. Withal, depending on the browser it might be a full dynamic and inline experience, or it could be delegated to another app on the user's device.

Start simple and progressively

The easiest thing to practice is simply ask the user for a pre-recorded file. Exercise this by creating a simple file input element and adding an accept filter that indicates we can only accept video files and a capture attribute that indicates we want to get it direct from the camera.

          <input blazon="file" have="video/*" capture>                  

This method works on all platforms. On desktop it will prompt the user to upload a file from the file system (ignoring the capture attribute). In Safari on iOS it volition open upward the camera app, allowing you to record video and then ship it back to the web page; on Android information technology will give the user the option of which app to employ record the video in before sending it back to the web folio.

Many mobile devices take more than one photographic camera. If you lot accept a preference, you can set the capture attribute to user, if you want the photographic camera that faces the user, or environment if you want the camera that faces outward.

          <input blazon="file" accept="video/*" capture="user"> <input type="file" accept="video/*" capture="surround">                  

Note that this is merely a hint - if the browser doesn't support the option, or the camera type yous enquire for isn't available, the browser may choose another camera.

Once the user has finished recording and they are dorsum in the website, you lot need to somehow get ahold of the file data. You can become quick access past attaching an onchange event to the input element and then reading the files holding of the event object.

<input type="file" have="video/*" capture="photographic camera" id="recorder"> <video id="player" controls></video> <script>   var recorder = document.getElementById('recorder');   var player = document.getElementById('role player');    recorder.addEventListener('change', function(e) {     var file = e.target.files[0];     // Practise something with the video file.     role player.src = URL.createObjectURL(file);   }); </script>        

Once you take admission to the file you lot tin can practice anything you desire with it. For example, y'all can:

• Attach it straight to a <video> element and then that yous can play it
• Download it to the user'south device
• Upload it to a server by attaching to an XMLHttpRequest
• Draw the frames into a canvass and apply filters to it

Whilst using the input chemical element method of getting access to video data is ubiquitous, information technology is the to the lowest degree appealing option. We really want to become access to the camera and provide a nice experience direct in the page.

Access the photographic camera interactively

Modern browsers can have a direct line to the photographic camera allowing usa to build experiences that are fully integrated with the web page and the user will never leave the browser.

Acquire access to the photographic camera

We can directly access the camera by using an API in the WebRTC specification chosen getUserMedia(). getUserMedia() will prompt the user for access to their connected microphones and cameras.

If successful the API will return a Stream that volition contain the information from either the camera or the microphone, and we can then either attach information technology to a <video> chemical element, attach it to a WebRTC stream, or save it using the MediaRecorder API.

To get information from the camera nosotros just set video: true in the constraints object that is passed to the getUserMedia() API

<video id="player" controls></video> <script>   var actor = document.getElementById('player');    var handleSuccess = function(stream) {     role player.srcObject = stream;   };    navigator.mediaDevices.getUserMedia({ audio: truthful, video: true })       .then(handleSuccess) </script>        

If yous want to choose a particular camera you tin first enumerate the available cameras.

          navigator.mediaDevices.enumerateDevices().so((devices) => {   devices = devices.filter((d) => d.kind === 'videoinput'); });                  

You tin can then pass the deviceId that you wish to employ when you lot call getUserMedia.

          navigator.mediaDevices.getUserMedia({   audio: true,   video: {     deviceId: devices[0].deviceId   } });                  

By itself, this isn't that useful. All we can do is take the video information and play information technology back.

Access the raw data from the camera

To admission the raw video data from the camera you can draw each frame into a <sail> and manipulate the pixels direct.

For a 2nd canvas you tin can use the drawImage method of the context to draw the current frame of a <video> element into the canvass.

          context.drawImage(myVideoElement, 0, 0);                  

With a WebGL canvas yous tin use a <video> chemical element as the source for a texture.

          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, myVideoElement);                  

Note that in either case this will use the current frame of a playing video. To process multiple frames you need to redraw the video to the sail each time.

You can learn more about this in our article nigh applying real-time effects to images and video.

Save the data from the camera

The easiest way to relieve the data from the photographic camera is to use the MediaRecorder API.

The MediaRecorder API will take the stream created by getUserMedia and then progressively relieve the data from the stream to you preferred destination.

<a id="download">Download <push button id="stop">Stop <script>   allow shouldStop = false;   let stopped = false;   const downloadLink = document.getElementById('download');   const stopButton = certificate.getElementById('stop');    stopButton.addEventListener('click', part() {     shouldStop = true;   })    var handleSuccess = office(stream) {     const options = {mimeType: 'video/webm'};     const recordedChunks = [];          const mediaRecorder = new MediaRecorder(stream, options);      mediaRecorder.addEventListener('dataavailable', function(e) {       if (eastward.data.size > 0) {         recordedChunks.push(e.data);       }        if(shouldStop === true && stopped === false) {         mediaRecorder.end();         stopped = true;       }     });      mediaRecorder.addEventListener('cease', function() {       downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));       downloadLink.download = 'acetest.webm';     });      mediaRecorder.starting time();          };    navigator.mediaDevices.getUserMedia({ audio: true, video: true })       .so(handleSuccess);  </script>        

In our instance we are saving the data straight into an array that we can afterward turn in to a Blob which can be and so used to save to our Web Server or directly in storage on the user'southward device.

Ask permission to use camera responsibly

If the user has not previously granted your site access to the camera and then the instant that yous phone call getUserMedia the browser volition prompt the user to grant your site permission to the photographic camera.

User's hate getting prompted for admission to powerful devices on their motorcar and they volition frequently cake the request, or they will ignore information technology if they don't sympathize the context of which the prompt has been created. Information technology is all-time practice to only ask to access the camera when first needed. Once the user has granted access they won't be asked again, however, if they reject access, you lot can't become access over again to enquire the user for permission.

Use the permissions API to check if you already have admission

The getUserMedia API provides yous with no knowledge of if you already accept access to the camera. This presents yous with a problem, to provide a dainty UI to get the user to grant y'all access to the photographic camera, yous take to ask for admission to photographic camera.

This can be solved in some browsers by using the Permission API. The navigator.permission API allows you to query the country of the ability to access specific API'south without having to prompt again.

To query if you have access to the user'southward photographic camera yous can laissez passer in {proper name: 'camera'} into the query method and it volition return either:

• granted — the user has previously given you access to the camera;
• prompt — the user has not given you access and volition be prompted when you call getUserMedia;
• denied — the arrangement or the user has explicitly blocked admission to the camera and you won't be able to get access to it.

And you tin can now bank check quickly check to see if y'all need to alter your user interface to accommodate the deportment that the user needs to take.

          navigator.permissions.query({name:'photographic camera'}).and so(function(result) {   if (upshot.country == 'granted') {    } else if (result.state == 'prompt') {    } else if (result.land == 'denied') {    }   issue.onchange = part() {    }; });                  

Feedback

Was this page helpful?

Yes

What was the all-time matter about this page?

It helped me complete my goal(southward)

Thank you for the feedback. If you have specific ideas on how to improve this folio, delight create an event.

It had the information I needed

Thank you for the feedback. If yous have specific ideas on how to improve this folio, delight create an issue.

It had accurate information

Thank you for the feedback. If yous have specific ideas on how to improve this folio, please create an issue.

It was piece of cake to read

Cheers for the feedback. If yous have specific ideas on how to improve this page, delight create an issue.

Something else

Thank you for the feedback. If you accept specific ideas on how to improve this page, please create an consequence.

No

What was the worst affair about this page?

It didn't assist me complete my goal(southward)

Thank you for the feedback. If you have specific ideas on how to better this page, please create an outcome.

Information technology was missing data I needed

Thanks for the feedback. If you lot take specific ideas on how to improve this page, please create an issue.

It had inaccurate information

Thank you for the feedback. If y'all have specific ideas on how to amend this page, please create an issue.

It was hard to read

Thanks for the feedback. If you lot have specific ideas on how to improve this page, please create an issue.

Something else

Cheers for the feedback. If you lot have specific ideas on how to meliorate this folio, please create an issue.

franklingoorrithle.blogspot.com

Source: https://developers.google.com/web/fundamentals/media/recording-video

Share this post