解决javascript调用设备摄像头时video标签出项黑屏现象

出现原因

 MediaStream对象的active属性问题

接口的active 只读属性MediaStream返回一个布尔值，true 如果流当前处于活动状态; 否则，它返回false。如果流中的至少一个不在该状态，则认为该流是活动MediaStreamTrack的MediaStreamTrack.ended。每个曲目结束后，流的active属性就会变为false。

解决方法

在video的play()之前判断active属性的值；

代码实现

function Camera(video) {this.video = video; // 必传参数this.canvas = document.createElement('canvas');this.ctx = this.canvas.getContext('2d');this.imgdata = null;
}
// 兼容方法（兼容的方法不是很全，如有需要请自行扩展）
Camera.prototype.init = function(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints,success, error)} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}this.canvas.width = this.video.width;this.canvas.height = this.video.height;
}Camera.prototype.open = function (){var $this = this;var config = { //基础配置video: {width:  512,height: 384}};// navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {this.init(config, getStream, noStream);}function getStream(stream) { //成功回调this.video.srcObject = stream; //在这时active属性的值为 truethis.video.onerror = function() {stream.stop();};stream.onended = noStream;var that = this.video;this.video.onloadedmetadata = function() {if(stream.active){ //在这里需要做判断that.play();}else{$this.init(config, getStream, noStream);}}}function noStream(err) { //失败回调 $this.init(config, getStream, noStream); // 重新调用}return this;
}
// 输出base64照片数据
Camera.prototype.photograph = function() {this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);return this.canvas.toDataURL('image/png');
}

结果

new Camera(video) 就可以了，不会出现黑屏的现象

解决javascript调用设备摄像头时video标签出项黑屏现象相关推荐

H5 VIDEO标签视频黑屏的原因及解决方法
<video style="width:90%;height:300px;" controls="" poster="/upload/image ...
纯JavaScript实现的调用设备摄像头并拍照的功能
这篇文章本来不在Jerry计划内的,咱们SAP中国研究院今天已经正式上班了,Jerry也回到工作岗位开始搬砖了. 今天一位同事问我关于本文标题描述的功能如何实现,Jerry在网上随便搜了一下,类似的例 ...
使用js调用设备摄像头并实现拍照
使用getUserMedia这个API来获取摄像头的权限并实现拍照在线体验:https://811w1z2xwj.codesandbox.io/ 下面是源码: <!DOCTYPE html&g ...
html5调用设备摄像头，实现二维码扫描
html5调用设备摄像头,实现二维码扫描最近在做一个签到系统,由于我直接使用了纯网页,因此调用摄像头进行扫码成了大问题.经过几番费力的百度终于找到解决方法. 主要用到MediaDevices.get ...
微信内置浏览器video标签自动全屏播放以及层级过高问题
转载自:微信内置浏览器video标签自动全屏播放以及层级过高问题 - 程序员大本营今天事用html5的<video>标签做微信内置浏览器视频播放页面时,需要在视频层级上显示类似弹幕的对话 ...
解决网页在线看视频时窗口会变成绿屏问题
解决网页在线看视频时窗口会变成绿屏问题: 因为我用的win7,所以就拿win7做个例子,我们用IE打开一个有网页视频的页面,点击进去待开始播放候单击右键设置,把启用硬件加速前面的钩去掉就OK了
计算机长时间不黑屏怎么设置,当计算机长时间不移动鼠标时，如何设置黑屏？如何将计算机设置为长时间不出现黑屏？...
相关问题如何设置计算机黑屏时间?如果W7电脑长时间不移动,为什么不保持黑屏? 右键单击右下角任务栏中的电源图标,更改计划设置,"关闭显示器"和"使计算机进入睡眠&quo ...
php调用本地摄像头,javascript 调用本地摄像头拍照 ajax提交上传
最近在做一个小应用,里面有一个功能就是需要打开摄像头拍照并且上传,今天就记录一下这个小功能. HTML篇: 这里我是用的layui的样式,需要先引用layui的样式,才会有上图的效果. * 照片: 点 ...
解决驱动创建设备节点时权限为 root只读只写的问题
上一篇做字符设备驱动时,创建的设备节点/dev/mycdev 为root用户root组,且权限为0600,这就导致一般的应用程序无法访问上网查询得知可通过udev自创规则来实现:创建设备节点时设置权限 ...

解决javascript调用设备摄像头时video标签出项黑屏现象

出现原因

解决方法

代码实现

结果

解决javascript调用设备摄像头时video标签出项黑屏现象相关推荐

最新文章

热门文章