How Do I Stream Video From My USB Webcam To A Remote HTML Page

Question

I want to create a program that will stream video from my USB webcam over the internet to a web page.

Currently, I use a webservice that when triggered, calls fswebcam to capture an image, save to data store, convert to base64 binary and send that data over to the HTML page where it is rendered into the 'src' attribute of 'img'. The HTML page has JavaScript that calls this service once per second.

As you can tell this is a horrible way to do this. I would rather have a proper stream if I can. But I don't know what technologies are available to achieve this.

The webservice is written in nodeJS. The server is running on a raspberry pi 2. I didn't put this question in the raspberry pi forum because I think it's a general Linux/programming issue.

Inroad

Answer 1

Use a framework like livecam.

Webcam live-streaming solution using GStreamer and Node.js

This module allows you to stream your webcam over a network to be consumed by your browser and/or streamed to a file. See documentation for more inforamtion.

Usage:

// npm install livecam

const LiveCam = require('livecam');
const webcam_server = new LiveCam({
    'start' : function() {
        console.log('WebCam server started!');
    }
});

webcam_server.broadcast();

Danyelldanyelle

Answer 2

The article here explains the whole process in the easiest way possible with working images. This is the Linux way of doing so, not any node.js script. I am stating here the main part of that.

• Connect with your Pi using the IP address. 'pi' & 'raspberry' is the default 'login as' and 'password' in Raspbian.

• To update system type in the command sudo apt-get update and sudo apt-get upgrade one at a time.

• Type in the command sudo apt-get install motion to start the installation.

• Now to make sure that the camera is correctly detected, type in the command lsusb and enter. You should see the name of your camera. If it is NOT there, then there is some problem in your camera or the camera is not supported in 'motion'.

• After the installation is complete, type in the command sudo nano /etc/motion/motion.conf and press enter.

• Then you have to change some settings in the .conf file. It might be difficult sometimes to find the settings but use Ctrl+W to find it. So follow the steps:

  1. Make sure 'daemon' is ON.
  2. Set 'framerate' anywhere in between 1000 to 1500.
  3. Keep 'Stream_port' to 8081.
  4. 'Stream_quality' should be 100.
  5. Change 'Stream_localhost' to OFF.
  6. Change 'webcontrol_localhost' to OFF.
  7. Set 'quality' to 100.
  8. Set 'width' & 'height' to 640 & 480.
  9. Set 'post_capture' to 5.
  10. Press ctrl + x to exit. Type y to save and enter to conform.

• Again type in the command sudo nano /etc/default/motion and press enter.

• Set start_motion_daemon to yes. Save and exit.

• First of all your have to restart the motion software. To do it type in the command sudo service motion restart and press enter.

• Again type in the command sudo motion and press enter. Now your server is ready.

• Now open up your browser. Type in the IP address of your raspberry Pi and the port number in this way:

  192.168.0.107:8081 (First there is the IP address, then a ':', then the port number). Press Enter.

Now you can see the Live feed coming from your webcam directly on your laptop or mobile or both at the same time. But, this is a local connection. To make it public set up your IP with a public one so that you it can be accessed from anywhere in the world.

Measurement

I tried with Logitech webcam and it works but the dimensions of the picture are just 176x144 regardless of settings. Any ideas how to use higher resolutions? Valid values for framerate are 2 to 100 so it isn't possible to use parameters between 1000 and 1500 as suggested. – Septenary

Any idea how fast this is or the latency of the video stream? – Acosta

Excellent response, it helped me a lot. However when I finished configure my system using your advices, I had 1 FPS on my webcap render on the webserver. Then I searched and found : ubuntuforums.org/showthread.php?t=2128049 and it gives the right solution to stream at max FPS of my device. I think the motion options names changed and in my case I had to set the following to make it work fully : stream_motion on stream_maxrate 30 #The max fps you want / your device can produce. If this does not solves the issue then it may be related to usb / network bandwidth. – Deakin