js调用USB摄像头拍照上传照片
时间:2019-11-06
本文章向大家介绍js调用USB摄像头拍照上传照片,主要包括js调用USB摄像头拍照上传照片使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
实现:js调用USB摄像头拍照上传照片
注意:部署到线上之后需要使用https才能调用摄像头
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices
js代码实例:(vue项目中)
获取video资源
// 拍照上传获取video cameraImgFile() { let _this = this; if (this.canvas !== null) { let cxt = this.canvas.getContext("2d"); cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); } // 老的浏览器可能根本没有实现 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; // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口 if (!getUserMedia) { return Promise.reject( new Error("getUserMedia is not implemented in this browser") ); } // 否则,为老的navigator.getUserMedia方法包裹一个Promise return new Promise(function(resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); }; } navigator.mediaDevices .getUserMedia({ video: true, audio: false }) .then(function(stream) { _this.videoShow = true; // 旧的浏览器可能没有srcObject _this.$nextTick(() => { let video = document.getElementById("videoDo"); if ("srcObject" in video) { video.srcObject = stream; } else { // 防止在新的浏览器里使用它,应为它已经不再支持了 video.src = window.URL.createObjectURL(stream); } video.onloadedmetadata = function(e) { video.play(); }; }); }) .catch(function(err) { _this.videoShow = false; _this.$message.warning("未发现可拍照设备或出现其他错误!"); }); },
获取图片
getAPhoto() { //绘制canvas图形 let video = document.getElementById("videoDo"); this.canvas = document.getElementById("canvasId"); this.canvasNoS = document.getElementById("canvasNoShow"); this.canvas.getContext("2d").drawImage(video, 0, 0, 150, 150); // 获取一张展示的小图 this.canvasNoS.getContext("2d").drawImage(video, 0, 0, 640, 894); // 获取一张上传的大图 //把canvas图像转为img图片 this.photoInfo = this.canvasNoS.toDataURL("image/png"); },
上传图片
uploadingPhoto() { if (this.photoInfo) { // 获取到的图片为base64格式 this.loadingSub = true; let formData = new FormData(); formData.append("imageFile", this.photoInfo.split(",")[1]); uploadImgBase64({ formData: formData }).then(res => { this.loadingSub = false; }); } else { this.$message.warning("请先拍照再确定上传照片"); } },
原文地址:https://www.cnblogs.com/zigood/p/11804943.html
- 数据访问函数库的使用方法(二)—— 获取记录集和使用事务的方法
- “数据访问函数库”(DataAccessLibrary for .net2.0 )源代码下载 09.06.15更新
- 数据访问函数库 for ado.net2.0
- 【问底】静行:FastJSON实现详解
- 分页解决方案 —— GridView + QuickPager + QuickPager_SQL + DataAccessLibrary + 数据库
- 使用接口来统一控件的取值、赋值和初始化
- 【自然框架】之通用权限的Demo(二):添加人员、添加账户、添加角色里面的账户以及列表的权限验证
- 我自己写的一个分页控件(源码和演示代码)PostBack分页版 for vs2003、SQL Server
- 分页控件之分页算法 —— for SQL Server 版。
- 【问底】王帅:深入PHP内核(一)——弱类型变量原理探究
- 一次对个人服务器入侵事件的调查
- BlackHat议题解析:Windows程序的数字签名校验“漏洞”
- 都是权限惹的祸 | 安卓恶意APP如何将其他APP中的私有数据搞到手
- SQLiScanner:又一款基于SQLMAP和Charles的被动SQL 注入漏洞扫描工具
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android开发疫情查询app(实例代码)
- 服务器上安装Mysql8.0
- Android AndroidX的迁移
- Android 应用Crash 后自动重启的方法小结
- Android 倒计时控件 CountDownView的实例代码详解
- 开启Scrapy爬虫之路
- Android Studio实现简单的QQ登录界面的示例代码
- Android 自定义SeekBar 实现分段显示不同背景颜色的示例代码
- 从约瑟夫环看循环链表
- Android 自定义LineLayout实现满屏任意拖动功能的示例代码
- Android scheme 跳转的设计与实现详解
- Android获取与设置系统环境变量的方法指南
- Android 通过腾讯TBS实现文件预览功能
- 使用VideoView播放App中的资源文件
- android 限制某个操作每天只能操作指定的次数(示例代码详解)