We know how to use it WebRTC turns on the camera , yes Capture video frames And displayed with canvas.

This paper combines filter with video. Add a layer of filter to the video. The filter attribute is mainly used.

canvas and filter

Let's first look at the use of filter and canvas. First place the canvas and display a local picture.

<canvas id="sample-canvas" style="width: 358px;height: 100%;"></canvas>

Read in the picture with Image and display it to canvas. For the convenience of demonstration, the width and height of the canvas are consistent with the width and height of the picture.

const sampleCanvas = document.querySelector('#sample-canvas');
var img = new Image();
img.src = 'webrtc-fish.png'; // rustfisher.com pic
img.onload = function () {
  sampleCanvas.getContext('2d').drawImage(img, 0, 0, sampleCanvas.width, sampleCanvas.height);
}

slider

SeekBar is available in Android. Here we need to customize a slider. Here, you can also use the existing sliding selector according to the actual needs.

/* Select progress */
.slider-container {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
}

/* Sliding selector */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    height: 100%;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #0c23f7;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #044caa;
    cursor: pointer;
}

Several filters are defined and ready for use.

• The Blur effect is gelatinization
• Grayscale effect is grayscale
• The Invert effect is reverse
• Sepia effect is dark brown

<select id="filter">
    <option value="none">None</option>
    <option value="blur">Blur</option>
    <option value="grayscale">Grayscale</option>
    <option value="invert">Invert</option>
    <option value="sepia">Sepia</option>
</select>
<div class="slider-container">
    <p id="slide-value" style="width: 10%; height: 100%;"></p>
    <input type="range" min="1" max="100" value="10" class="slider" id="myRange">
</div>

The selector uses an input element with a value range of 1 ~ 100.

canvas+filter

When using a filter, you need to change the filter value of the element style.
The unit of blur is px. Others can use%. Concatenate the type and value into a string as the value of the filter.

const filterSelect = document.querySelector('select#filter');
filterSelect.onchange = function () {
  changeFilter();
};

// Change the value of the filter
function changeFilter() {
  var filterValue = "" + filterSelect.value + "(" + slider.value + "%)";
  if (filterSelect.value == "blur") {
    filterValue = "" + filterSelect.value + "(" + slider.value + "px)";
  } else if (filterSelect.value == "none") {
    filterValue = "";
  }
  sampleCanvas.style.filter = filterValue; // Image filter
}

slider.oninput = function () {
  sliderValue.innerHTML = this.value;
  changeFilter();
}

Different effects are previewed as follows

Effect name	Example diagram
Original drawing
blur
gray
invert
sepia

By adjusting the progress selection value, you can see that the effect is strengthened / weakened.

Combined video

With the above attempt, we can add the filter to the video.

The first is to introduce the adapter of webrtc.

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Students with poor network can also download this file and put it on your local server. such as

<script src="../js/adapter-latest.js" async></script>

Place video, button and canvas. Video preview camera, canvas is used to display the captured image.

<video playsinline autoplay></video>
<button id="start">Turn on the camera</button>
<button id="snapshot">intercept</button>
<canvas id="main"></canvas>

Similar to the previous two articles, first turn on the camera, and then give the camera stream to video.

const snapshotButton = document.querySelector('button#snapshot');
const video = window.video = document.querySelector('video');
const canvas = window.canvas = document.querySelector('canvas#main');
canvas.width = 480;
canvas.height = 360;

function startVideo() {
  navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(onError);
}

function gotStream(stream) {
  window.stream = stream;
  video.srcObject = stream;
}

Allow the browser to use the camera (the mac may need to allow permission once more).

This time we will change the filter of video. When changing the type of filter, set the filter to the style of canvas and video.

function changeFilter() {
  var filterValue = "" + filterSelect.value + "(" + slider.value + "%)";
  if (filterSelect.value == "blur") {
    filterValue = "" + filterSelect.value + "(" + slider.value + "px)";
  } else if (filterSelect.value == "none") {
    filterValue = "";
  }
  sampleCanvas.style.filter = filterValue; // Image filter
  canvas.style.filter = filterValue;       // Image filter
  video.style.filter = filterValue;        // Filter for video preview
}

It is worth noting that our filter is added to the elements and does not affect the video and pictures. In other words, this is an additional effect.

Summary

In this paper, the effect of css filter is applied to video and canvas. Add rich effects to videos and pictures.

preview

For a complete preview, please refer to webrtc and css filter examples
Original link