Shulou(Shulou.com)06/03 Report--

This article will explain in detail how Vue can use the PC camera to take real-time photos. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The details are as follows

Since I use to click the button to open the modal box to take a picture, here the button and the modal box code are pasted as follows.

Take photos and upload

Camera on camera off camera reset complete

Let's take a look at the js code. I deleted the unneeded part, because I'm sorry about the unit project.

Export default {name: "XXX", data () {return {visible: false,// pop-up window loading: false,// upload button load os: false,// control camera switch thisVideo: null, thisContext: null, thisCancas: null, videoWidth: 500, videoHeight: 400, postOptions: [], CertCtl:'', / / mask layer loading: true / / check the array ids: [], / / non-single disabled single: true, / / non-multiple disabled multiple: true, / / Total number of items total: 0, / / Project personnel table data akworkerList: [], / / work category data dictionary workerTypeOptions: [] / / pop-up layer title title: "", / / whether to display pop-up layer open: false, / / query parameter queryParams: {pageNum: 1, pageSize: 10, imgSrc:undefined,}, / / form parameter form: {}, / / form check rules: {}} }, created () {}, methods: {/ * call camera to start * / onTake () {this.visible = true; this.getCompetence ();}, onCancel () {this.visible = false; / * this.resetCanvas (); * / this.stopNavigator () }, / / call camera permission getCompetence () {/ / you can only get the dom node after render in model, and directly obtain the dom node this.$nextTick (() = > {const _ this = this; this.os = false;//) that cannot be obtained in model. Switch off camera this.thisCancas = document.getElementById ('canvasCamera'). This.thisContext = this.thisCancas.getContext ('2d'); this.thisVideo = document.getElementById (' videoCamera') / / older browsers may not support mediaDevices at all. We first set up an empty object if (navigator.mediaDevices = undefined) {navigator.menavigatordiaDevices = {}} / / some browsers implement part of mediaDevices. We cannot assign only one object / / use getUserMedia, because it will overwrite existing properties. / / here, if the getUserMedia attribute is missing, add it. If (navigator.mediaDevices.getUserMedia = undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {/ / first get the existing getUserMedia (if present) let getUserMedia = navigator.webkitGetUserMedia | | navigator.mozGetUserMedia | | navigator.getUserMedia / / some browsers do not support it and will return an error message / / keep the interface consistent if (! getUserMedia) {return Promise.reject (new Error ('getUserMedia is not implemented in this browser'))} / / otherwise Use Promise to wrap the call into the 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) {/ / the old browser may not have srcObject if ('srcObject' in _ this.thisVideo) {_ this.thisVideo.srcObject = stream} else {/ / avoid using it in the new browser because it is being deprecated. _ this.thisVideo.src = window.URL.createObjectURL (stream)} _ this.thisVideo.onloadedmetadata = function (e) {_ this.thisVideo.play ()}) .catch (err = > {this.$notify ({title: 'warning', message: 'camera is not enabled or the browser version is not compatible.' Type: 'warning'}) });});}, / / drawing drawImage () {/ / Click, canvas drawing this.thisContext.drawImage (this.thisVideo, 0,0, this.videoWidth, this.videoHeight); / / get the base64 link this.imgSrc = this.thisCancas.toDataURL ('image/png'); / * const imgSrc=this.imgSrc * /}, / / clear 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') }, / / close camera stopNavigator () {if (this.thisVideo & & this.thisVideo! = = null) {this.thisVideo.srcObject.getTracks () [0] .stop (); this.os = true;// switch to turn on camera}}, / * call camera to end * /}} This is the end of the article on "how to use the PC camera to take real-time photos on Vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.