Video stream with Node.js & Socket.io | Stream data in Node.js using Socket.io

video-streaming-node-js-example

Video streaming example in Node.js || Socket.io

Let me tell you one thing that real time video streaming in Node.js is super simple. When the question comes in our mind to stream data we think Ohhh.. this is very big task and you overhead yourself.

In this article I'll explain you that you can stream your data with few lines of code by using sockets.

I'll be using socket library to stream the data in real time. I also will be using express module for just to manage my routes and to defining my static directories.

I'm assuming that you have installed Node.js and NPM at your system.

First of all you need to create package.json which will be keeping your app info and app dependency modules info.

package.json




Now if you'll run the below command it'll install all the dependencies by node package manager(NPM).

Now create a javascript file just like I have created app.js.

app.js

Here in this JavaScript file first we created a server which is listening 3000 port. I also have broad casted the streaming data i.e image through the socket.



Create a a new directory named as 'public' which we have defined in our app.js.

Here is the public/index.html

public/emit.html

Here I have included socket.io.js library. Apart from socket I also have used HTML 5 video player for displaying the video. You also can see the preview of your video right now I have hidden that.

On document ready we will get the user media with the help of navigator or you can say we load the camera here. After that I'm passing the video and context after each 5 milliseconds to viewVideo() function.

Inside viewVideo() function we draw the image and emit the image as a stream.

Now the second screen comes to the picture to accept the image stream. For second screen I have created an another HTML file.

public/visualize.html

You noticed that we are emitting the stream from emit.html and now in visualize.html on socket stream I'm setting the image data by using JQuery. In logger div I'm also displaying the stream data.

After all setup run you project with following command:

 

Share This:

16 thoughts on “Video stream with Node.js & Socket.io | Stream data in Node.js using Socket.io

  1. Francesco

    I have implemented the code, following each step, but it is not clear, after typing "node app.js", how to visualize the streaming..

    First of all: which is the source of the stream? can I use a webcam?
    Secondly: which is the webpage to visualize the streaming?

    Thank you very much..

  2. vishnu

    Hi i have simple socket server in nodejs. the server is getting data(includes base64 encoded images) continuously. After running almost 7-8 hours am getting a memory leak issue in nodejs. Node:6.10.0 socket 2.1.1

    var app = require('express')();
    var http = require('http').Server(app);
    var io = require('socket.io')(http);

    app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
    });
    io.on('connection', function(socket){
    console.log('a user connected');
    socket.on("live",function(data){
    io.emit("detection",data)
    })
    });

  3. Francesco Sisini

    Great Tutorial,

    I needed to change :

    into

    and
    video.src=window.URL.createObjectURL(stream);
    into
    video.srcObject = stream;

    and it worked perfectly!

    thank you.
    F.

  4. Milo D Thompson

    use video.srcObject = stream; not video.src = window.URL.createObjectURL(stream); for the emit.html line 32 for updated browsers

  5. Arjun

    In this example ,we are constantly sending images to server and receiving that ..what if there are 5-6 streamers.In that case socket can handle that image load? I am trying to make live streaming application but this question arises for me.Please let me know if you have any solution for this

  6. vinoth

    it is working fine for me without audio , but the audio cannot be sent to the client's side..please solve this & mail me

Leave a Reply

Your email address will not be published. Required fields are marked *