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.
<html>
<head>
<title>Video Chat</title>
<script type="text/javascript" src="device_dialog.js"></script>
<script type="text/javascript" src="wow_feature.js"></script>
<script type="text/javascript">
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><device type="media"></div>
<div style="float:left">
<p>Self-view:</p>
<video width="320" height="240" id="self_view"></video>
</div>
<div style="float:left">
<p>Remote video:</p>
<video width="320" height="240" id="remote_video"></video>
</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.