vue + element 谷歌浏览器调用电脑摄像头拍照

本项目使用ruoyi-vue-plus （使用文件上传功能去ruoyi-vue-plus查看封装的js,文件目录 utils/request.js 封装了axios）

框架推荐：https://gitee.com/JavaLionLi/RuoYi-Vue-Plus

抄袭一下项目例子：

vue + element 实现电脑拍照例子：https://gitee.com/devil_mask/camera-demo.git

界面：

 <el-row><!--开启摄像头的弹窗--><div class="info2" @click="onTake"><el-image :src="form.url" style="padding-left: 200px;width: 600px; height:400px"></el-image></div><!--开启摄像头的拍照和--><el-dialog title="拍照上传" :visible.sync="visible" @close="onCancel1" width="1065px" append-to-body><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"v-hasPermi="['system:oss:upload']"type="primary" size="small">完成</el-button></div></el-dialog></el-row>

script:

/*调用摄像头拍照开始*/onTake() {this.visible = true;this.getCompetence();},/*关闭弹窗，以及关闭摄像头功能*/onCancel1() {this.visible = false;this.stopNavigator(); // 关闭摄像头},// 调用摄像头权限getCompetence() {//必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点this.$nextTick(() => {const _this = this;this.os = false; //切换成关闭摄像头// 获取画布节点this.thisCancas = document.getElementById("canvasCamera");// 为画布指定绘画为2d类型this.thisContext = this.thisCancas.getContext("2d");//获取video节点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) {console.log(e)_this.thisVideo.play();};}).catch(err => {console.log(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; //切换成打开摄像头}},/*调用摄像头拍照结束*//*完成拍照并对其照片进行上传*/onCancel() {this.visible = false;/* this.resetCanvas();*/// console.log(this.imgSrc);this.imgFile = this.dataURLtoFile(this.imgSrc, new Date() + ".png");console.log(this.imgFile);this.stopNavigator();// let par = {//   photo: this.imgFile,// };let data = new FormData();data.append("file", this.imgFile); //1是图片，2是视频// data.append("code", this.addForm.code);// checkbeforepersonalphoto上传图片的接口uploadEscortCertificate(data).then(res => {console.log(res)if (res.code == "200") {this.$message({message: "上传成功",type: "success"});this.form.url = res.data.url;this.form.osid = res.data.ossId;}});},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 });}

上传图片：

//上传图片
export function uploadEscortCertificate(data) {return request({url: '/system/oss/upload',method: 'post',data: data})
}

谷歌浏览器限制，非https的需要设置：chrome://flags/#unsafely-treat-insecure-origin-as-secure

以上便是整个拍照功能的实现。

网页右下角显示预览：

<div class="side-bar"><el-button v-print="'#printpdf'" type="primary" style="margin-top:20px">预览</el-button>
</div>

对应CSS：

 .side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 100;}

效果：

注意：el-dialog弹el-dialog  需要加 append-to-body属性,否则被遮层给遮住.

vue + element 谷歌浏览器调用电脑摄像头拍照相关推荐

vue H5页面调用手机相机拍照/图库上传
//html//相机 //capture:user(前置摄像头).environment(后置摄像头) <input type="file" id="photo&q ...
调用电脑摄像头拍照及下载
代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
WEB页调用电脑摄像头+拍照
放在Web服务环境下访问,PC可以访问本电脑的摄像头:试了下手机访问也可以打开手机的摄像头,不过Android下的UC可以,试了苹果下的UI打不开,可能是权限设置啥的,没细搞试. <!docty ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
原生js 调用电脑摄像头完成拍照
原生js 调用电脑摄像头完成拍照人脸登录新发版1.0x 免费开源,保姆级别教程人脸登录地址 1 ,完成拍照后可转换成base64码,你可以对当前base64码进行操作,当初我就利用这个功能点完成前端 ...
vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台
需求: 在vue项目中使用摄像头拍摄照片传递,进行上传,如果上传成功可以获取到url链接,进行下一步的操作内容梳理 1.首先进入页面打开摄像头 2.点击手动拍照进行拍摄照片,实时显示拍照效果 3.拿 ...
vue 电脑摄像头拍照
我的需求是, 打开摄像头, 拍照后, 把文件上传到服务器; 过程不是很顺利, 所以记录一下. 放置打开摄像头的按钮的页面就不写了, 主要写摄像头页面; 注意: 服务必须是安全链接 https 的才 ...
java 调用电脑摄像头并拍照
java 调用电脑摄像头 1 在myeclipse中新建一个项目,然后我们需要引用以下三个依赖包 2 在项目下创建一个类运行main方法后会弹出一个窗体(这个相当是java版的WCF) 2 JAVA ...
vue+springboot实现调用本地摄像头拍照上传后端使用百度ocr识别身份证信息
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.前端二.后端总结提示:以下是本篇文章正文内容,下面案例可供参考一.前端 1.首先进入页面打开摄像头 2.点击手动 ...

vue + element 谷歌浏览器调用电脑摄像头拍照

vue + element 谷歌浏览器调用电脑摄像头拍照相关推荐

最新文章

热门文章