HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题


Posted in HTML / CSS onApril 27, 2020

navigator.mediaDevices.getUserMedia

应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档,链接如下:
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
看上去很简单,最终却写的怀疑人生。

API环境

问题一:(为什么不管怎么配置都显示前置摄像头)

想正常使用API必须在https环境下进行,否则你会发现不管怎么写,都只能调用默认的摄像头(大部分都是前置,只有少部分是后置)
前端开发者可以将文件上传至"码云"仓库,获取https链接然后在手机上预览
链接:码云仓库入口

问题二:(API在安卓和ios效果一样吗?)

根据官方文档,目前navigator.mediaDevices.getUserMedia在ios上只支持11版本以上,且只能在safari正常运行。安卓目前没有发现版本限制,需要兼容的代码如下

if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
 }
if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function (constraints) {
    var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
	if (!getUserMedia) {
	    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
	}
	return new Promise(function (resolve, reject) {
		getUserMedia.call(navigator, constraints, resolve, reject);
	});
  }
}

问题三:(第一次启用成功调用前置摄像头,第二次需要调用后置却黑屏或者失败)

失败的原因很多,列举两个一开始我遇到的问题
1.前置摄像头调用后,摄像功能需要关闭后才能正常执行第二次调用,否则会报错:设备被占用。解决方法,在每次执行调用方法前,先关闭摄像设备。

if (window.stream) {
    window.stream.getTracks().forEach(track => {
          track.stop();
    });
}

亲测有用,别的找了很多停止的方法都没有效果。
2.调用后置API的方法还是无法唤醒后置摄像头,于是我找到另外一个方法,通过查看手机摄像头ID,来直接唤醒后置。

var deviceInfoId="", //摄像头ID
    num = 0, //摄像头数量
    carema = []; //摄像头ID数组
    //在页面加载完成后获得设备ID数组
window.onload = navigator.mediaDevices.enumerateDevices().then(gotDevices);
function gotDevices(deviceInfos) {
        for (let i = 0; i < deviceInfos.length; ++i) {
            if (deviceInfos[i].kind === 'videoinput') {
                carema.push(deviceInfos[i].deviceId)
              }
        }
        deviceInfoId = carema[后置位置];
}
            var constraints = {
                audio: false,
                video: {
                    deviceId: deviceInfoId,
                    //放在app里面需要下面配置一下
                    "permissions": {
                        "audio-capture": {
                            "description": "Required to capture audio using getUserMedia()"
                        },
                        "video-capture": {
                            "description": "Required to capture video using getUserMedia()"
                        }
                    }
                }
            };
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (stream) {
                    var video = document.getElementById('video');
                    try {
                        window.stream = stream;
                        video.srcObject = stream;
                    } catch (error) {
                        video.src = window.URL.createObjectURL(stream);
                    }
                    this.localMediaStream = stream;
                    // video.play();   这个加不加好像没有影响
                })
                .catch(function (err) {
                    console.log(err.name + ": " + err.message);
                });

如果只是一部手机可以这样,但是测试了多部手机发现摄像头数组毫无规律可循,这个方法慎用。
如果页面上添加选择摄像设备的按钮的话,这个方法还是不错的。查看设备能调用几个摄像头链接如下:https://webrtc.github.io/samples/src/content/devices/input-output/
由于我们的项目页面不希望出现切换按钮,面对后置出现的众多BUG,最终选择放弃,使用input调用摄像头。

<input class="card_input" v-on:change="appCapture($event)" type="file" accept="image/*" capture="camera" />

成功调用后用canvas实现成像并适应屏幕大小

我这里的代码是取video的宽高然后复制给canvas,这样可以让canvas和video保持一致,只用给video设置宽度100%,高度调节成合适的值,就实现了适应手机屏幕。

var video = document.getElementById('video');
            var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                CHeight = video.clientHeight, //获取屏幕大小让canvas自适应
                CWidth = video.clientWidth;
            canvas.width = CWidth;
            canvas.height = CHeight;
            //localMediaStream 在data里定义一个{}
            if (localMediaStream) {
                ctx.drawImage(video, 0, 0, CWidth, CHeight);
                var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA'
                img.src = dataURL;

video成像镜像问题

API唤醒的前置摄像头是相反的,很不舒服很不舒服。
之后用css处理一下给video添加 transform: rotate(180deg),可以实现反转,但是还是没有达到和手机一样的效果。
这时候可以选择通过设备ID调用前置摄像头,前置摄像头的laval一直都是“default”,也有的是空值,但是也能实现。
配置代码如下:

var constraints = window.constraints = {
                audio: false,
                video: {
                    sourceId: 'default',
                    facingMode:  { exact: "user" } 
                }
              };

完美调用自己手机的前置摄像头!!!

完整代码如下:
页面代码:

<div @click='moveToCameraAVG()' v-cloak>
     <img v-if="imginfo!==''" :src="imginfo" />
     <div class="warm_title2">点击自拍一张头像</div>
</div>
<video id="video" class="pic_video" playsinline autoplay x5-video-player-type="h5" style='object-fit:fill'></video>
<canvas id="canvas" class="canvas_pic" style='margin: 0;padding: 0;'></canvas>
<div class="bottom_div">
    <div>拍照</div>
    <img src='images/pic_btn.png' class="capture-btn" @click='captureAvg' />
</div>
// 头像相机
        moveToCameraAVG() {
            var self = this;
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {};
            }
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
                    if (!getUserMedia) {
                        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                    }
                    return new Promise(function (resolve, reject) {
                        getUserMedia.call(navigator, constraints, resolve, reject);
                    });
                }
            }
            if (window.stream) {
                window.stream.getTracks().forEach(track => {
                    track.stop();
                });
            }
            var constraints = window.constraints = {
                audio: false,
                video: {
                    sourceId: 'default',
                    facingMode:  { exact: "user" } 
                }
              };
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (stream) {
                    var video = document.getElementById('video');
                    try {
                        window.stream = stream;
                        video.srcObject = stream;
                    } catch (error) {
                        video.src = window.URL.createObjectURL(stream);
                    }
                    self.localMediaStream = stream;
                    video.play();
                })
                .catch(function (err) {
                    alert(err.name + ": " + err.message);
                });
        },
        //停止摄像机
        stopCapture: function () {
            var video = document.getElementById('video');
            if (!video.srcObject) return
            let stream = video.srcObject
            let tracks = stream.getTracks();
            tracks.forEach(track => {
                track.stop()
            })
        },
        // 头像照片
        captureAvg() {
            var vm = this;
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                CHeight = video.clientHeight, //获取屏幕大小让canvas自适应
                CWidth = video.clientWidth;
            canvas.width = CWidth;
            canvas.height = CHeight;
            if (vm.localMediaStream) {
                ctx.drawImage(video, 0, 0, CWidth, CHeight);
                var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA'
                vm.imginfo = dataURL;
                // 停止摄像机
                video.pause();
                this.stopCapture();
            }
        },

到此这篇关于HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题的文章就介绍到这了,更多相关HTML5调用 摄像头内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 #HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 #HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 #HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 #HTML / CSS
HTML中meta标签及Keywords
Apr 15 #HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 #HTML / CSS
html5移动端自适应布局的实现
Apr 15 #HTML / CSS
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
js确定对象类型方法
2012/03/30 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Python生成rsa密钥对操作示例
2019/04/26 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
规划编制实施方案
2014/03/15 职场文书
施工安全员岗位职责
2015/04/11 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python