WebRTC Data Channels

As we have seen in the class, WebSockets are powerful! We can enable real time interaction in the browser with other clients via a server.

Unfortunately, this last part, "via a server" does create a limitation. A server is required with enough bandwidth and horsepower to handle the data that clients would like to share.

We have also seen in class the power of Peer to Peer audio and video transmission via WebRTC. Having the ability to transfer audio/video directly from one user to another reduces latency, removes the need to have a server located in a high bandwidth environment and basically opens the doors to a wide range of potential application ideas without a lot of cost.

Fortunately, the same thing is also possible with non-audio/video data via the RTCDataChannel API, part of WebRTC.

More information: HTML5Rocks: WebRTC DataChannels


As with WebRTC for audio and video, the SimplePeer library makes working with DataChannels much easier.

Assuming peers are already connected, the code looks like this:
	// Send

	// Receive
	simplepeer.on('data', data => {
		console.log("Received: " + data);
Example using SimplePeer with DataChannels.


p5LiveMedia supports data transmission between peers as well and the API is equally as simple:

	// Passing in "DATA" as the capture type but data sharing works with "CAPTURE" and "CANVAS" as well
  	p5lm = new p5LiveMedia(this, "DATA", null, "data-example");
  	// "data" callback
  	p5lm.on('data', gotData);

	// gotData callback
	function gotData(data, id) {
		print(id + ":" + data);
		// If it is JSON, parse it
		let d = JSON.parse(data);

	// Sending Data: Package as JSON and then send
	let dataToSend = {x: mouseX, y: mouseY};