invalidStateError:无法使用简单对等api设置远程答案sdp

时间:2018-11-10 09:18:37

标签: webrtc

我使用了简单对等api:https://github.com/feross/simple-peer 但是,我有一个我不理解的问题。 我的目标是:使用WEBRTC在LAN网络中进行视频聊天

here is the picture of error

这是代码

app.js

let p= null

function  bindEvents(p){
p.on('error',function(err){
console.log('error',err)

})

p.on('signal', function(data){
    document.querySelector('#offer').textContent= JSON.stringify(data)
})

p.on('stream',function(stream){
    var video = document.querySelector('#receiver-video')
    video.volume= 0
    video.src= window.URL.createObjectURL(stream)
    video.play() 
})
}


document.querySelector('#start').addEventListener('click',function(e){
navigator.getUserMedia({
video:true,
audio:true
},function(stream){
    p = new SimplePeer({

initiator: true,
stream: stream,
trickle: false

   })
   bindEvents(p)

   let emitterVideo = document.querySelector('#emitter-video')
   emitterVideo.volume = 0
   emitterVideo.src = window.URL.createObjectURL(stream)
   emitterVideo.play()

},
function(){}

)
})

document.querySelector('#incoming').addEventListener('submit',function(e){
e.preventDefault()
if(p==null){

    p = new SimplePeer({
        initiator: false,
        trickle: false

        })
        bindEvents(p)

}

p.signal(JSON.parse(e.target.querySelector('textarea').value))
})

index.html

<body>
    <p> DEMO DU WEBRTC</p>
    <div class="container">
        <div class="row">
<div class="col-sm-6">
    <h2> RECEPTION</h2>
    <video  controls id="receiver-video"  width="50%" height="200px">

    </video>
    <p>
        <button id="start"> start</button>
    </p>

    <textarea id="offer"  class="form-control"></textarea>

</div>
<div class="col-sm-6">
    <h2>Envoi

    </h2>
    <video controls id="emitter-video" width="50%" height="200px"> </video>
<form id="incoming">
    <div class="form-group">
<textarea  class="form-control"></textarea>

    </div>
<p>
<button type="submit">save offer </button>

</p>
</form>

</div>
        </div>
    </div>
  <script src ="app.js"></script>
  <script src="SimplePeer.js"></script>
</body>

我将api simplepeer.min.js(站点:https://github.com/feross/simple-peer/blob/master/simplepeer.min.js)重命名为SimplePeer.js。 我正在使用两个Chrome浏览器标签在本地进行测试。  要转换报价,我不使用服务器,而是使用两个textareas,第一个用于显示运行标签页的报价,第二个用于接受其他标签页

接受报价时出现问题

0 个答案:

没有答案