关于如何调用本地摄像头的问题

不管是在vue项目里还是在其其它的项目当中,它都是window的对象

准备工具 (VS Code,Vue脚手架工具,Element UI)

：

vue调用本地摄像头实现拍照功能，由于调用摄像头有使用权限，只能在本地运行，线上需用https域名才可以使用。

实现效果

1.摄像头效果

直接上代码

<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"><p>效果预览</p><img :src="imgSrc" alt class="tx_img" /></div><div class="button"><el-button @click="getCompetence()">打开摄像头</el-button><el-button @click="stopNavigator()">关闭摄像头</el-button><el-button @click="setImage()">拍照</el-button></div></div>
</template><script>export default {name:"Xiu",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");_this.thisVideo.style.display = 'block';// 获取媒体属性，旧版本浏览器可能不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象// 使用getUserMedia，因为它会覆盖现有的属性。// 这里，如果缺少getUserMedia属性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function(constraints) {// 首先获取现存的getUserMedia(如果存在)var getUserMedia =navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.getUserMedia;// 有些浏览器不支持，会返回错误信息// 保持接口一致if (!getUserMedia) {//不存在则报错return Promise.reject(new Error("getUserMedia is not implemented in this browser"));}// 否则，使用Promise将调用包装到旧的navigator.getUserMediareturn new Promise(function(resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};}var constraints = {audio: false,video: {width: this.videoWidth,height: this.videoHeight,transform: "scaleX(-1)"}};navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {// 旧的浏览器可能没有srcObjectif ("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.thisCancas.toDataURL("image/png");_this.imgSrc = image;//赋值并预览图片},// 关闭摄像头stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();},// 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 });}}
};
</script><style  scoped></style>

实现原理

1)通过按钮的点击来调用函数,实现照片的显示和录制,
2) 打开摄像头调用getCompetence()函数
3) 获取媒体属性，旧版本浏览器可能不支持mediaDevices，我们首先设置一个空对象,使用getUserMedia，因为它会覆盖现有的属性。这里，如果缺少getUserMedia属性，就添加它。
3.1) 我们需要一系列的判断,包括浏览器版本,或者srcObject,如果没有该属性那么就弃用它
4)拍照调用setImgs()函数,`

setImage() {var _this = this;// canvas画图_this.thisContext.drawImage(_this.thisVideo,0,0,_this.videoWidth,_this.videoHeight);// 获取图片base64链接var image = this.thisCancas.toDataURL("image/png");_this.imgSrc = image;//赋值并预览图片},

关闭摄像头调用函数stipNavigator()

stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();},

最后base64转文件，此处没用到

没有写css样式,这里偷懒了,大家可以自己操作

Vue调用本地摄像头权限相关推荐

vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...
Http请求:Google调用本地摄像头权限开启
项目场景: 最近在做一个考试培训系统!里面用到了监控摄像需要调用本地摄像头解决方案: 打开谷歌浏览器,输入chrome://flags/回车: 在输入框输入unsafely-treat-insecu ...
Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能
目录前言 API `MediaDevices.getUserMedia()` 拍照功能实例完整代码实现效果录像功能实例完整代码实现效果总结前言最近在做开源实例: Vue.js 实战系 ...
前端调用手机摄像头权限进行扫码解析
前端调用手机摄像头权限进行扫码解析(demo含Vue及原生) 前端调用手机摄像头权限进行扫码解析(demo含Vue及原生js写法) 引子实践此时已经可以成功调用摄像头,接下来集成进Vue工程中最 ...
ROS调用本地摄像头数据并在rviz里显示
ROS调用本地摄像头数据并在rviz里显示: 1 通过usb_cam驱动包启动摄像头 1.1 创建并编译usb_cam驱动程序 1.2 启动usb_cam_node节点 1.3 在rviz中显示本地摄 ...
目标检测——使用yolov6调用本地摄像头进行实时检测
yolov6源码自带了图片目标检测推理功能: 当我们想进行摄像头实时检测识别的时候会有点不方便,根据源码的图片目标检测推理功能,我们进行稍作调整即可进行调用本地摄像头进行目标检测推理功能. 首先在源码 ...
js调用本地摄像头拍照截图，提交后台
今天有个需求,需要在前端界面调用本地摄像头,然后拍照结束后可以截取预览,最后将结果提交到后台.查了网上很多的插件,发现适合的非常少,于是决定自己修改一个. 这里我修改了一个jquery插件,把摄像头拍 ...
JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
摄像头虚拟服务器页面,虚拟云服务器能调用本地摄像头
虚拟云服务器能调用本地摄像头内容精选换一换虚拟IP(Virtual IP Address,简称VIP)是一个未分配给真实弹性云服务器网卡的IP地址.弹性云服务器除了拥有私有IP地址外,还可以拥有 ...

Vue调用本地摄像头权限

使用电脑本地摄像头的权限