This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

directory

preface

The body of the

1. Enable the camera and microphone

2. Add a multicast control button

3. Take a local preview photo

4. Save the preview photo

5. Display texture effect (cover)

6. Video Preview Effects (multiple effects)

6.1 Exposure effect

6.2 Suspension stereoscopic effect

6.3 Peeling effect

6.4 Inverted color effect

conclusion

preface

Today’s article introduces a very simple video preview player based on WebRTC capture.

PS:”How WebRTC Works” series – overview

The body of the

What we need to do is a local preview of the video player, so first of all we need to turn on the camera, then show the player control buttons, and finally add some auxiliary functions, such as taking photos, saving photos, stickers, video effects, etc. Next, let’s look at the operation of a specific link. For the sake of the demo, you are advised to use Chrome.

1. Enable the camera and microphone

To open the camera, you can use the getUserMedia method, one of the three interfaces of WebRTC. For details, please refer to the following code:

    let getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    getUserMedia.call(navigator,{
        video:true
    },function(localMediaStream){  
        let video =document.getElementById('video1');
        video.srcObject = localMediaStream;
    },function(e) {
        console.log("error: ",e);
    });
Copy the code

Normally, Chrome will pop up a license prompt in the upper left corner and ask us to select. At this point, we select “Allow”.

​

Once authorized, the browser opens our camera, and we will see the local video preview, as shown below:

​

Of course, we can also call the getUserMedia method and set “audio=true” to request that our local microphone be turned on.

2. Add a multicast control button

With the camera turned on, we can preview our own local videos, but how do we operate our own camera and speakers? If we want to control our camera and speaker, we need to set another property on the video TAB: controls parameter. For specific usage, please refer to the following code:

<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline></video>
Copy the code

After that, we start the player again, and we will find that the video preview screen has some more control buttons of the player, as shown in the picture below:

​

With these controls, we can play and pause local video frames, switch speakers on and off, start and disable full screen, and enable picture-in-picture functions.

3. Take a local preview photo

In order to realize the local photo taking function, we add a “photo” button, which is used to capture the current frame of the video screen, and add a static screen display window at the bottom of the video preview window, as shown in the figure below. Note: The upper part is the active video window, and the lower part is the window showing the photo effect.

​

The image size is also set to 400px wide and 300px high. Here are the key codes:

let photo = document.querySelector("canvas#photo");
photo.width = 400;
photo.height = 300;

let video =document.getElementById('video1');
photo.getContext("2d").drawImage(video, 0, 0, photo.width, photo.height);
Copy the code

4. Save the preview photo

In order to facilitate observation, we adjust the display position of the video screen and photos, horizontal arrangement, note: the left is the active video window, the right is the still photo window. Add a save photo button with the following key code:

let canvas = document.querySelector("canvas");
let a = document.createElement("a");
a.download = "photo";
a.href = canvas.toDataURL("image/jpeg");
document.body.appendChild(a);
a.click();
a.remove();
Copy the code

​

Click the “Save” button, we will see that the photo is downloaded to the local. Find the saving path of the picture, open the picture, and the display effect is as shown in the picture below:

​

Note that the photo saved is no problem, perfect.

5. Display texture effect (cover)

Next, we will add texture to the video preview screen, that is, the cover of the legend, how to operate? We can do this here by using poster, another property of the video tag. We put the pre-prepared 1024.jpg theme image into the specified directory and use Poster to reference it.

Specific code reference is as follows:

<video id="video1" style="width: 400px; height: 300px" autoplay controls playsinline poster="1024.jpg"></video>
Copy the code

The effect of the map is as shown below:

​

6. Video Preview Effects (multiple effects)

In order to increase the contrast effect between the video effects and the original video, we added a player preview window next to the original video window, with the original video window on the left and the special effects video window on the right. The display effect of the special effects is mainly realized through the -webkit-filter filter. The specific effects are shown as follows:

6.1 Exposure effect

​

6.2 Suspension stereoscopic effect

​

6.3 Peeling effect

​

6.4 Inverted color effect

(Use a GIF, otherwise you’ll think you’re dealing with a still image)

​

conclusion

All right, so that’s basically what we’ve done with the native video preview player that we started with, isn’t it very simple and pretty cool? Well, it’s too late, let’s call it a day, it’s 1am and I’m still working on this article. I will put the source code address in the comment section later, as a demo project, interested students can DIY. Good night, October 24, 2020, 1:00 a.m. Happy Programmer’s Day

​