[英]Getting images in second peer using WebRTC (without a server)
I'm creating one direction call, but I can't receive the images in the second peer. 我正在创建一个方向呼叫,但无法在第二个对等方收到图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebRTC</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #20262E;
}
video {
width: 100%
}
</style>
</head>
<body>
<button id="initialize">initialize</button>
<video autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="carai.js"></script>
</body>
</html>
const startButton = document.querySelector('button#initialize')
const video = document.querySelector('video')
const confPeer = {}
const channel = new BroadcastChannel('loc')
const peer = new RTCPeerConnection(confPeer)
//
// SIMULATE WEBSOCKET
//
channel.addEventListener('message', message => {
let {
action,
value
} = message.data
switch (action) {
case 'offer':
startButton.remove()
answer(value)
break
case 'answer':
done(value)
break
default:
console.error('wtf')
}
})
//
// START CALL
//
const start = async () => {
console.log('----- start')
const localStream = await navigator.mediaDevices.getUserMedia({
// audio: true,
video: true
})
video.srcObject = localStream
localStream.getTracks().forEach(track => peer.addTrack(track, localStream));
let offer = await peer.createOffer()
peer.setLocalDescription(offer)
channel.postMessage({
action: 'offer',
value: JSON.stringify(offer)
})
}
//
// ANSWER CALL
//
const done = receivedAnswer => {
console.log('----- done')
peer.setRemoteDescription(JSON.parse(receivedAnswer))
}
//
// ESTABLISH CALL
//
const answer = async receivedOffer => {
console.log('----- answer')
peer.ontrack = e => {
console.log('----- ontrack', e)
video.srcObject = e.streams[0];
}
receivedOffer = JSON.parse(receivedOffer)
let desc = new RTCSessionDescription(receivedOffer)
peer.setRemoteDescription(desc)
let answer = await peer.createAnswer()
await peer.setLocalDescription(answer)
channel.postMessage({
action: 'answer',
value: JSON.stringify(answer)
})
}
//
// INITIALIZE
//
startButton.addEventListener('click', start)
The caller() saves the information in a localStorage, which called() reads and uses to accept the call, which receives getRemoteStreams, but I can´t play it in the video element. 调用方()将信息保存在localStorage中,被调用方()读取并用来接受该调用,该调用接收getRemoteStreams,但是我不能在video元素中播放该信息。
can anyone help-me with this? 谁能帮我这个?
This is my first time using WebRTC, I know I'm missing something. 这是我第一次使用WebRTC,我知道我缺少一些东西。
It works in Chrome when I click the start button a second time, but it displays the following depreciation message in the terminal: 当我再次单击“开始”按钮时,它可以在Chrome中运行,但是会在终端中显示以下折旧消息:
localStorage as a signaling-channel is a neat trick to demo calls between two tabs. localStorage作为信令通道是演示两个选项卡之间的调用的巧妙技巧。
But you've only completed half the circle of the offer/answer exchange. 但是您只完成了要约/答案交换的一半。 You need to get the answer back to the caller. 您需要将答案返回给呼叫者。 Eg 例如
localStorage.setItem('b', JSON.stringify(answer))
...and then add code that receives it and calls setRemoteDescription(answer)
on the 1st peer. ...然后添加接收该代码的代码,并在第一个对等设备上调用setRemoteDescription(answer)
。
You also need to exchange of ICE candidates, which complicates things. 您还需要交换ICE候选人,这使事情变得复杂。
FWIW I've written localSocket helper class that helps with this. FWIW我已经写了localSocket helper类来帮助这个问题。 Here's a demo (open in 2 tabs). 这是一个演示 (在2个选项卡中打开)。
Lastly, getRemoteStreams()
is deprecated , and isn't needed here since you use ontrack
. 最后, 不赞成使用 getRemoteStreams()
,因为您使用ontrack
所以这里ontrack
。
Thanks to the great @jib I understood what I was doing wrong. 多亏了很棒的@jib,我才知道我做错了什么。 here is the correct code for those are passing to the same situation. 这是传递给相同情况的正确代码。
MUITO OBRIGADO @jig MUITO OBRIGADO @吉格
const startButton = document.querySelector('button#initialize')
const video = document.querySelector('video')
const confPeer = {}
const channel = new BroadcastChannel('loc')
const peer = new RTCPeerConnection(confPeer)
//
// SIMULATE WEBSOCKET
//
channel.addEventListener('message', message => {
let {
action,
value
} = message.data
switch (action) {
case 'offer':
startButton.remove()
answer(value)
break
case 'icecandidate':
icecandidate(value)
break
case 'answer':
done(value)
break
default:
console.error('wtf')
}
})
//
// PEER A: START CALL
//
const start = async () => {
console.log('----- start')
const localStream = await navigator.mediaDevices.getUserMedia({
// audio: true,
video: true
})
peer.onicecandidate = ev => {
console.log('candidate', ev.candidate)
channel.postMessage({
action: 'icecandidate',
value: JSON.stringify(ev.candidate)
})
}
video.srcObject = localStream
localStream.getTracks().forEach(track => peer.addTrack(track, localStream));
let offer = await peer.createOffer()
peer.setLocalDescription(offer)
channel.postMessage({
action: 'offer',
value: JSON.stringify(offer)
})
}
//
// PEER A: ANSWER CALL
//
const done = receivedAnswer => {
console.log('----- done')
peer.setRemoteDescription(JSON.parse(receivedAnswer))
}
//
// PEER B: ICE CANDIDATE
//
const icecandidate = receivedIcecandidate => {
let candidate = JSON.parse(receivedIcecandidate)
console.log('received icecandidate', candidate)
peer.addIceCandidate(candidate)
}
//
// PEER B: ESTABLISH CALL
//
const answer = async receivedOffer => {
console.log('----- answer')
peer.ontrack = e => {
console.log('----- ontrack', e)
video.srcObject = e.streams[0];
}
receivedOffer = JSON.parse(receivedOffer)
let desc = new RTCSessionDescription(receivedOffer)
peer.setRemoteDescription(desc)
let answer = await peer.createAnswer()
await peer.setLocalDescription(answer)
channel.postMessage({
action: 'answer',
value: JSON.stringify(answer)
})
}
//
// INITIALIZE
//
startButton.addEventListener('click', start)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.