移动端开启摄像头拍照截取图片功能实现

其实是一个图片上传功能，但是呢需求不是让做成传统的图片上传。

步骤：

开启摄像（）
拍照


<video id="video" width="400" height="400" poster="../img/video_fill_light.png"></video>
<canvas id="canvas" width="300px" height="300px"></canvas>
<button type="button" @click="getMedia()" v-if="flag">点击获取摄像头权限</button>
<button type="button" @click="takePhoto()" v-else>点击认证</button>getMedia() {let constraints = {video: {width: 500,height: 500,facingMode:'user'},audio: false};//获得video摄像头区域let video = document.getElementById("video");//video设置/** 处理iPhone的Safari浏览器打开相机只有一帧图像问题* 在调用 getUserMedia 之前设置（iOS11、12均生效，iOS13可以不再设置）*/video.setAttribute('autoplay', '');video.setAttribute('muted', '');video.setAttribute('playsinline', '');// 参考网站：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMediaif (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraint) {// 首先，如果有getUserMedia的话，就获得它var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口if (!getUserMedia) {// 如果未启用https，那么微信，苹果都会进入这里，表现为没有实现。var isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);if (isiOS) {return Promise.reject(new Error('请升级系统到 iOS 14.3 及以上版本或换用安卓手机'));} else {return Promise.reject(new Error('设备调用异常，请联系管理员'));}}// 否则，为老的navigator.getUserMedia方法包裹一个Promise（这里就兼容了旧版的使用方法）return new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraint, resolve, reject);});}}let promise = navigator.mediaDevices.getUserMedia(constraints);promise.then((stream) => {if ("srcObject" in video) {video.srcObject = stream;} else {// 防止在新的浏览器里使用它，应为它已经不再支持了video.src = window.URL.createObjectURL(stream);}video.onloadedmetadata = function (e) {video.play();};}).catch((err) => {var errStr = err.toString();if (errStr.indexOf('NotAllowedError') != -1) {vant.Toast('请允许摄像头权限');} else if (errStr.indexOf('Error') == 0) {// 去掉前面的“Error:”字符串vant.Toast(errStr.slice(6));} else {vant.Toast('设备调用异常，请联系管理员');}})},
takePhoto() {let canvas1=document.getElementById("canvas");let ctx = canvas1.getContext('2d');ctx.drawImage(video, 0, 0, 300, 300);//将canvas对象转换为base64位编码传到后台this.convertCanvasToImage(canvas1.toDataURL())}

遇到了很多兼容性问题：
1、iPhone的Safari浏览器打开相机有点问题
2、iPhone将h5嵌到app里面必须让用户手动获取摄像头权限
…当时还有些兼容性问题的…忘记了
注意点：
1、 iOS 14.3 及以下版本不支持MediaDevices.getUserMedia()
2、要在https的环境使用

移动端开启摄像头拍照截取图片功能实现相关推荐

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
python读取网络摄像头的帧_python实现从本地摄像头和网络摄像头截取图片功能
python-----从本地摄像头和网络摄像头截取图片 ,具体代码如下所示: import cv2 # 获取本地摄像头 # folder_path 截取图片的存储目录 def get_img_from ...
python抓取网络摄像头_python实现从本地摄像头和网络摄像头截取图片功能
python-----从本地摄像头和网络摄像头截取图片 ,具体代码如下所示: import cv2 # 获取本地摄像头 # folder_path 截取图片的存储目录 def get_img_from ...
python编写的网络摄像头_python实现从本地摄像头和网络摄像头截取图片功能
python-----从本地摄像头和网络摄像头截取图片 ,具体代码如下所示: import cv2 # 获取本地摄像头 # folder_path 截取图片的存储目录 def get_img_from ...
Python之实现自动开启摄像头拍照，后面发送邮寄给个人
Python之实现自动开启摄像头拍照,后面发送邮寄给个人文章目录 Python之实现自动开启摄像头拍照,后面发送邮寄给个人第一步,我们要开启电脑的摄像头实现拍照: 第二步,我们要发送邮件,就必须创 ...
h5开启摄像头拍照+腾讯云接口人脸验证
前端开启摄像头并拍照将照片的base64码传到后端 <div> //登录弹出框 <el-form ref="form" :model="form&quo ...
vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正下方代码 # 需要自行去掉个人只作为着色效果加上 compres ...
C# 开启摄像头拍照
引用 Aforge Aforge 介绍:http://baike.baidu.com/link?url=T3XRoneXNTVU8Hoh2tNOtiBYXCPBYmslpVUWWPw4c2pxyclF ...
html5图片上传时IOS和Android均显示摄像头拍照和图片选择
最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料 ...

移动端开启摄像头拍照截取图片功能实现

移动端开启摄像头拍照截取图片功能实现相关推荐

最新文章

热门文章