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>                  

           <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://");

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


                                videoDevice.onchange = function (evt) {

                                        var videoStream =;

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

                                        // exclude audio from the self view

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


                                // 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;







         <div><device         type="media"></div>             

         <div         style="float:left">             


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


         <div         style="float:left">             

        <p>Remote          video:</p>     

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




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. 


Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …