我使用了简单对等api:https://github.com/feross/simple-peer 但是,我有一个我不理解的问题。 我的目标是:使用WEBRTC在LAN网络中进行视频聊天
这是代码
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,第一个用于显示运行标签页的报价,第二个用于接受其他标签页
接受报价时出现问题