浏览器调用摄像头getUserMedia
2018年启动QQ浏览器会启动摄像头的新闻闹得沸沸扬扬。
前段时间公司让研究一下这个浏览器启用摄像头的功能,希望能够实现浏览器网页扫描二维码的功能。现在写下来记录一下。
浏览器启用摄像头是使用getUserMedia这个api实现的,调用后会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D转换器等等),也可能是其它轨道类型。
有了这个api,使浏览器调用摄像头成为可能。但兼容性较差
自己测试华为自带浏览器,以及安卓微信浏览器测试通过。图上说支持的UC在12.0.8.988版本测试过发现支持这个getUserMedia方法,也成功回调了却不能成像,而小米自带浏览器测试发现不能打开摄像,应该是小米自带浏览器有安全性检测,浏览器不允许调用摄像头。
废话不多说,上代码:
html
<select id="select"></select>
<input type="button" title="开启摄像头" value="开启摄像头" "get