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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
作为AI助手,我需要先声明一下:WebRTC技术是一种实时通信的技术,用于浏览器之间的音视频通话、屏幕共享等场景。而Vue是一种前端框架,用于构建用户界面。 因此,WebRTC和Vue并不是一种直接相关的技术,但是可以通过Vue来构建WebRTC应用的用户界面。 下面是一个简单的WebRTC Vue案例: 1. 安装Vue和WebRTC相关的库 ``` npm install vue webrtc-adapter vue-webrtc ``` 2. 在Vue组件中引入WebRTC组件 ```html <template> <div> <video ref="localVideo" autoplay muted></video> <video ref="remoteVideo" autoplay></video> <button @click="startCall">Start Call</button> <button @click="endCall">End Call</button> </div> </template> <script> import VueWebRTC from 'vue-webrtc' export default { name: 'WebRTCComponent', components: { VueWebRTC }, data () { return { localStream: null, remoteStream: null, isCalling: false } }, methods: { async startCall () { this.isCalling = true this.localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }) this.$refs.localVideo.srcObject = this.localStream const rtcPeerConnection = new RTCPeerConnection({ iceServers: [ { urls: 'stun:stun.stunprotocol.org' } ] }) this.localStream.getTracks().forEach(track => rtcPeerConnection.addTrack(track, this.localStream)) rtcPeerConnection.addEventListener('icecandidate', event => { if (event.candidate) { // send ice candidate to remote peer } }) rtcPeerConnection.addEventListener('track', event => { this.remoteStream = event.streams[0] this.$refs.remoteVideo.srcObject = this.remoteStream }) // create offer and set local description const offer = await rtcPeerConnection.createOffer() await rtcPeerConnection.setLocalDescription(offer) // send offer to remote peer }, endCall () { // close peer connection and release stream resources this.isCalling = false this.localStream.getTracks().forEach(track => track.stop()) this.remoteStream.getTracks().forEach(track => track.stop()) const rtcPeerConnection = this.$refs.vueWebRTC.rtcPeerConnection if (rtcPeerConnection) { rtcPeerConnection.close() } } } } </script> ``` 3. 在Vue实例中使用WebRTC组件 ```js import Vue from 'vue' import WebRTCComponent from './WebRTCComponent.vue' new Vue({ el: '#app', components: { WebRTCComponent }, template: '<WebRTCComponent/>' }) ``` 在这个案例中,我们使用了vue-webrtc组件来简化WebRTC的使用。具体来说,我们在startCall方法中使用getUserMedia获取本地音视频,创建RTCPeerConnection实例,并将本地添加到peer connection中。然后,我们使用createOffer方法创建一个offer并将其设置为本地的SDP(Session Description Protocol)。最后,我们将offer发送给远程peer,并等待远程peer的answer。在answer到达之后,我们将其设置为远程SDP,并完成peer connection的建立。 需要注意的是,在实际应用中,我们需要处理各种事件,例如网络中断、peer connection失败等等。同时,我们还需要考虑如何安全地传输音视频以及如何支持多人通话等场景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值