This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

We have been able to use WebRTC’s capabilities to open the camera through the browser and display the preview image in the video element. Next we try to capture a frame from the video and display it on the interface.

html

Prepare the interface first, and place the controls. Here is the key part of the code.

<video playsinline autoplay></video>
<button id="showVideo">Turn on the camera</button>
<button id="takeSnapshot">The interception</button>
<button id="clearList">Clear record</button>
<canvas id="mainCanvas"></canvas>
<div id="list" style="display: grid; grid-template-columns: repeat(auto-fill, 100px); column-gap: 20px; row-gap: 20px;"></div>
Copy the code
  • Video Is used to preview a video
  • 3 buttons, respectively used to open the camera, capture pictures and clear records
  • Canvas is used to display captured images
  • The div below is used to store multiple captured image records. Grid is assigned to it to make it easier to display multiple images

As usual, adapter-latest.js needs to be imported

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

js

Prepare to implement the function.

Open the camera and preview

Just like we did before to open the camera, we’ll use the getUserMedia method. Get the video stream and hand it over to the video to play.

const video = document.querySelector('video');
const constraints = {
  audio: false.video: true
};
/ /...

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

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

function onError(error) {
  console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}
Copy the code

Capture images

Grab the canvas in the interface and preorder a size (or not).

const mCanvas = window.canvas = document.querySelector('#mainCanvas');
mCanvas.width = 480;
mCanvas.height = 360;

// Start intercepting
  mCanvas.width = video.videoWidth;
  mCanvas.height = video.videoHeight;
  mCanvas.getContext('2d').drawImage(video, 0.0, mCanvas.width, mCanvas.height);
Copy the code

After interception is initiated, the CanvasRenderingContext2D object is retrieved using getContext. And then call its drawImage method. Draw the video frame in the video.

In addition to drawing this canvas, we can create new canvas every time we initiate (click the button) and display them like an album.

const list = document.querySelector('#list'); // Store multiple elements

  // Add 1 card
  var divItem = document.createElement("div");
  divItem.style.display = "block";
  divItem.width = 100;
  divItem.height = divItem.width * video.videoHeight / video.videoWidth; // Calculate the ratio
  divItem.style.width = divItem.width + "px";
  divItem.style.height = divItem.height + "px";
  console.log("div item size: ", divItem.width, divItem.height);

  var c1 = document.createElement("canvas");
  c1.width = divItem.width;
  c1.height = divItem.height;
  c1.getContext('2d').drawImage(video, 0.0, mCanvas.width, mCanvas.height, 0.0, c1.width, c1.height);

  divItem.appendChild(c1);
  list.appendChild(divItem);
Copy the code

Subitems are stored as divs wrapped around canvas. Create divItem with Document.CreateElement (“div”). Calculate the size of the divItem according to the width and height of the video and set the style.

Document.createelement (“canvas”) creates C1, whose width and height are set to the width and height of the previous divItem. And then draw the picture in. When you drawImage, you pass in the range of the video (source), and the following four parameters are your drawrange. And then we have a subterm. Add to our prepared list (div).

Clear record

Clears the subitems in div (list). A loop is used to retrieve and remove subitems.

var child = list.lastElementChild;
while (child) {
    list.removeChild(child);
    child = list.lastElementChild;
}
Copy the code

summary

Open the camera and display the video. Draw the video to the canvas. Create multiple Canvases to create a history effect. The drawing method of Canvas is mainly used. Note the parameters passed in when drawing, and can specify the boundaries to draw. That is, it is possible to draw only a portion of the video size.

Key methods used in the example

  • getUserMedia
  • getContext
  • drawImage
  • createElement

Easy preview link