HTML and CSS Reference
In-Depth Information
The incoming blob data, displayed as an HTML image
Video streaming
Many web designers and developers argue that the future of the web is video. Until
now, video was delivered using third-party plugins and technologies such as Flash or
Silverlight. Although these technologies worked pretty well on the desktop browsers,
they required extra software and were a catastrophe (in terms of battery life) for mo-
bile and tablet devices. After Apple decided to drop Flash support for iPhone and
iPad, HTML5 became the only available gate for delivering videos and rich graphics
over the web.
In terms of WebSockets, it makes sense to stream video across different clients us-
ing a fast and efficient way. Live video streaming is currently supposed to be one of
the last reasons Flash is still alive. Let's see how you can stream live video data from
the server to the clients in the WebSocket way.
A video is nothing more than a collection of consecutive images. Each of these im-
ages is called a frame . When a number of frames (usually more than 20) are dis-
played per second, the human eye cannot distinguish the distinct images and thinks
of it like a continuous flow. That's the technique you are going to use for streaming a
video file from the server to the clients.
The server sends 20 or more frames (images) per second, so that the client is con-
stantly awaiting for new messages. Remember the code you wrote for displaying im-
ages? Well, in a real-time video stream context, you do not need to store the data
as URLs until the web page is closed. Rather, it's a good practice to dispose the
frame URLs when you do not use them any more. Also, there is no need to create
the <img> element using JavaScript, as you can place it in our markup:
<img id="video" src="" alt="Video streaming" />
…and create a reference in your JavaScript code:
var video = document.getElementById("video");
So, here is the modified onmessage client event, which will be raised 20 or more
times per second:
Search WWH ::

Custom Search