php 手机打开摄像头,能够使用浏览器打开手机端摄像头
能够前后摄像头切换,能够截取当前视频流图像
兼容各大主流浏览器,
主要使用的api:
// 获取视频流
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
// 获取设备摄像信息
navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);
之前在本机上测试Chrome出现问题,问题在于没有使用https作为测试链接,如果使用http的话,则项目不能打开摄像头,这可能与chrome的明文加密有关系
如果使用http,代码会报
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)
但是这个错开始并没有报,开始我直接运行获取视频流代码,项目的代码仿佛停止运行一般,相应位置的console.log也没有输出,这个错误也没有报
后来经过调试,获取视频流的代码放在点击事件中,错误才出来。。
切换摄像头代码:
// 多选框更改事件
videoSelect.onchange = getStream;
// 获取设备音频输出设备与摄像设备,这里我只用到了摄像设备
function gotDevices(deviceInfos) {
console.log('deviceInfos')
console.log('deviceInfos:', deviceInfos);
for (let i = 0; i !== deviceInfos.length; i++) {
let deviceInfo = deviceInfos[i];
var option = document.createElement('option');
// console.log(deviceInfo)
if (deviceInfo.kind === 'videoinput') { // audiooutput , videoinput
option.value = deviceInfo.deviceId;
option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
}
}
}
兼容浏览器:
//访问用户媒体设备的兼容方法
function getUserMedia(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
//最新标准API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//webkit内核浏览器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia){
//Firefox浏览器
navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia){
//旧版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
}
获取视频流成功回调:
function getStream(){
if (window.stream) {
window.stream.getTracks().forEach(function(track) {
track.stop();
})
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
//调用用户媒体设备,访问摄像头
const constraints = {
audio: true,
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
frameRate: {
ideal: 10,
max: 15
},
deviceId: {exact: videoSelect.value}
}
};
console.log('获取视频流');
getUserMedia(constraints,success,error);
} else {
alert("你的浏览器不支持访问用户媒体设备");
}
}
截取视频流作为图片:
//注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click",function(){
//绘制画面
console.log('点击事件');
context.drawImage(video,0,0,480,320);
});
php 手机打开摄像头,能够使用浏览器打开手机端摄像头相关推荐
- 能够使用浏览器打开手机端摄像头
能够前后摄像头切换,能够截取当前视频流图像 兼容各大主流浏览器, 主要使用的api: // 获取视频流 navigator.mediaDevices.getUserMedia(constrains). ...
- 手机移动端-纯js浏览器h5调用摄像头扫描识别解析 条形码+二维码
一.场景 手机移动端-原生js 浏览器h5 解决 识别二维码 条形码功能: 不借助Hbuilder.需要自己打包成APP,比如用Hbuilder打包,浏览器端项目h5 无打包成app部署 X 不采用 ...
- vue判断什么手机打开网页及是否用QQ浏览器或者微信浏览器打开
//判断什么类型手机打开的网页 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mo ...
- fiddler不能抓取浏览器数据_手机连接fiddler后,浏览器无法打开网页或者fiddler抓取不到手机应用相关数据的情况...
关于手机如何连接fiddler,网上有很多教程,我暂时就不写了 今天在使用fiddler的过程中,发现fiddler突然无法抓取移动端应用的数据包,再三确认连接无误.因此就开始了解决之旅 起因是安卓手 ...
- 微信阅读原文直接打开浏览器_微信打开网址添加在浏览器中打开提示
使用 http://mp.weixin.qq.com/mp/redirect?url=http://caibaojian.com/test.apk#weixin.qq.com#wechat_redir ...
- html3D效果可以在手机打开吗,手机怎么打开HTML
回答: 使用浏览器. 首先,需要打开.HTML文档需要使用浏览器打开才行. 解决方法:将文件拖到系统浏览器中进行打开. 下载手机百度,把文件放到手机百度中打开. 下载其它浏览器进行打开. Iphone ...
- 微信打开网址添加在浏览器中打开提示遮罩
原文链接:http://caibaojian.com/weixin-tip.html 使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信已更新基本失效 ...
- html3D效果可以在手机打开吗,HTML手机怎么打开
2 回答 2021-05-06 浏览:4 分类:其他问题 回答:1.以小米手机为例,首先在手机上利用QQ接收一个HTML文件. 2.然后在手机QQ中点击该HTML文件,选择用其他应用打开. 3.然后在 ...
- 使用chrome调试手机,平板,pc上各种浏览器上的页面
使用chrome调试手机,平板,pc上多种浏览器的页面展示 作为web开发者,特别是现代web开发者,是否要调试手机,平板,电脑上的显示效果?chrome自带了这种很强大的神器 1.打开chrome( ...
最新文章
- 《系统集成项目管理工程师》必背100个知识点-52成功的项目团队特点
- 区块链技术应用的关键问题和挑战
- Linux2017Linux架构师!
- shell最大出现和连续出现次数_shell脚本分析 nginx日志访问次数最多及最耗时的页面(慢查询)...
- java字符串反转及替换_字符串的替换(str_replace)
- ZBrush for Mac的插图技巧
- C语言编译程序的顺序,C语言函数定义顺序
- Android中的armeabi等如何适配
- 爬取奇迹秀工具箱里面的文本和软件网盘链接
- 高级计量经济学及stata应用 陈强 2021年5月1-5日 社会科学 经济学 管理学 金融 医学等各个领域
- [图文]TDateTime And TTime(转)
- 谷歌软件工程师是怎样写设计文档的?
- 【论文笔记】Dynamic Convolution: Attention over Convolution Kernels
- vue 中provide的用法_Vue中使用provide和inject
- 固国之根基 | 云计算助力农业信息化升级
- 鼠标不听使唤,在屏幕上乱窜乱动怎么办?
- 1200PLC与施耐德变频器通讯程序,带注释
- Excel作图汇总 - Excel2010
- stm32采集脉冲信号_STM32 输入捕获的脉冲宽度及频率计算
- 2015小学计算机管理总结,2015小学信息技术教学工作总结 .doc