需求描述

点击照相机拍照，弹出照相机拍照弹窗，点击拍照按钮，截取录像的帧，点击保存，提交数据给后台。

功能实现

1.html模块

//点击打开照相机拍照弹窗
<el-button @click="handleOpen">照相机拍照</el-button>//照相机拍照弹窗<div class="public-mask mask-grey-bg" v-show="cameraOpen"><div class="mask-main camera-main"><div class="mask-title"><img src="../assets/images/icon_camera.png" class="title-icon"/><span>照相机拍照</span><img src="../assets/images/icon_close.png" class="title-close" @click="closeCameraMask"/></div><div class="camera-box"><div class="camera-left"><!-- 这里就是摄像头显示的画面 --><video id="videoCamera" width="100%" height="100%"></video></div><div class="camera-right"><div class="camera-img-box"><div class="small-img"><!-- 这里是点击拍照显示的图片画面 --><img v-if="imgSrc" :src="imgSrc" style="width: 200px;height: 150px;" /><canvas id="canvasCamera" class="canvas" :width='videoWidth' :height='videoHeight' style="display: none;"></canvas></div><div><!-- 点击拍照和保存按钮 --><el-button type="primary" class="save-camera-btn" icon="el-icon-camera" @click="drawImage" style="margin-top: 10px;">拍照</el-button><el-button type="primary" class="save-camera-btn" icon="el-icon-check" @click="uploadPicture">保存</el-button></div></div></div></div></div></div>

2.css模块
就是一个弹窗，这里就不进行展示了。

3.js模块

export default {name: "Index",data() {return {/** 照相机弹窗模块-start */cameraOpen: false,imgSrc: undefined,os: false,//控制摄像头开关thisVideo: null,thisContext: null,thisCancas: null,videoWidth: 800,videoHeight: 600,/** 照相机弹窗模块-end */}},methods: {/** 调用摄像头拍照-start*/// 打开照相机弹窗handleOpen() {this.cameraOpen = true;this.getCompetence();},// 调用摄像头权限getCompetence() {//必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点this.$nextTick(() => {const _this = this;this.os = false;//切换成关闭摄像头this.thisCancas = document.getElementById('canvasCamera');//这里是需要截取的canvas的Id名称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.getUserMediareturn 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) {// 旧的浏览器可能没有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 => {this.$notify({title: '警告',message: '没有开启摄像头权限或浏览器版本不兼容.',type: 'warning'});});});},//绘制图片drawImage() {// 点击，canvas画图this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);// 获取图片base64链接，展示到界面中的也是这个url地址this.imgSrc = this.thisCancas.toDataURL('image/png');},// 上传照相机图片uploadPicture() {// 这里就调用上传图片接口即可...},//清空画布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;//切换成打开摄像头}},// 关闭照相机弹窗closeCameraMask() {this.cameraOpen = false; // 关闭照相机弹窗this.resetCanvas(); // 重置画布this.stopNavigator(); // 关闭摄像头//this.getDetailList(); // 重新获取一下List，此方法不再书写},/** 调用摄像头拍照-end*/},
}

效果展示

vue调用电脑端摄像头实时拍照相关推荐

VUE调用pc端摄像头
VUE项目调用pc端摄像头功能 (摄像头只可以用localhost启用项目访问,或者修改浏览器配置,底部有方法) 代码如下: <template> & ...
h5调用移动端摄像头实现拍照获取图片
需求简述:打开移动端相机进行拍照,并且获取图片效果图相关代码 <!DOCTYPE html> <html><head><meta charset=&quo ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
调用海康摄像头实时识别数字牌数字
项目场景: 调用海康摄像头实时识别数字牌数字前言项目所需,调用网络摄像头来完成对一个数字牌的识别,用模板匹配的方法分离出数字用VS2015+OPENCV3.4.3完成一.调用摄像头首先在VS ...
pc端调起电脑的摄像头进行拍照功能
我的需求是在电脑端调起电脑上面的摄像头,有可能是电脑自带的摄像头也可能是插入的USB摄像头下面这个是如果用户有两个摄像头的话,会将这两个摄像头都列出来,用户可以自己选择使用哪个摄像头. 下面是htm ...
C# 利用Aforge调用本机摄像头完成拍照，录像
用C#做了一个简单的摄像头录像项目,记录一下. 实现功能打开.关闭摄像头并显示相应画面实现拍照功能实现录像功能实现保存图片.录像的功能运行界面效果 winForm控件首先安装NuGet程序 ...
js如何调用电脑的摄像头
闲来无事,用js写了一个调用摄像头的demo,并用canvas显示保存.这个功能很实用,比如上传用户的头像,即时拍照及时上传. Html: <video width="200px&qu ...
Python-OpenCV学习--电脑外接摄像头实时采集FAST角点并显示
一.一般的Python OpenCV代码是对现有的图片提取fast角点参考代码很多:https://blog.csdn.net/update7/article/details/105927539 二 ...
前端项目用hbuilder打包成APP后，调用api开启摄像头进行拍照, 5+app框架
这几个方法function是js通用的, 非vue项目也可以使用! 记得收藏哦! 重点是从按钮"开启相机" 开始,点击触发photo方法可以直接看method中的photo方法 ...

vue调用电脑端摄像头实时拍照

vue调用电脑端摄像头实时拍照

需求描述

功能实现

效果展示

vue调用电脑端摄像头实时拍照相关推荐

最新文章

热门文章