WebRTC getUserMedia()获取流失败的原因查询及解决


getUserMedia API
参数
successCallback
errorCallback
错误查询方法
原因及解决方法
最近调试WebRTC,客户端的Chrome浏览器都无法获取视频流,原以为是Chrome版本太低,升级了版本,也不行,于是查阅了相关API…

getUserMedia API:

navigator.getUserMedia ( constraints, successCallback, errorCallback );
参数

参数    是否必须    描述
constraints    必须    successCallback中传入的 LocalMediaStream对象所支持的媒体类型。
successCallback    必须    当应用中传递LocalMediaStream对象时触发的函数。
errorCallback    可选    当调用媒体设备失败时触发的函数.
successCallback:

getUserMedia 函数会调用successCallback 并传入LocalMediaStream 对象,这个对象包含媒体流。

errorCallback:

错误    描述
PERMISSION_DENIED    用户拒绝了浏览器请求媒体的权限
NOT_SUPPORTED_ERROR    constraint中指定的媒体类型不被支持
MANDATORY_UNSATISFIED_ERROR    指定的媒体类型未接收到媒体流
错误查询方法:

errorCallback=function(error) { 
alert(error.name || error);
利用这行代码查询错误原因。我的错误信息提示为:PERMISSION_DENIED

原因及解决方法:

Chrome 47以后,getUserMedia API只能允许来自“安全可信”的客户端的视频音频请求,如HTTPS和本地的Localhost。 例如:https://192.168.1.2:8080…
localhost是唯一不用https的域名。
因此,解决这个问题一个方法是让自己的Web支持HTTPS,还有一个方法使用旧版本的Chrome。如Chrome 46等。
希望本文对大家能有帮助;关于Web如何实现HTTPS,后续…

————————————————
版权声明:本文为CSDN博主「lcwwade」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lcwwade/article/details/52130903

WebRTC是一个支持网页浏览器进行实时语音对话或视频对话的API。在Safari浏览器中使用WebRTC替换摄像头获取到的,通常需要以下几个步骤: 1. 获取用户媒体设备的权限,即获取摄像头的访问权限。这通常使用`navigator.mediaDevices.getUserMedia`方法实现。 2. 创建一个媒体,并从中获取视频轨道。在这个步骤中,你可以通过`getUserMedia`获取到的中选择特定的视频轨道。 3. 将获取到的视频轨道替换到已有的视频元素的srcObject中,或者使用MediaStream API来动态替换中的视频轨道。 以下是一个简单的示例代码: ```javascript // 请求用户媒体权限,并获取视频 navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { // 获取视频元素 var videoElement = document.querySelector('video'); // 将获取到的赋值给视频元素的srcObject videoElement.srcObject = stream; }) .catch(function(error) { console.error("无法访问摄像头", error); }); // 假设我们有一个新的newStream,我们想要替换当前视频元素中的 function replaceStream(newStream) { var videoElement = document.querySelector('video'); // 检查视频元素是否有srcObject属性(在一些旧版浏览器中可能没有) if ("srcObject" in videoElement) { videoElement.srcObject = newStream; } else { // 旧版浏览器的兼容写法 videoElement.src = window.URL.createObjectURL(newStream); } // 确保视频元素重新开始播放 videoElement.play().catch(function(error) { console.error("视频播放失败", error); }); } ``` 在这个例子中,`replaceStream`函数可以用来替换视频元素的媒体。你只需要提供一个新的`MediaStream`对象即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值