0
Ich erstelle eine kleine WebRTC-App, die zum Austausch von Textnachrichten verwendet wird. Ich habe die WebRTC-Verbindung funktioniert, aber Datachannel bleibt immer im "Verbindungs" -Zustand und geht nie auf "Öffnen".Webrtc Datenkanal immer im Verbindungsstatus und nicht geöffnet
Bitte sagen Sie mir, was ich hier vermisse.
Folgendes ist der JS.
socket.onmessage = function(e){
console.log("Message from signaling server");
writeToScreen('<span class="server">Server: </span>'+e.data);
var data = JSON.parse(e.data);
switch(data.type) {
case "login":
onLogin(data.success);
break;
case "offer":
onOffer(data.offer, data.name);
break;
case "answer":
onAnswer(data.answer);
break;
case "candidate":
onCandidate(data.candidate);
break;
default:
break;
}
}
// Enable send and close button
$('#send').prop('disabled', false);
$('#close').prop('disabled', false);
$('#connect').prop('disabled', true);
}
function close(){
socket.close();
}
function writeToScreen(msg){
var screen = $('#screen');
screen.append('<p>'+msg+'</p>');
screen.animate({scrollTop: screen.height()}, 10);
}
function clearScreen(){
$('#screen').html('');
}
function sendMessage(){
if(!socket || socket == undefined) return false;
var mess = $.trim($('#message').val());
if(mess == '') return;
writeToScreen('<span class="client">Client: </span>'+mess);
socket.send(mess);
// Clear input
$('#message').val('');
}
$(document).ready(function(){
$('#message').focus();
$('#frmInput').submit(function(){
sendMessage();
});
$('#connect').click(function(){
connect();
});
$('#close').click(function(){
close();
});
$('#clear').click(function(){
clearScreen();
});
});
if (!window.RTCPeerConnection) {
window.RTCPeerConnection = window.webkitRTCPeerConnection;
}
var configuration = {
"iceServers": [
{
"urls": "stun:mmt-stun.verkstad.net"
},
{
"urls": "turn:mmt-turn.verkstad.net",
"username": "webrtc",
"credential": "secret"
}
]
};
myConnection = new RTCPeerConnection(configuration,{optional:[{RtpDataChannels: true},{DtlsSrtpKeyAgreement: true}]});
console.log("RTCPeerConnection object was created");
console.log(myConnection);
openDataChannel();
//when the browser finds an ice candidate we send it to another peer
myConnection.onicecandidate = function (event) {
console.log(event.candidate);
if (event.candidate) {
send({
type: "candidate",
candidate: event.candidate
});
}
};
// Datachannel
var mediaConstraints = {
'offerToReceiveAudio': 1,
'offerToReceiveVideo': 1
};
var connectToOtherUsernameBtn = document.getElementById("connectToOtherUsernameBtn");
console.log(connectToOtherUsernameBtn);
connectToOtherUsernameBtn.addEventListener("click", function() {
console.log("ice state : "+myConnection.iceGatheringState);
var otherUsername = connectToOtherUsernameBtn.value;
connectedUser = otherUsername;
if (otherUsername.length > 0) {
//make an offer
myConnection.createOffer(function (offer) {
send({
type: "offer",
offer: offer
});
console.log(offer);
console.log(typeof(offer));
myConnection.setLocalDescription(offer);
console.log("localDescription");
console.log(myConnection.localDescription);
}, function (error) {
alert("An error has occurred.");
console.log(error);
});
}
});
function send(message) {
if (connectedUser) {
message.name = connectedUser;
}
socket.send(JSON.stringify(message));
};
//when somebody wants to call us
function onOffer(offer, name) {
console.log("offer recieved");
connectedUser = name;
myConnection.setRemoteDescription(new RTCSessionDescription(offer));
myConnection.createAnswer(function (answer) {
myConnection.setLocalDescription(answer);
send({
type: "answer",
answer: answer
});
}, function (error) {
alert("oops...error");
console.log(error);
});
console.log("Answer sent");
}
//when another user answers to our offer
function onAnswer(answer) {
console.log("answer recieved");
myConnection.setRemoteDescription(new RTCSessionDescription(answer));
console.log(myConnection.iceConnectionState);
}
//when we got ice candidate from another user
function onCandidate(candidate) {
myConnection.addIceCandidate(new RTCIceCandidate(candidate));
}
});
//data channel
//creating data channel
function openDataChannel() {
console.log("opening Data Channel");
var dataChannelOptions = {
reliable:true,
};
dataChannel = myConnection.createDataChannel("myDataChannel",dataChannelOptions);
dataChannel.onerror = function (error) {
console.log("Error:", error);
};
dataChannel.onmessage = function (event) {
console.log("Got message:", event.data);
};
}
function sendmsg() {
console.log("send message");
var msgInput=document.getElementById("msgInput");
var val = msgInput.value;
console.log(val);
dataChannel.send(val);
}
function checkstatus(){
console.log("Checking Status");
console.log("signalingState: "+myConnection.signalingState);
console.log("iceConnectionState: "+myConnection.iceConnectionState);
console.log("iceGatheringState: "+myConnection.iceGatheringState);
console.log("localDescription: ");
console.log(myConnection.localDescription);
console.log("remoteDescription:");
console.log(myConnection.remoteDescription);
console.log("Connestion id");
console.log(dataChannel.id);
console.log("Connestion readyState");
console.log(dataChannel.readyState);
}
Im Folgenden ist das Konsolenprotokoll von Chrom. 
Yeahh überprüfen nicht klar genug sind. Ich habe das Problem herausgefunden. Ich musste die Methode RTCPeerconnection.onDatachannel verwenden, um den Datachannel auf dem Client, auf dem das Angebot erstellt wurde, zu erfassen und den Datachannel mit "event.channel" abzurufen. Ich bin mir nicht sicher, wie richtig ich bin, aber es funktioniert jetzt. – user2288650
Ich habe immer noch viele Fragen, wie man WebRTC robust macht. Viele Male werden die Verbindungen nicht funktionieren und ich bekomme den Fehler "DOM Ausnahme: Fehler in Prozession icecandidates". Zu anderen Zeiten funktioniert alles ohne Probleme. – user2288650
Bitte stellen Sie eine neue Frage, anstatt eine bestehende Frage hinzuzufügen – Mikkel