HTML5 Video Conferencing

The HTML5 WebSockets allows us to share data through our web server with other user browsers. The HTML5 tag provides us with capabilities to access end user local cameras and microphones. Combination of these two HTML5 technologies allows us to build HTML5 Video Conferencing application. There are several companies which developed examples of the HTML5 video conferencing applications including Ericsson.

There are several limitations in the HTML5 WebSocket object that are in the process of being addressed by the HTML5 overseeing body. For example, the HTML5 WebSocket won’t allow binary data to be transferred over the wire. It can only deliver text. As a result, encoding and decoding is required to convert text into video and vice verse. In turn, it introduces a delay on top of the actual data transfer delay naturally occurring on the wire.

The HTML5 video conferencing code below was developed by Ericsson Labs and their online tutorial should be followed for clear understanding of this code sample logic.

<title>Video Chat</title>

window.onload = function () {

var transceiver = new MediaStreamTransceiver("ws://150.132.141.60:8880/delayswitch?sid=0");

var videoDevice = document.getElementsByTagName("device")[0];

videoDevice.onchange = function (evt) {

var videoStream = videoDevice.data;

var selfView = document.getElementById("self_view");

// exclude audio from the self view

selfView.src = videoStream.url + "#video";

selfView.play();

// set the stream to share

transceiver.localStream = videoStream;

};

transceiver.onconnect = function () {

var remoteVideo = document.getElementById("remote_video");

// play the incoming stream

remoteVideo.src = transceiver.remoteStream.url;

remoteVideo.play();

};

}

</script>

</head>

<body>

</div>

<p>Remote video:</p>

</div>

</body>

</html>

There are several Video Tutorials (Video 1, Video 2, Video 3) produced by Ericsson as well that shows you how their implementation works in test mode.

Download HTML5 Video Conferencing Sample Code: