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


Video streaming example in Node.js ||

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.


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.


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


Here I have included 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.


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:

Leave a Reply

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