Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

294 lines (258 sloc) 8.944 kb
<html>
<head>
<title>Simple WebRTC Data Channel Test</title>
</head>
<body>
<table width=100% height=100%>
<tr><td><h1>Simple WebRTC Data Channel Test</h1></td></tr>
<tr><td>(Note: this JS code is REALLY UGLY)</td></tr>
<tr><td><div><button id="thebutton" onClick="start();">Start!</button></div><br/></td></tr>
<tr><td><form id="pc1_form" action="javascript:sendit(1)">
<div>pc1 says: <input id="pc1_input" type="text" value="type here" onKeyPress="return submitenter(this,event)"/>
<input type="submit"/></div></form></td>
<td><form id="pc1_blob" action="javascript:sendblob(1)">
<div>pc1 sends a blob: <input id="pc1_browse" type="file"/>
<input type="submit"/></div></form></td></tr>
<tr><td><form id="pc2_form" action="javascript:sendit(2)">
<div>pc2 says: <input id="pc2_input" type="text" value="type here" onKeyPress="return submitenter(this,event)"/>
<input type="submit"/></div></form></td>
<td><form id="pc2_blob" action="javascript:sendblob(2)">
<div>pc2 sends a blob: <input id="pc2_browse" type="file"/>
<input type="submit"/></div></form></td></tr>
<tr><td><div id="datawindow" style="
width: 100%;
height: 500px;
overflow: auto;
border: 1px solid red;"></div></td></tr>
<script type="application/javascript;version=1.8">
let button = document.getElementById("thebutton");
let text_pc1 = document.getElementById("pc1_input");
let text_pc2 = document.getElementById("pc2_input");
let blob_pc1 = document.getElementById("pc1_browse");
let blob_pc2 = document.getElementById("pc2_browse");
let datawindow = document.getElementById("datawindow");
let pc1;
let pc2;
let dc1;
let dc2;
let channel1;
let channel2;
let num_channels;
num_channels = 0;
var datachannels = new Array(0);
let pc1_offer;
let pc2_answer;
let iter = 0;
let iter2 = 0;
let fake_audio;
function log(msg) {
let div = document.getElementById("datawindow");
div.innerHTML = div.innerHTML + "<p>" + msg + "</p>";
}
var fancy_log = function(msg,color) {
var pre = document.createElement("p");
var message = '<span style="color: ' + color + ';">' + msg + '</span>';
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
datawindow.appendChild(pre); // (window).* here doesn't work right
pre.scrollIntoView(false);
};
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13) {
myfield.form.submit();
return false;
} else {
return true;
}
}
var sendit = function (which) {
iter = iter + 1;
//log("Sending message #" + iter + " this = " + this);
if (which == 1) {
dc1.send(text_pc1.value);
text_pc1.value = "";
} else if (which == 2) {
dc2.send(text_pc2.value);
text_pc2.value = "";
} else {
log("Unknown send " + which);
}
};
var sendblob = function (which) {
iter = iter + 1;
//log("Sending blob #" + iter + " this = " + this);
if (which == 1) {
dc1.send(blob_pc1.files[0]);
blob_pc1.value = "";
} else if (which == 2) {
dc2.send(blob_pc2.files[0]);
blob_pc2.value = "";
} else {
log("Unknown sendblob " + which);
}
};
function failed(code) {
log("Failure callback: " + code);
}
// pc1.createOffer finished, call pc1.setLocal
function step1(offer) {
pc1_offer = offer;
pc1.setLocalDescription(offer, step1_5, failed);
}
function step1_5() {
setTimeout(step2,0);
}
// pc1.setLocal finished, call pc2.setRemote
function step2() {
pc2 = new mozRTCPeerConnection();
pc2.ondatachannel = function(channel) {
log("pc2 onDataChannel [" +num_channels + "] = " + channel +
", label='" + channel.label + "'");
dc2 = channel;
datachannels[num_channels] = channel;
num_channels++;
log("pc2 created channel " + dc2 + " binarytype = " + dc2.binaryType);
channel.binaryType = "blob";
log("pc2 new binarytype = " + dc2.binaryType);
channel.onmessage = function(evt) {
iter2 = iter2 + 1;
if (evt.data instanceof Blob) {
fancy_log("*** pc1 sent Blob: " + evt.data + ", length=" + evt.data.size,"red");
} else {
fancy_log("*** pc1 said: " + evt.data + ", length=" + evt.data.length,"red");
}
};
channel.onopen = function() {
log("*** pc2 onopen fired, sending to " + channel);
channel.send("pc2 says Hi there!");
};
channel.onclose = function() {
log("*** pc2 onclose fired");
};
log("*** pc2 state:" + channel.readyState);
// There's a race condition with onopen; if the channel is already
// open it should fire after onDataChannel -- state should normally be 0 here
if (channel.readyState != 0) {
log("*** pc2 no onopen??! possible race");
}
};
pc2.onconnection = function() {
log("pc2 onConnection ");
//dc2 = pc2.createDataChannel();
//log("pc2 created channel " + dc2);
}
pc2.onclosedconnection = function() {
log("pc2 onClosedConnection ");
}
pc2.addStream(fake_audio);
pc2.onaddstream = function(obj) {
log("pc2 got remote stream from pc1 " + obj.type);
}
pc2.setRemoteDescription(pc1_offer, step3, failed);
};
// pc2.setRemote finished, call pc2.createAnswer
function step3() {
pc2.createAnswer(step4, failed);
}
// pc2.createAnswer finished, call pc2.setLocal
function step4(answer) {
pc2_answer = answer;
pc2.setLocalDescription(answer, step5, failed);
}
// pc2.setLocal finished, call pc1.setRemote
function step5() {
pc1.setRemoteDescription(pc2_answer, step6, failed);
}
// pc1.setRemote finished, make a data channel
function step6() {
log("HIP HIP HOORAY");
setTimeout(step7,2000);
}
function step7() {
pc1.connectDataConnection(5000,5001);
pc2.connectDataConnection(5001,5000);
log("connect for data channel called");
}
function start() {
button.innerHTML = "Stop!";
button.onclick = stop;
pc1 = new mozRTCPeerConnection();
pc1.onaddstream = function(obj) {
log("pc1 got remote stream from pc2 " + obj.type);
}
pc1.ondatachannel = function(channel) {
// In case pc2 opens a channel
log("pc1 onDataChannel [" +num_channels + "] = " + channel +
", label='" + channel.label + "'");
datachannels[num_channels] = channel;
num_channels++;
channel.onmessage = function(evt) {
if (evt.data instanceof Blob) {
fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
} else {
fancy_log('pc2 said: ' + evt.data + ", length=" + evt.data.length,"blue");
}
}
channel.onopen = function() {
log("pc1 onopen fired for " + channel);
channel.send("pc1 says Hello out there...");
log("pc1 state: " + channel.state);
}
channel.onclose = function() {
log("pc1 onclose fired");
};
log("pc1 state:" + channel.readyState);
// There's a race condition with onopen; if the channel is already
// open it should fire after onDataChannel -- state should normally be 0 here
if (channel.readyState != 0) {
log("*** pc1 no onopen??! possible race");
}
}
pc1.onconnection = function() {
log("pc1 onConnection ");
dc1 = pc1.createDataChannel("This is pc1",{}); // reliable (TCP-like)
// dc1 = pc1.createDataChannel("This is pc1",{outOfOrderAllowed: true, maxRetransmitNum: 0}); // unreliable (UDP-like)
log("pc1 created channel " + dc1 + " binarytype = " + dc1.binaryType);
channel = dc1;
channel.binaryType = "blob";
log("pc1 new binarytype = " + dc1.binaryType);
// Since we create the datachannel, don't wait for onDataChannel!
channel.onmessage = function(evt) {
if (evt.data instanceof Blob) {
fancy_log("*** pc2 sent Blob: " + evt.data + ", length=" + evt.data.size,"blue");
} else {
fancy_log('pc2 said: ' + evt.data,"blue");
}
}
channel.onopen = function() {
log("pc1 onopen fired for " + channel);
channel.send("pc1 says Hello...");
log("pc1 state: " + channel.state);
}
channel.onclose = function() {
log("pc1 onclose fired");
};
log("pc1 state:" + channel.readyState);
}
pc1.onclosedconnection = function() {
log("pc1 onClosedConnection ");
}
navigator.mozGetUserMedia({audio:true, fake:true}, function(s) {
pc1.addStream(s);
fake_audio = s;
pc1.createOffer(step1, failed);
}, function(err) { alert("Error " + err); });
}
function stop() {
pc1.close();
pc2.close();
button.innerHTML = "Start!";
button.onclick = start;
}
</script>
</html>
Jump to Line
Something went wrong with that request. Please try again.