vue中如何调用ios摄像头_vue 调用摄像头并实现拍照功能

页面结构

效果预览

打开摄像头

关闭摄像头

拍照

js部分

export default {

data() {

return {

videoWidth: 250,

videoHeight: 350,

imgSrc: "",

thisCancas: null,

thisContext: null,

thisVideo: null,

openVideo:false

};

},

mounted(){

//this.getCompetence()//进入页面就调用摄像头

},

methods: {

// 调用权限(打开摄像头功能)

getCompetence() {

var _this = this;

_this.thisCancas = document.getElementById("canvasCamera");

_this.thisContext = this.thisCancas.getContext("2d");

_this.thisVideo = document.getElementById("videoCamera");