How to Use OpenCV to Build Simple Webcam Apps for Desktop and Web

During the pandemic, the demand for camera apps is booming due to the social distancing situation. So, I collected some basic OpenCV webcam sample code implemented in different programming languages and built some simple web apps for remote webcam access. Hopefully, it will be helpful for someone who is getting started to build webcam apps. In this article, I will use JavaScript, C#, Python, and Golang.

OpenCV Installation for Node.js, C#, Python and Go

Since my development environment is Windows, the following installation steps may only work for Windows. If you want to install OpenCV on other operating systems, please visit the relevant tutorial pages. Building and installing OpenCV module takes time, so please be patient.

Node.js

Install opencv4nodejs:

npm i opencv4nodejs

Install OpenCvSharp:

For Windows

dotnet add package OpenCvSharp4
dotnet add package OpenCvSharp4.runtime.win

Python

Install OpenCV Python:

pip install opencv-python

Golang

Install gocv:

go get -u -d gocv.io/x/gocv

For Windows

Install MinGW-W64 x86_64–7.3.0-posix-seh-rt_v5-rev2.

Install CMake.

Build and install the OpenCV module:

chdir %GOPATH%\src\gocv.io\x\gocv win_build_opencv.cmd

Add C:\opencv\build\install\x64\mingw\bin to your system path.

Simple Desktop Webcam Program

Node.js

Create a desktop.js file:

Run the app:

node desktop.js

C#

Create a .NET core project:

dotnet new console -n Desktop

Add the following code to Program.cs:

Run the app:

dotnet run

Python

Create desktop.py:

Run the app:

python desktop.py

Golang

Create desktop.go:

Run the app:

go run desktop.go

Accessing Remote Webcam from Any Web Browser

To implement the remote webcam access, I just need to create a simple HTML page with an image element and launch a simple HTTP server for successively sending webcam frames by HTTP GET request. To make the code as simple as possible, I just use the built-in HTTP APIs of the four programming languages and OpenCV video capture APIs.

Node.js

Create a simple HTML page:

Use setTimeout() to continuously get a new image from the web server and refresh the image element.

On the server-side, create a simple web server using the HTTP module:

Analyze the request URLs and then send the corresponding responses. In the meantime, create a timer to capture webcam frames and encode them to JPEG format:

var img = null;
function capture() {
var frame = wCap.read()
if (frame.empty) {
wCap.reset();
frame = wCap.read();
}
img = cv.imencode('.jpg', frame);
setTimeout(capture, 30);
}
capture();

To open the HTML file by double-clicking, change the relative image path to the absolute image path:

image.src = "http://localhost:2020/image?" + new Date().getTime();

C#

Inspired by Benjamin Summerton’s gist, I created the HTTP server as follows:

Python

Using Python’s built-in HTTP server class is pretty convenient. What we need to do is to define a custom handler for processing HTTP requests:

Golang

Like Python, it is easy to set up an HTTP web server within 30 seconds:

Once everything is done, I can run the web server and visit localhost:2020 to view the webcam video stream from any desktop web browser.

The page is also accessible from my mobile web browser.

Finally, use ngrok to expose the local development server to the Internet.

Now, I can watch the live video through the remote webcam no matter where I am.

Source Code

https://github.com/yushulx/opencv-webcam

Originally published at https://www.dynamsoft.com on July 10, 2020.