1. Business scenarios

We need to open the camera on the PC side, capture the camera picture, and achieve a screenshot to save the picture.

Two, code implementation

1. The interface has two main operation sections: the Stream and capture panel and the presentation panel, an element that receives the stream from WebRTC, one for initiating the camera, and one for the user to click to capture a video frame.

<div class='content'> <video v-show="! init" id="photograph" width="300" height="300"></video> <div> <button v-if="init" @ click = "initPhoto ()" > initialize camera < / el - button > < button v - else @ click = "submit ()" > start collecting < / el - button > < / div > < / div > < / div >Copy the code

2. Next, we have an element in which the captured frames are stored, possibly manipulated in some way, and then converted to an output image file. The canvas is kept hidden by using the set canvas style to avoid cluttering the screen — the user doesn’t need to see this intermediate stage, so v-show==false, we have another oneElement in which we will draw an image — this is the final display for the user.

<canvas ref="photographImg" v-show="false" id="photographImg" width="300" height="300"</canvas>
<div class="output">
  <img id="photo" alt="The screen capture will appear in this box.">
</div>
Copy the code

3. Check the camera, initialize it, check whether the current user terminal has a camera, open it, and pass in the success callback function sucess and error.

initPhoto() { let _this = this; _this.loading = true; function getUserMedia(constraints, success, The error) {if (the navigator. MediaDevices. GetUserMedia) {/ / the latest standard API navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); } else if (the navigator. WebkitGetUserMedia) {/ / its core the navigator browser. WebkitGetUserMedia (constraints, success, The error)} else if (the navigator. MozGetUserMedia) {/ / firfox navigator browser. MozGetUserMedia (constraints, success, error); } else if (navigator. GetUserMedia) {// Old API navigator. GetUserMedia (constraints, success, error); } } let video = document.getElementById('photograph'); function success(stream) { setTimeout(res => { _this.init = false; _this.loading = false }, 2000); / / browser compatible with its core let CompatibleURL = window. The URL | | window. WebkitURL; video.srcObject = stream; video.play(); } function error(error) { _this.loading = false; ${error. Name}, ${error. Message} ', type: 'error'}); } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || The navigator. MozGetUserMedia) {/ / call user media equipment, access to camera getUserMedia ({video: {width: 300, height: 300}}, success, error); } else {_this.$message({showClose: true, message: 'not supported ', type: 'error'}); }},Copy the code

4. Click the button to collect the picture Submit

submit() { let canvas = document.getElementById('photographImg'); let context = canvas.getContext('2d'); let video = document.getElementById('photograph'); context.drawImage(video, 0, 0, 300, 300); this.takepicture(); }, function takepicture() { var context = canvas.getContext('2d'); if (width && height) { canvas.width = width; canvas.height = height; context.drawImage(video, 0, 0, width, height); var data = canvas.toDataURL('image/png'); photo.setAttribute('src', data); }} [more official information please reference] (https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos)Copy the code