WebRTC

WebRTC is a standard being put forth by the W3C to create an API to deliver realtime data, audio, and video between browsers in a peer to peer fashion.

PeerJS

Unfortunately, there is a fair amount of complexity involved in sending descriptions of the data, audio and video channels from peer to peer.

Fortunately, a few JavaScript libraries have popped up to aide in this. One, in particular that we'll go over is PeerJS. (Unfortunately, PeerJS itself seems to be in a bit of flux as well but for now, we'll stick with it.)

Simple Video Conferencing Example

The first step is to do our normal getUserMedia, gaining access to a stream from the user's camera and microphone:

/* Get User Media */
let my_stream = null;

// Constraints - what do we want?
let constraints = { audio: false, video: true }

window.addEventListener('load', function() {
	// Prompt the user for permission, get the stream
	navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
		/* Use the stream */

		// Attach to our video object
		var videoElement = document.getElementById('myvideo');
		videoElement.srcObject = stream;

		// Global for stream
		my_stream = stream;

		// Wait for the stream to load enough to play
		videoElement.onloadedmetadata = function(e) {
			videoElement.play();
		};
	})
	.catch(function(err) {
		/* Handle the error */
		alert(err);
	});
});
		

<video id="myvideo" width="320" height="240"></video>
		

The next step is to include the PeerJS JavaScript library. (Download it from here: PeerJS GitHub, either get the peer.min.js from the dist directory or download a release and get it from the same sample place.)

<script src="peer.min.js"></script>
		

// We'll use a global variable to hold on to our id from PeerJS
var peer_id = null;

// Register for an API Key:	http://peerjs.com/peerserver
//var peer = new Peer({key: 'YOUR API KEY'});
// The Peer Cloud Server doesn't seem to be operational, I setup a server on a Digital Ocean instance for our use, you can use that with the following constructor:
var peer = new Peer({host: 'liveweb-new.itp.io', port: 9000, path: '/'});

// Get an ID from the PeerJS server
peer.on('open', function(id) {
  console.log('My peer ID is: ' + id);
  peer_id = id;
});

peer.on('error', function(err) {
  console.log(err);
});
		

This should be enough for us to receive a "call"

peer.on('call', function(incoming_call) {
	console.log("Got a call!");
	incoming_call.answer(my_stream); // Answer the call with our stream from getUserMedia
	incoming_call.on('stream', function(remoteStream) {  // we receive a getUserMedia stream from the remote caller
		// And attach it to a video object
		var ovideoElement = document.getElementById('othervideo');
		ovideoElement.src = window.URL.createObjectURL(remoteStream) || remoteStream;
		ovideoElement.setAttribute("autoplay", "true");
		ovideoElement.play();
	});
});
		

PeerJS runs a server which aides in the transmission of audio/video/data channel information but we'll still need to run a server to introduce the users to each-other. We can use a normal WebSocket server as we have been doing and use it to share the PeerJS ID value between users.

Here is a basic server that relays the peer_id's:

// HTTPS Portion - Required for getUserMedia
var https = require('https');
var fs = require('fs'); // Using the filesystem module
var url =  require('url');

// Include your key and certificate in the same directory
var options = {
  key: fs.readFileSync('my-key.pem'),
  cert: fs.readFileSync('my-cert.pem')
};

function handleIt(req, res) {
	var parsedUrl = url.parse(req.url);

	var path = parsedUrl.pathname;
	if (path == "/") {
		path = "index.html";
	}

	fs.readFile(__dirname + path,

		// Callback function for reading
		function (err, fileContents) {
			// if there is an error
			if (err) {
				res.writeHead(500);
				return res.end('Error loading ' + req.url);
			}
			// Otherwise, send the data, the contents of the file
			res.writeHead(200);
			res.end(fileContents);
  		}
  	);

	// Send a log message to the console
	console.log("Got a request " + req.url);
}

var httpServer = https.createServer(options, handleIt);
httpServer.listen(8080);


// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io').listen(httpServer);

var connectedSockets = [];

// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
	// We are given a websocket object in our function
	function (socket) {

		console.log("We have a new client: " + socket.id);

		// Add to the connectedSockets Array
		connectedSockets.push(socket);

		socket.on('peer_id', function(data) {
			console.log("Received: 'peer_id' " + data);

			// We can save this in the socket object if we like
			socket.peer_id = data;
			console.log("Saved: " + socket.peer_id);

			// We can loop through these if we like
			for (var i  = 0; i < connectedSockets.length; i++) {
				console.log("loop: " + i + " " + connectedSockets[i].peer_id);
			}

			// Tell everyone my peer_id
			socket.broadcast.emit('peer_id',data);
		});


		socket.on('disconnect', function() {
			console.log("Client has disconnected");
			var indexToRemove = connectedSockets.indexOf(socket);
			connectedSockets.splice(indexToRemove, 1); // Remove 1 from position, indexToRemove
		});
	}
);
		

To use the server, we'll use our normal Socket.io code on the client side:

/* Socket Server - Socket.io */
var socket = io.connect();

socket.on('connect', function() {
	console.log("Connected");

	// Our socket is connected, send out our peer id here
	console.log("sending out our peer id");
	socket.emit("peer_id",peer_id);
});

// Receive other folks peer ids
socket.on('peer_id', function (data) {
	console.log("Got a new peer: " + data);

	// Call them with our stream
	console.log("Calling peer: " + data);
	var call = peer.call(data, my_stream);

	call.on('stream', function(remoteStream) {
		console.log("Got remote stream");
		var ovideoElement = document.createElement('video');
		ovideoElement.src = window.URL.createObjectURL(remoteStream) || remoteStream;
		ovideoElement.setAttribute("autoplay", "true");
		ovideoElement.play();
	});
});