Rtcdatachannel With Google Channel Api
I'm trying to follow this example by Dan Ristic for RTCDataChannel browser p2p communication with Google's Channel API for signaling. It seems to be failing silently - I can't get
Solution 1:
Firefox does not (and never will) support RtpDataChannels. It only supports the spec-compliant (and more advanced) SCTP datachannels. Removing the optional constraint should switch you over to them without requiring other changes.
It is somewhat odd that your SDP appears to have sctp lines in it. The google sample at http://googlechrome.github.io/webrtc/samples/web/content/datachannel/ does not when using rtp data channels.
Solution 2:
for starters, you are missing peerConnection.onDataChannel on the other side of the datachannel creation,
the code would be something like:
answerer.ondatachannel = function (event) {
answererDataChannel = event.channel;
answererDataChannel.binaryType = 'blob';
setChannelEvents(answererDataChannel, 'answerer');
};
...
functionsetChannelEvents(channel, channelNameForConsoleOutput) {
channel.onmessage = function (event) {
console.debug(channelNameForConsoleOutput, 'received a message:', event.data);
};
channel.onopen = function () {
channel.send('first text message over SCTP data ports');
};
}
for the complete code, you can check this link
Solution 3:
After many hours of trying, I was able to get my original example to work on Chrome 40.0.2214.93 and Opera 27.0 (latest as of this writing). why doesn't “onicecandidate” work? helped a lot. I had no luck getting it working on Firefox:
<html><head><scriptsrc="https://code.jquery.com/jquery-2.1.3.min.js"></script><scripttype="text/javascript"src="/_ah/channel/jsapi"></script><script>
$(document).ready(function(){
varIS_CHROME = !!window.webkitRTCPeerConnection,
RTCPeerConnection = window.webkitRTCPeerConnection || mozRTCPeerConnection,
RTCIceCandidate = window.RTCIceCandidate || RTCSessionDescription,
RTCSessionDescription = window.RTCSessionDescription || mozRTCSessionDescription,
SESSION_ID = "123456",
weAreHost,
optionalRtpDataChannels = {
optional: [{RtpDataChannels: true}]
},
mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: false,
OfferToReceiveVideo: false
}
};
// Signaling Channel ObjectfunctionSignalingChannel(peerConnection) {
// Setup the signaling channel herethis.peerConnection = peerConnection;
}
functionsetChannelEvents(dataChannel) {
dataChannel.onmessage = function (event) {
console.log("I got data channel message: ", event.data);
}
dataChannel.onopen = function (event) {
dataChannel.send("######### SUCCESS ######### RTCDataChannel Open!");
}
dataChannel.error = function(event) {
console.log("data channel error:", event)
}
}
functionerror(e) {
console.log(arguments);
thrownewError(e);
}
SignalingChannel.prototype.send = function(message) {
//console.log("signal send:", message); var url = "/api/signal/send/";
url += weAreHost ? "client"+SESSION_ID : "host"+SESSION_ID;
$.ajax({
type: "PUT",
url: url,
contentType: "application/json",
data: JSON.stringify(message)
});
};
SignalingChannel.prototype.onmessage = function(message) {
//console.log("signal receive:", message); var self = this;
if(message.type && message.type === "offer") {
var offer = newRTCSessionDescription(message);
this.peerConnection.setRemoteDescription(offer, function() {
self.peerConnection.createAnswer(function(answer) {
self.peerConnection.setLocalDescription(answer, function() {
self.send(answer);
}, error);
}, error, mediaConstraints);
});
} elseif(message.type && message.type === "answer") {
var answer = newRTCSessionDescription(message);
this.peerConnection.setRemoteDescription(answer, function(){
}, error);
} else {
this.peerConnection.addIceCandidate(newRTCIceCandidate(message.candidate));
}
};
functioninitiateConnection(input) {
weAreHost = input;
// setup signaling mechanism with Google Channel APIvar url = "/api/signal/init/";
url += weAreHost ? "host"+SESSION_ID : "client"+SESSION_ID;
$.post(url, "", function(response){
var channel = new goog.appengine.Channel(response.token);
var socket = channel.open();
socket.onerror = error;
var closeSocket = function() {
if(socket) return socket.close();
elsereturn"google socket does not exist"
}
$(window).unload(closeSocket);
window.onbeforeunload = closeSocket;
socket.onopen = function() {
console.log("google socket opened");
// Create a peer connection objectvar connection = newRTCPeerConnection({
iceServers: [
{ 'url': (IS_CHROME ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121') }
]
}, optionalRtpDataChannels);
// Initiate a signaling channel between two usersvar signalingChannel = newSignalingChannel(connection);
connection.onicecandidate = function (event) {
//console.log("onicecandidate:", event);if (!event || !event.candidate) return;
signalingChannel.send({candidate:event.candidate});
};
// Effectively set SignalingChannel as google channel socket inbound event handler
socket.onmessage = function(input) {
//console.log("received from google:", input); var message = $.parseJSON(input.data);
signalingChannel.onmessage(message);
};
// Only one client should initiate the connection, the other client should waitif(weAreHost) {
connection.ondatachannel = function(event) {
setChannelEvents(event.channel);
}
} else {
// Create client RTCDataChannelvar clientChannel = connection.createDataChannel("my_label", {reliable: false});
setChannelEvents(clientChannel);
// create offer and send to host
connection.createOffer(function (offer) {
connection.setLocalDescription(offer, function() {
signalingChannel.send(offer);
}, error);
}, error, mediaConstraints);
}
};
}, "json").fail(error);
};
// Create a button on the page so only one client initiates the connection.
$("#i-am-host").click(function() {
initiateConnection(true);
});
$("#i-am-client").click(function() {
initiateConnection(false);
});
});
</script></head><body><pid="i-am-host"style="background-color: green;">I AM HOST</p><pid="i-am-client"style="background-color: blue;">I AM CLIENT</p><br><pid="print">PRINT SIGNALING STATE<p></body></html>I've decided to go with PeerJS with a free Heroku server for signaling. In my opinion WebRTC is far too unstable right now to use directly. The following works on Chrome/FF/Opera:
<html><head><scriptsrc="https://code.jquery.com/jquery-2.1.3.min.js"></script><scriptsrc="http://cdn.peerjs.com/0.3.9/peer.js"></script><script>
$(document).ready(function(){
varSESSION_ID = "1234";
// Create a button on the page so only one client initiates the connection.
$("#i-am-host").click(function() {
var host = newPeer('host'+SESSION_ID, {host: 'my-peerjs.herokuapp.com', port: 80});
host.on("connection", function(conn) {
conn.on('data', function(data) {
console.log(data);
});
});
});
$("#i-am-client").click(function() {
var client = newPeer('client'+SESSION_ID, {host: 'my-peerjs.herokuapp.com', port: 80});
var conn = client.connect('host'+SESSION_ID);
conn.on("open", function(){
conn.send("SUCCESS!!");
});
});
});
</script></head><body><pid="i-am-host"style="background-color: green;">I AM HOST</p><pid="i-am-client"style="background-color: blue;">I AM CLIENT</p></body></html>
Post a Comment for "Rtcdatachannel With Google Channel Api"