©2020-2024 ioDraw All rights reserved
<>Vue Call the local camera to take photos ( Simple record )
Main code ：
<template> <div> <!--<el-input type="text" v-model="imgSrc" />--> <el-col :span
="1.5"> <el-button @click="onTake" icon="el-icon-camera" size="small"> Punch in </el
-button> </el-col> <!-- Show pictures after taking pictures --> <!--<el-form-item label="" prop="imgSrc"> <
img v-if="imgSrc" :src="imgSrc" style="width: 200px;height: 240px;" /> </el-form
-item>--> <!-- Photo mode box --> <el-dialog title=" Photo upload " :visible.sync="visible" @close=
"onCancel" width="1065px"> <div class="box"> <video id="videoCamera" class=
"canvas" :width="videoWidth" :height="videoHeight" autoPlay></video> <canvas id=
"canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas
> </div> <div slot="footer"> <el-button @click="drawImage" icon="el-icon-camera"
size="small"> photograph </el-button> <el-button v-if="os" @click="getCompetence" icon=
"el-icon-video-camera" size="small"> Turn on the camera </el-button> <el-button v-else @click
="stopNavigator" icon="el-icon-switch-button" size="small"> Turn off the camera </el-button> <
el-button @click="resetCanvas" icon="el-icon-refresh" size="small"> Reset </el-
button> <el-button @click="onCancel" icon="el-icon-circle-close" size="small">
complete </el-button> </div> </el-dialog> </div> </template> <script> export default {
name: "XXX", data() { return { visible: false,// Popup loading: false,// Upload button loading os:
false,// Control camera switch thisVideo: null, thisContext: null, thisCancas: null, videoWidth
: 500, videoHeight: 400, postOptions:[], CertCtl:'', // mask loading: true, //
Select array ids: [], // Non single disabled single: true, // Non multiple disabled multiple: true, // Total number total: 0,
// Project personnel table data akworkerList: [], // Type of work category data dictionary workerTypeOptions:[], // Pop up layer title title:
"", // Show pop-up layer open: false, // Query parameters queryParams: { pageNum: 1, pageSize: 10,
imgSrc:undefined, }, // Form parameters form: {}, // Form verification rules: { } }; }, created() { },
methods: { /* Call the camera to take pictures */ onTake() { this.visible = true; this.getCompetence(); }
, onCancel() { this.visible = false; /* this.resetCanvas();*/ this.stopNavigator
(); }, // Call camera permissions getCompetence() {
// Must be model in render Can only be obtained after dom node , Cannot get directly model Medium dom node this.$nextTick(() => { const
_this= this; this.os = false;// Switch to camera off this.thisCancas = document.
getElementById('canvasCamera'); this.thisContext = this.thisCancas.getContext(
'2d'); this.thisVideo = document.getElementById('videoCamera'); //
Older browsers may not support it at all mediaDevices, We first set up an empty object if (navigator.mediaDevices === undefined)
{ navigator.menavigatordiaDevices = {} } // Some browsers implement some mediaDevices, We cannot assign only one object
// use getUserMedia, Because it overwrites existing properties . // here , If missing getUserMedia attribute , Just add it . if (navigator.
mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia =
function (constraints) { // First, get the existing getUserMedia( If it exists ) let getUserMedia =
navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.
getUserMedia; // Some browsers do not support , An error message is returned // Keep the interface consistent if (!getUserMedia) { return Promise.
reject(new Error('getUserMedia is not implemented in this browser')) } //
otherwise , use Promise Wrap call to old navigator.getUserMedia return new Promise(function (resolve,
reject) { getUserMedia.call(navigator, constraints, resolve, reject) }) } }
const constraints = { audio: false, video: {width: _this.videoWidth, height:
_this.videoHeight, transform: 'scaleX(-1)'} }; navigator.mediaDevices.
getUserMedia(constraints).then(function (stream) { // Old browsers may not srcObject if (
'srcObject' in _this.thisVideo) { _this.thisVideo.srcObject = stream } else {
// Avoid using it in new browsers , Because it is being abandoned . _this.thisVideo.src = window.URL.createObjectURL(
stream) } _this.thisVideo.onloadedmetadata = function (e) { _this.thisVideo.play
() } }).catch(err => { this.$notify({ title: ' warning ', message:
' No permission to open the camera or incompatible browser version .', type: 'warning' }); }); }); }, // Draw picture drawImage() { //
click ,canvas Draw a picture this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth,
this.videoHeight); // Get picture base64 link this.imgSrc = this.thisCancas.toDataURL(
'image/png'); /*const imgSrc=this.imgSrc;*/ }, // Empty canvas clearCanvas(id) { let c =
document.getElementById(id); let cxt = c.getContext("2d"); cxt.clearRect(0, 0, c
.width, c.height); }, // Reset canvas resetCanvas() { this.imgSrc = ""; this.clearCanvas(
'canvasCamera'); }, // Turn off the camera stopNavigator() { if (this.thisVideo && this.
thisVideo!== null) { this.thisVideo.srcObject.getTracks()[0].stop(); this.os =
true;// Switch to on camera } }, /* Call the camera to take pictures */ } }; </script> <style> </style>
The effect is as follows ：
design sketch 1：
design sketch 2：
Technology