How to Implement a Real-time Commnication Application with WebRTC

Recently, I read the article - Getting Started with WebRTC, and also learned the sample code from WebRTC codelab. It is really interesting that we can implement video chat, audio chat and even message communications with WebRTC (Web browsers with real-time communications). In this post, I would like to share what I have done after digesting what WebRTC is.

What You Should Know?

  1. The sample code is based on the samples from codelab.
  2. You need to install Node.js.
  3. You need to use the npm, the package manager for Node.js, to install socket.io and node-static.

How to Run?

  1. Run command line tool (cmd.exe on Windows, terminal on Mac OS X) and get into the project root directory.
  2. Type in “node server.js”.
  3. Connect your devices (PC, smartphone, and tablet) to local network, and make sure you have installed the latest version of Chrome.
  4. Visit your local IP_address:2013 via arbitrary two devices.
  5. Enjoy it.

What is inside?

  • Video chat
  • Audio chat
  • Message communications
  • Capture camera image
  • Save image to local disk

Code

Video chat, audio chat and message communications:

var constraints = {video: true, audio : true};
getUserMedia(constraints, handleUserMedia, handleUserMediaError); // enable video & audio
function createPeerConnection() {
  try {
    pc = new RTCPeerConnection(null, {'optional': [{'DtlsSrtpKeyAgreement': true}, {'RtpDataChannels': true}]});
    pc.onicecandidate = handleIceCandidate;
    pc.onaddstream = handleRemoteStreamAdded; // receive remote video stream
    pc.onremovestream = handleRemoteStreamRemoved;
    console.log('Created RTCPeerConnnection');
  } catch (e) {
    console.log('Failed to create PeerConnection, exception: ' + e.message);
    alert('Cannot create RTCPeerConnection object.');
      return;
  }

  try {
      // Reliable Data Channels not yet supported in Chrome
      sendChannel = pc.createDataChannel("sendDataChannel",
        {reliable: false});
      sendChannel.onmessage = handleMessage;
      trace('Created send data channel');
    } catch (e) {
      alert('Failed to create data channel. ' +
            'You need Chrome M25 or later with RtpDataChannel enabled');
      trace('createDataChannel() failed with exception: ' + e.message);
    }
    sendChannel.onopen = handleSendChannelStateChange;
    sendChannel.onclose = handleSendChannelStateChange;
    pc.ondatachannel = gotReceiveChannel; // receive message
}

Capture camera image:

function captureImage() {
	if (remoteVideo.src == "") {
		alert('No remote connection');
		return;
	}

	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');

	canvas.width = remoteVideo.videoWidth / 4;
	canvas.height = remoteVideo.videoHeight / 4;
	ctx.drawImage(remoteVideo, 0, 0, canvas.width, canvas.height);
}

Save image to local disk:

function saveImage() {
	if (remoteVideo.src == "") {
		alert('No remote connection');
		return;
	}

	var ua = window.navigator.userAgent;

	if (ua.indexOf("Chrome") > 0) {
		var canvas = document.getElementById("canvas");

		// save image as png
		var link = document.createElement('a');
		link.download = "test.png";
		link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
		;
		link.click();
	} else {
		alert("Please use Chrome");
	}
}

You can download the source code WebRTC. If you have any questions, please email {desmond at Dynamsoft dot com}.

Search Blog Posts