Vue实现调用PC端摄像头实时拍照
更新时间:2021年9月30日 00:02 点击:2144
Vue之调用PC端摄像头实时拍照,供大家参考,具体内容如下
由于我使用的是点击按钮打开模态框拍照所以在这里吧按钮和模态框代码都粘贴如下。
<!-- 打开模态框按钮--> <el-form-item label="*照片:" prop="headImage"> <el-input type="text" v-model="imgSrc" /> <el-col :span="1.5"> <el-button @click="onTake" icon="el-icon-camera" size="small"> 拍照上传 </el-button> </el-col> </el-form-item> <!--拍照后显示图片--> <el-form-item label="" prop="imgSrc"> <img v-if="imgSrc" :src="imgSrc" style="width: 200px;height: 240px;" /> </el-form-item>
<!--拍照模态框--> <el-dialog title="拍照上传" :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"> 拍照 </el-button> <el-button v-if="os" @click="getCompetence" icon="el-icon-video-camera" size="small"> 打开摄像头 </el-button> <el-button v-else @click="stopNavigator" icon="el-icon-switch-button" size="small"> 关闭摄像头 </el-button> <el-button @click="resetCanvas" icon="el-icon-refresh" size="small"> 重置 </el-button> <el-button @click="onCancel" icon="el-icon-circle-close" size="small"> 完成 </el-button> </div> </el-dialog>
下来我们来看js代码,我把不需要的部分删除了,因为涉及单位项目问题实属抱歉哈
<script> export default { name: "XXX", data() { return { visible: false,//弹窗 loading: false,//上传按钮加载 os: false,//控制摄像头开关 thisVideo: null, thisContext: null, thisCancas: null, videoWidth: 500, videoHeight: 400, postOptions:[], CertCtl:'', // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 总条数 total: 0, // 项目人员表格数据 akworkerList: [], //工种类别数据字典 workerTypeOptions:[], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, imgSrc:undefined, }, // 表单参数 form: {}, // 表单校验 rules: { } }; }, created() { }, methods: { /*调用摄像头拍照开始*/ onTake() { this.visible = true; this.getCompetence(); }, onCancel() { this.visible = false; /* this.resetCanvas();*/ this.stopNavigator(); }, // 调用摄像头权限 getCompetence() { //必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点 this.$nextTick(() => { const _this = this; this.os = false;//切换成关闭摄像头 this.thisCancas = document.getElementById('canvasCamera'); this.thisContext = this.thisCancas.getContext('2d'); this.thisVideo = document.getElementById('videoCamera'); // 旧版本浏览器可能根本不支持mediaDevices,我们首先设置一个空对象 if (navigator.mediaDevices === undefined) { navigator.menavigatordiaDevices = {} } // 一些浏览器实现了部分mediaDevices,我们不能只分配一个对象 // 使用getUserMedia,因为它会覆盖现有的属性。 // 这里,如果缺少getUserMedia属性,就添加它。 if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { // 首先获取现存的getUserMedia(如果存在) let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 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(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) { // 旧的浏览器可能没有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 => { this.$notify({ title: '警告', message: '没有开启摄像头权限或浏览器版本不兼容.', type: 'warning' }); }); }); }, //绘制图片 drawImage() { // 点击,canvas画图 this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight); // 获取图片base64链接 this.imgSrc = this.thisCancas.toDataURL('image/png'); /*const imgSrc=this.imgSrc;*/ }, //清空画布 clearCanvas(id) { let c = document.getElementById(id); let cxt = c.getContext("2d"); cxt.clearRect(0, 0, c.width, c.height); }, //重置画布 resetCanvas() { this.imgSrc = ""; this.clearCanvas('canvasCamera'); }, //关闭摄像头 stopNavigator() { if (this.thisVideo && this.thisVideo !== null) { this.thisVideo.srcObject.getTracks()[0].stop(); this.os = true;//切换成打开摄像头 } }, /*调用摄像头拍照结束*/ } }; </script>
在此,本篇文章也就分享完毕了,若有什么不对之处还望各位大佬多多指点,若有相似之处还望联系修改删除,谢谢
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16