Video Streaming Using Opencv4nodejs With Node js, Express, and Socket IO

Credit → some random dude on google images

Hey guys, welcome to 2021 and I know it is very late to wish everyone !!!

It’s a new year and the right time to learn something new, I mean yes so let’s look into this new concept, its OpenCV. Yes it is OpenCV not with python and since it is a new year let’s learn a new language i.e. let’s learn OpenCV with Node JS. Since OpenCV has played a vital role in the Computer Vision applications let’s do the same in web applications like Face Detection, Face Land Mark Detection, Face Recognition and even Object Recognition with Deep Neural Networks etc…

Well we all know how to get a camera feed from our lappy or simply local machine. But we have all done that using OpenCV with Python and not even with C++. If you guys have done it, that’s really great.

Here in this tutorial we will get the camera feed and put that into a node app and host it up using Express Node js and Socket IO.

Let’s cut the talk and get to implementation part, before diving deep into the AI part of opencv4nodejs let’s first the basic like steps to be followed,

Steps:

• Import the required libraries.
• Capture the Video feed from the local machine.
• Get the Video feed and stream it into a web app.
• Create a basic html file or create a EJS template.
• Include Socket IO library in the Client side
• Connect your client side to either the localhost or any network
• Make client listen to that image and encode it
• Now set a constant value for FramesPerSecond

Step 1:

Here the required Libraries are

• Opencv4nodejs
• Express
• http
• Socket IO
• Path

Import them as shown

Library Required

Step 2:

Now we need to Capture the Video feed from the local machine,

Capture Video

You guys can see doesn’t this look like python code, if you’re a true python programmer you definitely remember this and the answer is hell yes … !!!

I guess OpenCV cheated on us guys .. !!!

Step 3:

Get the Video feed and stream it into a web app using proper time interval i.e we are going to do a public broadcast to anyone who is listening to our server.

This is our server side by the way.

setInterval

Here we have obtained the video capture and encoded the image. We are encoding because all the images that have been captured are always read in the matrix format and that is the main reason we need to encode them to base 64 and that string is then broadcasted with the almighty Socket IO.

Looks like all the setup needed for the server side has been done. It is time to move to the client side.

Step 4:

Folder Structure

For the client side instead of creating a normal HTML file I have created a EJS template and if you’re going to do a git repo kindly follow my GitHub, where I have given the required details of how to use it if you are doing a git clone.

Step 5:

Now include Socket IO library in the Client side i.e. use the Link

I will let you guys do the research about the Content Delivery Network Node JS (cdnjs) of Socket IO i.e whichever version you want you may use and rather than using what I have used.

index.ejs

Step 6:

Connect your client side to either the localhost with assigned port or else make it listen to any network as I have done.

You can refer to the image given above for this.

Step 7:

Now need our client to listen to that image and encode it as shown,

socket script in index.ejs

Step 8:

I guess we are all done. Now all we need to do is set a constant value for FramesPerSecond and you can also change it and have fun. This is on the server side.

Note →

Try to make the FramesPerSecond = 10 and change it to 50 then make it 100. You will enjoy the output.

In this project if your start the server itself the camera will start to run and you don’t need to do transform it will give you a normal camera feed i.e. not a mirror image feed.

server.js

Have fun with OpenCV4nodejs…

If you wish to host it using ngrok I have given the details in the GitHub.

If you wish to add ssl certificate to your website have a look at link below

Generate SSL Certificate using Node JS for web apps

Code Details, take a look at my GitHub

narenltk - Overview

Ref: https://www.npmjs.com/package/opencv4nodejs

If you wish to stay connected,

Narendiran Krishnan — Bengaluru, Karnataka, India | Professional Profile | LinkedIn

you can also just google “ narenltk / narendiran krishnan ” or just drop a mail to → narenltk@gmail.com → Happy to help..!!!