Detailed practical explanation of HTML5 photo and camera functions

Recently, I am working on a cloud camera application for chrome app. The application includes core functions such as taking pictures, video recording, saving photos and videos, uploading files, etc., which involves many HTML5 APIs related to media streaming. The purpose of writing this article is, firstly, to summarize and sort out the knowledge points, and most importantly, to provide some guidance to readers who have relevant needs.

Note: This article is based on actual combat and does not introduce too much theoretical knowledge.

HTML5's getUserMedia API provides users with an interface to access hardware device media (camera, video, audio, geographical location, etc.). Based on this interface, developers can access hardware media devices without relying on any browser plug-ins.

Browser compatibility is as follows:

As you can see from the picture above, mainstream browsers Firefox, Chrome, Safari, Opera, etc. have full support.

 <video id=video autoplay></video> --------------------------------------- ----------------------- const videoConstraints = { width: 1366, height: 768 }; const videoNode = document.querySelector('#video'); let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); videoNode.srcObject = stream; videoNode.play();

 // enumerateDevices gets all media devices const mediaDevices = await navigator.mediaDevices.enumerateDevices(); // Filter to get the camera device through the device instance king attribute videoinput const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput ') || []; // Get the front camera const videoDeviceId = videoDevices[0].deviceId; const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Get the rear camera const videoDeviceId = videoDevices[1].deviceId; const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // And so on...

 // Capture the video stream through canvas and generate a base64 format image const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 1366; canvas.height = 768; context. drawImage(videoNode, 0, 0, canvas.width, canvas.height); download(canvas.toDataURL('image/jpeg')); // Download image function download (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date()); a.href = src; a .click(); }

 let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Turn off the camera after 3s setTimeout(function () { stream.getTracks().forEach(track => track.stop()) ; stream = null; }, 3000);

This completes the simple camera taking function

The basic process of photography is to record a video stream and save it as an audio and video file. The HTML5 MediaRecorder object provides multimedia recording and video recording functions.

Browser compatibility is as follows:

As shown in the figure above, the browser's compatibility with MediaRecorder is far inferior to getUserMedia. Currently, only Chrome and Firefox have better support for MediaRecorder.

==Note: The video tag of the camera preview player must be set to muted (to eliminate the harsh noise caused by echo)==

 const videoConstraints = { width: 1366, height: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); let mediaRecorder = new MediaRecorder(stream); let mediaRecorderChunks = []; / / Record data stream mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) => { // Create a file binary data instance through the Blob object. let recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType }); mediaRecorderChunks = []; const file = new File([this.recorderFile], (new Date).toISOString().replace(/:| /./g, '-') + '.mp4', { type: 'video/mp4' }); download(URL.createObjectURL(file)); // Download video function download (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date( )); a.href = src; a.click(); } }; mediaRecorder.stop(); // Stop recording and trigger onstop event

Through the above practical exercises, I believe readers have mastered basic camera functions, such as taking pictures, video recording, saving files, etc. Since the application project is not a personal project and the source code is not public, those who are interested may wish to give it a try.