vue 调用浏览器摄像头实现及原理解析
作者:他的猫MM
这篇文章主要为大家介绍了vue调用浏览器摄像头实现及原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
代码示例
<template> <div class="camera_outer"> <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay ></video> <canvas style="display: none" id="canvasCamera" :width="videoWidth" :height="videoHeight" ></canvas> <div v-if="imgSrc" class="img_bg_camera"> <img :src="imgSrc" alt="" class="tx_img"/> </div> <el-button @click="getCompetence">打开摄像头</el-button> <el-button @click="stopNavigator">关闭摄像头</el-button> <el-button @click="setImage">拍照</el-button> </div> </template> <script> export default { name: "CameraVideo", data() { return { videoWidth: 600, videoHeight: 600, imgSrc: "", thisCanvas: null, thisContext: null, thisVideo: null } }, mounted() { this.getCompetence() }, methods: { // 调用权限(打开摄像头功能) getCompetence() { var _this = this; this.thisCanvas = document.getElementById("canvasCamera"); this.thisContext = this.thisCanvas.getContext("2d"); this.thisVideo = document.getElementById("videoCamera"); // 旧版本浏览器可能根本不支持mediaDevices,我们首先设置一个空对象 if (window.navigator.mediaDevices === undefined) { window.navigator.mediaDevices = {}; } // 一些浏览器实现了部分mediaDevices,我们不能只分配一个对象 // 使用getUserMedia,因为它会覆盖现有的属性。 // 这里,如果缺少getUserMedia属性,就添加它。 if (window.navigator.mediaDevices.getUserMedia === undefined) { window.navigator.mediaDevices.getUserMedia = (constraints) => { // 首先获取现存的getUserMedia(如果存在) var getUserMedia = window.navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || window.navigator.getUserMedia; // 有些浏览器不支持,会返回错误信息 // 保持接口一致 if (!getUserMedia) { return Promise.reject( new Error("getUserMedia is not implemented in this browser") ); } // 否则,使用Promise将调用包装到旧的navigator.getUserMedia return new Promise(function (resolve, reject) { getUserMedia.call(window.navigator, constraints, resolve, reject); }); }; } var constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: "scaleX(-1)", }, }; window.navigator.mediaDevices .getUserMedia(constraints) .then(function (stream) { // 旧的浏览器可能没有srcObject if ("srcObject" in _this.thisVideo) { _this.thisVideo.srcObject = stream; } else { // 避免在新的浏览器中使用它,因为它正在被弃用。 _this.thisVideo.src = window.URL.createObjectURL(stream); } _this.thisVideo.onloadedmetadata = function (e) { _this.thisVideo.play(); }; }) .catch((err) => { console.log(err); }); }, // 绘制图片(拍照功能) setImage() { var _this = this; // 点击,canvas画图 _this.thisContext.drawImage( _this.thisVideo, 0, 0, _this.videoWidth, _this.videoHeight ); // 获取图片base64链接 var image = this.thisCanvas.toDataURL("image/png"); _this.imgSrc = image; this.$emit("refreshDataList", this.imgSrc); }, // base64转文件 dataURLtoFile(dataurl, filename) { var arr = dataurl.split(","); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type: mime}); }, // 关闭摄像头 stopNavigator() { this.thisVideo.srcObject.getTracks()[0].stop(); } } } </script> <style scoped lang="scss"> .camera_outer { position: relative; overflow: hidden; background-size: 100%; video, canvas, .tx_img { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); border: 1px solid #ccc; } .btn_camera { position: absolute; bottom: 4px; left: 0; right: 0; height: 50px; background-color: rgba(0, 0, 0, 0.3); line-height: 50px; text-align: center; color: #ffffff; } .bg_r_img { position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .img_bg_camera { position: absolute; right: 0; top: 0; img { width: 300px; height: 300px; } .img_btn_camera { position: absolute; bottom: 0; left: 0; right: 0; height: 50px; line-height: 50px; text-align: center; background-color: rgba(0, 0, 0, 0.3); color: #ffffff; .loding_img { width: 50px; height: 50px; } } } } </style>
报错处理
但是这里会出现一个报错信息: getUserMedia is not implemented in this browser这个错误信息怎么处理呢, 有两种方案一种是生产环境, 一种是开发环境:
- 将http协议换成https协议访问网站(生产环境)
- 浏览器内核指定白名单(开发环境):
//在谷歌浏览器内输入url chrome://flags/#unsafely-treat-insecure-origin-as-secure
输入完后照下图输入我们要设置的白名单域名选择 Enabled 重启浏览器就可以了
以上就是vue 调用浏览器摄像头实现及原理解析的详细内容,更多关于vue 调用浏览器摄像头的资料请关注脚本之家其它相关文章!