我使用 WebRTC 创建了一个简单的视频通话应用程序。我已从以下链接 https://webrtc.github.io/samples/src/content/peerconnection/pc1/中获取参考
我已将该应用程序与信令服务器集成。PC1 将向信令服务器发送报价,PC2 将接收报价并发送回答案。
这是我使用 Javscript 编写的代码
HTML
/* Client video */
<video id="client_video" autoplay></video>
/* Peer video */
<video id="remote_video" autoplay></video>
Javascript
var client_video = document.querySelector('#client_video');
var peer_video = document.querySelector('#remote_video');
var peerConnection, current_stream, client_user;
var configuration = {
"iceServers": [
{
"urls": "stun:stun.1.google.com:19302"
},
{
urls: 'turn:192.158.29.39:3478?transport=tcp',
credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
username: '28224511:1379330808'
}
]
};
//function for adding peer stream
function gotRemoteStream(e) {
if (peer_video.srcObject !== e.streams[0]) {
peer_video.srcObject = e.streams[0];
console.log('received remote stream');
}
}
//function to detect ICE state change
function onIceStateChange(pc, event) {
if (pc) {
console.log(`ICE state: ${pc.iceConnectionState}`);
console.log('ICE state change event: ', event);
}
}
//function to send ICE candidate to signaling server
function icecandidateAdded(ev) {
if (ev.candidate) {
send_to_sigserver(ev.candidate); // candidate send to signaling server
}
};
//function to access camera and RTCpeerconnection creation
function Rtc_connection(){
try {
const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
console.log('Received local stream');
client_video.srcObject = stream;
current_stream = stream;
} catch (e) {
alert(`getUserMedia() error: ${e.name}`);
}
peerConnection = new RTCPeerConnection(configuration);
current_stream.getTracks().forEach(track => peerConnection.addTrack(track, current_stream));
peerConnection.addEventListener('track', e => gotRemoteStream(e));
peerConnection.addEventListener('onicecandidate', e => icecandidateAdded(e));
peerConnection.addEventListener('iceconnectionstatechange', e => onIceStateChange(peerConnection, e));
if(client_user == true)
{
creating_offer();
}
else
{
creating_answer();
}
}
以下是用于从服务器发送和接收数据的函数
// when ICE candidate received from server
async function onCandidate_from_server(candidate) {
try {
await (peerConnection.addIceCandidate(candidate));
} catch (e) {
onAddIceCandidateError(e);
}
}
//ICE error
function onAddIceCandidateError(error) {
console.log(` failed to add ICE Candidate: ${error.toString()}`);
}
async function onAnswer_from_server(answer) {
//setRemoteDescription with answer first
try {
await peerConnection.setRemoteDescription(answer);
} catch (e) {
onSetSessionDescriptionError(e);
}
}
function onSetSessionDescriptionError(error) {
console.log(`Failed to set session description: ${error.toString()}`);
}
这些是创建报价和答案的功能
async function creating_offer() {
try {
const offer = await peerConnection.createOffer(offerOptions);
await onCreateOfferSuccess(offer);
} catch (e) {
onCreateSessionDescriptionError(e);
}
}
async function onCreateOfferSuccess(desc) {
try {
await peerConnection.setLocalDescription(desc);
send_to_sigserver(desc); // offer send to signaling server
} catch (e) {
onSetSessionDescriptionError(e);
}
}
async function creating_answer() {
//set setRemoteDescription with offer first
try {
await peerConnection.setRemoteDescription(conn_offer);
} catch (e) {
onSetSessionDescriptionError(e);
}
try {
const answer = await peerConnection.createAnswer();
await onCreateAnswerSuccess(answer);
} catch (e) {
onCreateSessionDescriptionError(e);
}
}
async function onCreateAnswerSuccess(desc) {
try {
await peerConnection.setLocalDescription(desc);
} catch (e) {
onSetSessionDescriptionError(e);
}
send_to_sigserver(desc); // answer send to signaling server
}
function onCreateSessionDescriptionError(error) {
console.log(`Failed to create session description: ${error.toString()}`);
}
连接后,我可以从两端创建报价和答案。client_video
我也可以在框架中看到客户端视频。但我无法看到远程对等流。我在连接中没有看到任何错误。所有的连接都很好。在两者Firefox
中chrome
,此代码都是not working
. 但是webRTC sample code
在两个浏览器中都可以使用。
我在这里做错了什么?请任何人提出解决方案或提示?