使用Navigator.getUserMedia
可以做到在主流浏览器中获取用户摄像头数据,麦克风数据,我研究了一下,发现在ios、安卓微信浏览器中都不行。而在安卓6.0.1自带浏览器中可以,iOS Safari不支持,mac Safari不支持,兼容性还是太差,所以还是弃用了。但是我研究的结果还是保存一下,万一以后微信浏览器支持了呢?
以下是我研究的结果:
关于这个api的参数说明: MDN:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia W3C:http://w3c.github.io/mediacapture-main/#widl-NavigatorUserMedia-getUserMedia-void-MediaStreamConstraints-constraints-NavigatorUserMediaSuccessCallback-successCallback-NavigatorUserMediaErrorCallback-errorCallback
constraints
,指明需要获取什么类型的数据successCallback
, 数据获取成功后回调的方法(只会被调用一次,但是如果把回调时的视频流放到video标签中,视频会实时更新)errorCallback
,接口调用失败后回调的方法我主要想知道第一个参数里的情况,因为很多国内的教程里都只是这样:{video : true}
,我还想知道如果要录音频、使用后置摄像头该怎么办。这个问题在https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters 能找到答案,我复制一下。
constraints
{ audio: true, video: true }
,这个表示需要视频和音频。应该也只支持这两种了,我看了MDN和W3c,都没发现第三种Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': Malformed constraints object.
,然而这些用法真的是MDN和W3C标准,不知道chrome为什么不支持。然而在chrome中有特殊的使用后置摄像头的方法,参考:http://blog.csdn.net/journey191/article/details/40744015,这个参考里的方法我测过,安卓6.0.1的确可以用后置摄像头。min
,max
,或者 ideal (即如果支持,就用这个)
{ audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 776, ideal: 720, max: 1080 } } }
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有