• Scotland team
  • Author: Tomey

The opening

Recently, I am working on a Cloud camera application for Chrome App, which includes core functions such as taking photos, recording videos, saving photos and videos, uploading files and so on, and involves many HTML5 APIS related to media streaming. The purpose of writing this article is to summarize and sort out the knowledge points. The most important thing is to provide some guidance to readers who have relevant needs.

Note: this article is based on actual combat, theoretical knowledge is not introduced too much.

Taking pictures

HTML5’s getUserMedia API provides users with an interface to access hardware media (camera, video, audio, geolocation, etc.) without relying on any browser plugins.

The browser compatibility is as follows:

As you can see from the image above, Firefox, Chrome, Safari, Opera, and more are fully supported.

1. Get the video stream and play it with the video label.

    <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();
Copy the code

2. How to switch between multiple camera devices?

/ / enumerateDevices obtain all media device const mediaDevices = await the navigator. MediaDevices. EnumerateDevices (); Const videoDevices = MediaDevices.filter (item => item.kind ===)'videoinput') | | []; Const videoDeviceId = videoDevices[0]. DeviceId; const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); 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...Copy the code

3. Take photos and save them

Const canvas = document.createElement(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 the imagefunction download (src) {
        if(! src)return;
        const a = document.createElement('a');
        a.setAttribute('download', new Date());
        a.href = src;
        a.click();
    }
Copy the code

4. Turn off the camera

    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Close the camera 3 seconds latersetTimeout(function () {
        stream.getTracks().forEach(track => track.stop());
        stream = null;
    }, 3000);
Copy the code

Here to complete the simple camera shooting function

camera

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

The browser compatibility is as follows:

As shown in the figure above, the browser is far less compatible with MediaRecorder than getUserMedia. Currently, only Chrome and Firefox support MediaRecorder well.

Note: The video preview player video label should be muted

    const videoConstraints = { width: 1366, height: 768 };
    let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
    let mediaRecorder = new MediaRecorder(stream);
    letmediaRecorderChunks = []; / / record data flow mediaRecorder. Ondataavailable = (e) = > {mediaRecorderChunks. Push (e.d ata); }; MediaRecorder. Onstop = (e) => {// Create file binary data instance from Blob object.let recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType });
        mediaRecorderChunks = [];
        const file = new File([this.recorderFile], (new Date).toISOString().replace(/:|\./g, The '-') + '.mp4', {
            type: 'video/mp4'}); download(URL.createObjectURL(file)); // Download the videofunction 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 onstopCopy the code

conclusion

Through the above combat, I believe that readers have mastered the basic camera functions, such as taking pictures, shooting, saving documents, etc. Because the application project is not a personal project, the source code is not public, interested friends, may wish to try.