Using websocket to stream in video tag

Question

I'm trying to stream a (WebM or MP4) video from Node.js to HTML5 using websockets (the websocket library is Socket.IO on both server and client). The browser in use is the latest version of Chrome (version 26.0.1410.64 m).

I saw here that it's possible to push a video stream in the video tag from a file using the MediaSource object.

My idea is to read chunks of data from the websocket instead of a file. Can someone please post an example using websockets to accomplish that or explain me how to do it?

Thanks in advance.

Solution

In addition to the text (string) messages, the WebSocket API allows you to send binary data, which is especially useful to implement binary protocols. Such binary protocols can be standard Internet protocols typically layered on top of TCP, where the payload can be either a Blob or an ArrayBuffer.

// Send a Blob
var blob = new Blob("blob contents");
ws.send(blob);

// Send an ArrayBuffer
var a = new Uint8Array([8,6,7,5,3,0,9]);
ws.send(a.buffer);

Blob objects are particularly useful when combined with the JavaScript File API for sending and receiving files, mostly multimedia files, images, video, and audio.

Also i suggest to see WebRTC (Technology associated with WebSockets) Web Real-Time Communication (WebRTC) is another effort to enhance the communication capabilities of modern web browsers. WebRTC is peer-to-peer technology for the Web. The first applications for WebRTC are real-time voice and video chat. WebRTC is already a compelling new technology for media applications, and there are many available sample applications online that enable you to test this out with video and audio over the Web. Please check this link

Comments

[susan097]

Well your answer describe about how to send the video stream. But i want to receive the continuous blob video data and set to the video tag such that i can make live video stream. Can you explain about this.. Any link or demo except webrtc can be accepted. Thanks in advance.

[xgarb]

@susan097 For working with 'jpg blobs' ws.onmessage = message => { //image.src = message.data; var urlObject = URL.createObjectURL(message.data); image.src = urlObject; }

[Lazar Ljubenović]

This doesn't even address the question. Sockets are only mentioned and then a generic description of WebRTC is given.