webrtc onaddstream 未在第一个对等方上调用
•浏览 1
webrtc onaddstream not being called on first peer
我创建了下面的脚本，它是混合应用程序的一部分，有时它运行正常，我可以接收/发送音频/视频呼叫，但有时甚至没有从发送方调用 onaddstream 或 ontrack，但是 spd 数据包是通过套接字发送的，我都尝试了 (onaddstream or ontrack) 但没有成功：
在这里发送来自 pc 的报价：
sendOffer() {
let that = this;
that.call_status = 'connecting';
let call_type;
if (that.call_type == 'audio')
call_type = { video: false, audio: true };
else
call_type = { video: true, audio: true };
that.pc = new RTCPeerConnection(that.peerConnectionConfig);
that.haveGum = navigator.mediaDevices.getUserMedia(call_type)
.then(stream => {
that.pc.addStream(that.from_video.nativeElement.srcObject = stream);
that.from_video.nativeElement.style.display = 'block';
}).then(() => that.pc.createOffer())
.then(d => that.pc.setLocalDescription(d))
.catch(log => { alert(log) });
that.pc.oniceconnectionstatechange = function (e) {
that.call_status = that.pc.iceConnectionState;
if (that.pc.iceConnectionState == 'disconnected') {
console.log('Disconnected');
}
}
that.pc.onaddstream = e => {
that.to_video.nativeElement.srcObject = e.stream;
};
that.pc.onicecandidate = e => {
if (e.candidate) {
return;
}
that.offerSent = true;
that.socket.emit('sdp-offer', {
from: that.user,
sdp: that.pc.localDescription.sdp,
call_type: call_type
});
};
that.socket.on('sdp-offer-reply', (sdp: any) => {
that.pc.setRemoteDescription(new RTCSessionDescription(({ type:"answer", sdp: sdp.sdp }))).catch(log => console.log(log));
});
that.socket.on('call-closed', (sdp: any) => {
that.closeConnection();
});
} answerCall() {
let that = this;
let call_type;
if (this.call_type == 'audio')
call_type = { video: false, audio: true };
else
call_type = { video: true, audio: true };
that.pc2 = new RTCPeerConnection(this.peerConnectionConfig);
that.haveGum = navigator.mediaDevices.getUserMedia(call_type)
.then(stream => {
that.pc2.addStream(this.from_video.nativeElement.srcObject = stream);
});
that.pc2.oniceconnectionstatechange = function (e) {
console.log(that.pc2.iceConnectionState);
}
that.pc2.onaddstream = e => {
that.to_video.nativeElement.srcObject = e.stream;
that.to_video.nativeElement.style.display = 'block';
};
if (that.pc2.signalingState !="stable") {
that.call_status = that.pc2.signalingState;
alert("not stable");
return;
}
that.pc2.setRemoteDescription(new RTCSessionDescription(({ type:"offer", sdp: this.sdp.sdp })))
.then(() => that.pc2.createAnswer())
.then(d => {
that.sendSdpAnswer = d; that.pc2.setLocalDescription(d);
this.call_connected = true;
})
.catch(log => console.log(log));
that.pc2.onicecandidate = e => {
if (e.candidate) {
console.log("not e.candidate");
return;
}
that.socket.emit('offeraccepted', {
from: that.user,
sdp: that.sendSdpAnswer.sdp
});
};
that.socket.on('call-closed', (sdp: any) => {
that.closeConnection();
that.call_status ="Hung Up";
});
} closeConnection() {
if (typeof this.pc !=="undefined" && this.pc.signalingState !="closed") {
this.pc.close();
}
if (typeof this.pc2 !=="undefined" && this.pc2.signalingState !="closed") {
this.pc2.close();
}
} this.pc.createOffer({
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
})在其他设备上 pc2 接受答案时：
sendOffer() {
let that = this;
that.call_status = 'connecting';
let call_type;
if (that.call_type == 'audio')
call_type = { video: false, audio: true };
else
call_type = { video: true, audio: true };
that.pc = new RTCPeerConnection(that.peerConnectionConfig);
that.haveGum = navigator.mediaDevices.getUserMedia(call_type)
.then(stream => {
that.pc.addStream(that.from_video.nativeElement.srcObject = stream);
that.from_video.nativeElement.style.display = 'block';
}).then(() => that.pc.createOffer())
.then(d => that.pc.setLocalDescription(d))
.catch(log => { alert(log) });
that.pc.oniceconnectionstatechange = function (e) {
that.call_status = that.pc.iceConnectionState;
if (that.pc.iceConnectionState == 'disconnected') {
console.log('Disconnected');
}
}
that.pc.onaddstream = e => {
that.to_video.nativeElement.srcObject = e.stream;
};
that.pc.onicecandidate = e => {
if (e.candidate) {
return;
}
that.offerSent = true;
that.socket.emit('sdp-offer', {
from: that.user,
sdp: that.pc.localDescription.sdp,
call_type: call_type
});
};
that.socket.on('sdp-offer-reply', (sdp: any) => {
that.pc.setRemoteDescription(new RTCSessionDescription(({ type:"answer", sdp: sdp.sdp }))).catch(log => console.log(log));
});
that.socket.on('call-closed', (sdp: any) => {
that.closeConnection();
});
} answerCall() {
let that = this;
let call_type;
if (this.call_type == 'audio')
call_type = { video: false, audio: true };
else
call_type = { video: true, audio: true };
that.pc2 = new RTCPeerConnection(this.peerConnectionConfig);
that.haveGum = navigator.mediaDevices.getUserMedia(call_type)
.then(stream => {
that.pc2.addStream(this.from_video.nativeElement.srcObject = stream);
});
that.pc2.oniceconnectionstatechange = function (e) {
console.log(that.pc2.iceConnectionState);
}
that.pc2.onaddstream = e => {
that.to_video.nativeElement.srcObject = e.stream;
that.to_video.nativeElement.style.display = 'block';
};
if (that.pc2.signalingState !="stable") {
that.call_status = that.pc2.signalingState;
alert("not stable");
return;
}
that.pc2.setRemoteDescription(new RTCSessionDescription(({ type:"offer", sdp: this.sdp.sdp })))
.then(() => that.pc2.createAnswer())
.then(d => {
that.sendSdpAnswer = d; that.pc2.setLocalDescription(d);
this.call_connected = true;
})
.catch(log => console.log(log));
that.pc2.onicecandidate = e => {
if (e.candidate) {
console.log("not e.candidate");
return;
}
that.socket.emit('offeraccepted', {
from: that.user,
sdp: that.sendSdpAnswer.sdp
});
};
that.socket.on('call-closed', (sdp: any) => {
that.closeConnection();
that.call_status ="Hung Up";
});
} closeConnection() {
if (typeof this.pc !=="undefined" && this.pc.signalingState !="closed") {
this.pc.close();
}
if (typeof this.pc2 !=="undefined" && this.pc2.signalingState !="closed") {
this.pc2.close();
}
} this.pc.createOffer({
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
})这是我调用的最终函数，用于在通话结束时关闭双方的对等连接：
sendOffer() {
let that = this;
that.call_status = 'connecting';
let call_type;
if (that.call_type == 'audio')
call_type = { video: false, audio: true };
else
call_type = { video: true, audio: true };
that.pc = new RTCPeerConnection(that.peerConnectionConfig);
that.haveGum = navigator.mediaDevices.getUserMedia(call_type)
.then(stream => {
that.pc.addStream(that.from_video.nativeElement.srcObject = stream);
that.from_video.nativeElement.style.display = 'block';
}).then(() => that.pc.createOffer())
.then(d => that.pc.setLocalDescription(d))
.catch(log => { alert(log) });
that.pc.oniceconnectionstatechange = function (e) {
that.call_status = that.pc.iceConnectionState;
if (that.pc.iceConnectionState == 'disconnected') {
console.log('Disconnected');
}
}
that.pc.onaddstream = e => {
that.to_video.nativeElement.srcObject = e.stream;
};
that.pc.onicecandidate = e => {
if (e.candidate) {
return;
}
that.offerSent = true;
that.socket.emit('sdp-offer', {
from: that.user,
sdp: that.pc.localDescription.sdp,
call_type: call_type
});
};
that.socket.on('sdp-offer-reply', (sdp: any) => {
that.pc.setRemoteDescription(new RTCSessionDescription(({ type:"answer", sdp: sdp.sdp }))).catch(log => console.log(log));
});
that.socket.on('call-closed', (sdp: any) => {
that.closeConnection();
});
} answerCall() {
let that = this;
let call_type;
if (this.call_type == 'audio')
call_type = { video: false, audio: true };
else
call_type = { video: true, audio: true };
that.pc2 = new RTCPeerConnection(this.peerConnectionConfig);
that.haveGum = navigator.mediaDevices.getUserMedia(call_type)
.then(stream => {
that.pc2.addStream(this.from_video.nativeElement.srcObject = stream);
});
that.pc2.oniceconnectionstatechange = function (e) {
console.log(that.pc2.iceConnectionState);
}
that.pc2.onaddstream = e => {
that.to_video.nativeElement.srcObject = e.stream;
that.to_video.nativeElement.style.display = 'block';
};
if (that.pc2.signalingState !="stable") {
that.call_status = that.pc2.signalingState;
alert("not stable");
return;
}
that.pc2.setRemoteDescription(new RTCSessionDescription(({ type:"offer", sdp: this.sdp.sdp })))
.then(() => that.pc2.createAnswer())
.then(d => {
that.sendSdpAnswer = d; that.pc2.setLocalDescription(d);
this.call_connected = true;
})
.catch(log => console.log(log));
that.pc2.onicecandidate = e => {
if (e.candidate) {
console.log("not e.candidate");
return;
}
that.socket.emit('offeraccepted', {
from: that.user,
sdp: that.sendSdpAnswer.sdp
});
};
that.socket.on('call-closed', (sdp: any) => {
that.closeConnection();
that.call_status ="Hung Up";
});
} closeConnection() {
if (typeof this.pc !=="undefined" && this.pc.signalingState !="closed") {
this.pc.close();
}
if (typeof this.pc2 !=="undefined" && this.pc2.signalingState !="closed") {
this.pc2.close();
}
} this.pc.createOffer({
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
})我正在使用 webrtc latest-adapter.js 和 socket.io 作为信号服务器。首先，我在 pc 上发出事件 以发送 sdp 数据包，在 pc2 上我从节点服务器接收 sdp-offer-incoming，然后 pc2 发出 offeraccepted 并在 pc1 上附加带有事件的 sdp 数据接收 sdp 数据包，它应该在两台电脑上显示视频/音频，但有时发送方没有收到流，但接收方总是有两个视频。
创建报价时我必须通过约束：
sendOffer() {
let that = this;
that.call_status = 'connecting';
let call_type;
if (that.call_type == 'audio')
call_type = { video: false, audio: true };
else
call_type = { video: true, audio: true };
that.pc = new RTCPeerConnection(that.peerConnectionConfig);
that.haveGum = navigator.mediaDevices.getUserMedia(call_type)
.then(stream => {
that.pc.addStream(that.from_video.nativeElement.srcObject = stream);
that.from_video.nativeElement.style.display = 'block';
}).then(() => that.pc.createOffer())
.then(d => that.pc.setLocalDescription(d))
.catch(log => { alert(log) });
that.pc.oniceconnectionstatechange = function (e) {
that.call_status = that.pc.iceConnectionState;
if (that.pc.iceConnectionState == 'disconnected') {
console.log('Disconnected');
}
}
that.pc.onaddstream = e => {
that.to_video.nativeElement.srcObject = e.stream;
};
that.pc.onicecandidate = e => {
if (e.candidate) {
return;
}
that.offerSent = true;
that.socket.emit('sdp-offer', {
from: that.user,
sdp: that.pc.localDescription.sdp,
call_type: call_type
});
};
that.socket.on('sdp-offer-reply', (sdp: any) => {
that.pc.setRemoteDescription(new RTCSessionDescription(({ type:"answer", sdp: sdp.sdp }))).catch(log => console.log(log));
});
that.socket.on('call-closed', (sdp: any) => {
that.closeConnection();
});
} answerCall() {
let that = this;
let call_type;
if (this.call_type == 'audio')
call_type = { video: false, audio: true };
else
call_type = { video: true, audio: true };
that.pc2 = new RTCPeerConnection(this.peerConnectionConfig);
that.haveGum = navigator.mediaDevices.getUserMedia(call_type)
.then(stream => {
that.pc2.addStream(this.from_video.nativeElement.srcObject = stream);
});
that.pc2.oniceconnectionstatechange = function (e) {
console.log(that.pc2.iceConnectionState);
}
that.pc2.onaddstream = e => {
that.to_video.nativeElement.srcObject = e.stream;
that.to_video.nativeElement.style.display = 'block';
};
if (that.pc2.signalingState !="stable") {
that.call_status = that.pc2.signalingState;
alert("not stable");
return;
}
that.pc2.setRemoteDescription(new RTCSessionDescription(({ type:"offer", sdp: this.sdp.sdp })))
.then(() => that.pc2.createAnswer())
.then(d => {
that.sendSdpAnswer = d; that.pc2.setLocalDescription(d);
this.call_connected = true;
})
.catch(log => console.log(log));
that.pc2.onicecandidate = e => {
if (e.candidate) {
console.log("not e.candidate");
return;
}
that.socket.emit('offeraccepted', {
from: that.user,
sdp: that.sendSdpAnswer.sdp
});
};
that.socket.on('call-closed', (sdp: any) => {
that.closeConnection();
that.call_status ="Hung Up";
});
} closeConnection() {
if (typeof this.pc !=="undefined" && this.pc.signalingState !="closed") {
this.pc.close();
}
if (typeof this.pc2 !=="undefined" && this.pc2.signalingState !="closed") {
this.pc2.close();
}
} this.pc.createOffer({
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
})