Skip to content

Instantly share code, notes, and snippets.

@endolith
Last active May 12, 2024 11:48
Show Gist options
  • Save endolith/2052778 to your computer and use it in GitHub Desktop.
Save endolith/2052778 to your computer and use it in GitHub Desktop.
How to stream a webcam to a web browser in Ubuntu

Grr this took hours to figure out. I was trying to install MJPG-streamer and running VLC command lines and all this crap but nothing worked.

First install motion:

~> sudo apt-get install motion

Then create a config file:

~> mkdir ~/.motion
~> nano ~/.motion/motion.conf

In it, the bare minimum to run a web server and view it on other computers:

webcam_port 8081
webcam_localhost off

Then run motion:

~> motion

Now you can view the webcam at http://hostname:8081 If it doesn't work, try rebooting between steps or something.

Isn't that easy? >:(

See also: How to run webcam software only when I am not home

@mlliarm
Copy link

mlliarm commented Apr 2, 2017

On Lubuntu 16.04 I've used the config settings mentioned by Salgat and it works like a charm.

Thank you.

@global-qa
Copy link

Hi,
I want to show video from webcam at website with https. How to stream it via https protocol?
Thank you

@danys94
Copy link

danys94 commented Aug 31, 2017

Amazing, now I dont have to be afraid of loosing my stuff at the hotel room :D

@neeraj55206
Copy link

Is this is valid for any other camera also ?
suppose i attach a camera to my system, will this work ?

@johnnycatt
Copy link

while this DID work.. please not it fills whatever folder you put .motion into with EVERY frame that the camera shoots... for me this was 100's of single .jpg files after only about 15-20 seconds of the camera running - BUT IT DOES WORK!

@usermigallon
Copy link

Hello,
Motion doesn't work outside from your network

@endolith
Copy link
Author

@johnnycatt: You can edit the motion.conf file and disable the saving of files

@usermigallon: You probably have to forward ports through your router?

@live4java
Copy link

@johnnycatt: The configuration option you want is:
output_pictures off

@twhl
Copy link

twhl commented Dec 2, 2018

Thanks Salgat, yours configuration works for me.

@OzzzM
Copy link

OzzzM commented Jan 5, 2019

hey, my english is not very good but this is the configuration:
stream_quality 98
stream_maxrate 5
stream_port 8080
stream_localhost off
output_pictures off
framerate 30
ffmpeg_video_codec mpeg4
http://192.168.0.34:8080/ozzz1.cgi
width 320
height 240
auto_brightness off
contrast 0
saturation 0

http://192.168.0.34:8080/ozzz1.cgi <--------- replace with your local ip host webcam, cam ip, usb cam machine, etc. and after "/" with a name of your election for example in my case "ozzz1.cgi" . this works for me when i type in a browser on the other device that url: "http://192.168.0.34:8080/ozzz1.cgi " or in your case the url modified.

@jackcrane
Copy link

Just for everyone whos saying it wont work outside the network, port forward what you set this to (in this case 8081), then go to your wan ip :8081.

i.e. 619.169.691.619:8081

@stiw47
Copy link

stiw47 commented Jun 13, 2019

This solution was posted long time ago, but - THANK YOU!
Just as said, was breaking my head with vlc, ffmpeg, etc. but this solution is so simple and it is working.
Arch Linux amd64 and actually it is not working out of box with default conf, posted in readme.md , but it is working with @OzzzM solution:

hey, my english is not very good but this is the configuration:
stream_quality 98
stream_maxrate 5
stream_port 8080
stream_localhost off
output_pictures off
framerate 30
ffmpeg_video_codec mpeg4
http://192.168.0.34:8080/ozzz1.cgi
width 320
height 240
auto_brightness off
contrast 0
saturation 0

http://192.168.0.34:8080/ozzz1.cgi <--------- replace with your local ip host webcam, cam ip, usb cam machine, etc. and after "/" with a name of your election for example in my case "ozzz1.cgi" . this works for me when i type in a browser on the other device that url: "http://192.168.0.34:8080/ozzz1.cgi " or in your case the url modified.

Why do I writing this? Because @global-qa was ask is it possible over https. Yes, it is true he was ask this before two years, but just in case someone else need solution, I am using NGINX and below is my webcam.conf (I already have a domain name and ssl certificate, I am using port 8080, change server_name , ssl_certificate location , ssl_certificate_key location and proxy_pass , to fit your configuration)

`server { listen 80;
return 301 https://$host$request_uri;
}

server { server_name webcam.example.com;
listen 443 ssl;

    ssl_certificate /path/to/domain.cert.pem;
    ssl_certificate_key /path/to/private.key.pem;
    ssl_prefer_server_ciphers On;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers 'AES256+EECDH:AES256+EDH:!aNULL';
    resolver 8.8.8.8 8.8.4.4 valid=300s;
    resolver_timeout 5s;
    ssl_stapling_verify on;
    keepalive_timeout 180;
    add_header Strict-Transport-Security max-age=31536000 always;
    client_max_body_size 1024M;

    location / {
            # Send traffic to the backend
            proxy_pass http://127.0.0.1:8080;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-for $proxy_add_x_forwarded_for;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-Proto $remote_addr;
                        proxy_set_header X-Forwarded-Protocol $scheme;
            proxy_redirect off;

            # Send websocket data to the backend as
            # well
            proxy_http_version 1.1;
                        proxy_set_header Upgrade $http_upgrade;
                        proxy_set_header Connection "upgrade";
    }

}`

@patel999jay
Copy link

Awesome.. Good work.. Worked like a charm..!

@localhoster
Copy link

hey, my english is not very good but this is the configuration:
stream_quality 98
stream_maxrate 5
stream_port 8080
stream_localhost off
output_pictures off
framerate 30
ffmpeg_video_codec mpeg4
http://192.168.0.34:8080/ozzz1.cgi
width 320
height 240
auto_brightness off
contrast 0
saturation 0

http://192.168.0.34:8080/ozzz1.cgi <--------- replace with your local ip host webcam, cam ip, usb cam machine, etc. and after "/" with a name of your election for example in my case "ozzz1.cgi" . this works for me when i type in a browser on the other device that url: "http://192.168.0.34:8080/ozzz1.cgi " or in your case the url modified.

Awesome! Works great with those options. I was also able to bind a webcam to ZoneAlarm server on other PC.

@turkishlitecoin
Copy link

stream_port 8080
stream_localhost off

Yep!! Works, but now have other issues with VM passthrough of the USB device. Thats my issue, but your 'fix' appears to have got me a http server (but with no available device - same as a Windows VM).
But thanks, it has got me further.

@MDAR
Copy link

MDAR commented May 24, 2020

Thank you so much.

I can't believe how incredibly easy this was.

My configuration file looks like this, just for reference.

stream_quality 98 stream_maxrate 5 stream_port 8080 stream_localhost off output_pictures off framerate 30 ffmpeg_video_codec mpeg width 640 height 480 auto_brightness off contrast 0 saturation 0

@kpmkpm
Copy link

kpmkpm commented May 28, 2020

Hello. Is it normal that the stream is two color and mainly black. However the mkv files generated by motion are in full color. How to change the stream to be shown as it should?

@endolith
Copy link
Author

@kpmkpm I don't know, sorry. It's color for me.

@Ashok12698
Copy link

Ashok12698 commented Nov 3, 2020

Hi @endolith, thanks for the post.
I am trying this on my ARM based iMX6Q board which has connected USB cam. I setup 'motion' as per the instructions mentioned above but failed to see the video.
Seems, I can see the streaming log but can't see the output video window while accessing it as 'http://..*.**:8080/' nothing gets open.

image
image

Please help. Thanks.

@EVINK
Copy link

EVINK commented Nov 6, 2020

stream_port 8080
stream_localhost off


The settings above works for me! I am using ubuntu20.04 with headless Raspberry Pi4b

@Ashok12698
Copy link

Hi @EVINK, thanks for your reply. I can see the stream log open at Board like this...
image
but when I try to see it using "http://xxx.xxx.x.xx:8080/", nothing gets open. Please suggest.

@beersteiner
Copy link

Anyone know how to make motion serve up single snapshots, on-demand, via URL? host:port/0/action/snapshot successfully results in generating the snapshot, saving it in /var/lib/motion, but it doesn't seem to actually serve up the resulting image (i.e. lastsnap.jpg) to the browser. This seems like a pretty basic feature, but I've searched a couple hours now and can't seem to find any evidence it is supported in motion.

@Barry-IA
Copy link

Barry-IA commented Jun 4, 2021

but when I try to see it using "http://xxx.xxx.x.xx:8080/", nothing gets open. Please suggest.

Ash-S:
Hopefully you have figured this out by now, but in case and for others I've found the port sometimes needs a 'slash_1' added, so :8080/1. I have one Motion device with two cameras and it needs :8081/1 and the other just wants :8082.

@tsyber1an
Copy link

tsyber1an commented Nov 6, 2021

as @EVINK said:

for motion's latest version for Ubuntu (Version 4.3.2), this is relevant configuration:

stream_port 8080
stream_localhost off

see more at: https://motion-project.github.io/motion_config.html

in addition, if you want to enable a web cam control:

webcontrol_port 8080
webcontrol_localhost off

also, configuring camera to its default resolution:

width 2560
height 1440

useful option, running in background

motion -b

all at ones for my camera:

stream_port 8081
stream_localhost off
webcontrol_port 8080
webcontrol_localhost off
width 2560 
height 144

@abdoaboganima
Copy link

stream_quality 98
stream_maxrate 5
stream_port 8080
stream_localhost off
output_pictures off
framerate 30
ffmpeg_video_codec mpeg4
http://192.168.0.34:8080/ozzz1.cgi
width 320
height 240
auto_brightness off
contrast 0
saturation 0

Thanks that works for me

@rivermonk
Copy link

rivermonk commented Sep 6, 2022

helpful discussion. using new lubuntu 22.04LTS install, got local motion recording to work properly (after setting some chown directory issues). also can access live video in browser with localhost:8081 and localhost:8080. what I want to do is access the USB cam live video remotely. I know I'll need to find the IP address and somehow set a password, but no idea how to do either. any clues? thanks

@assadollahi
Copy link

if you don't want to video write files on the harddrive, you should switch the ffmpeg_output_moives off. i also increased the framerate to 10 (for watching my 3D printer), and increased the resolution, works with Ubuntu 22.04.1 LTS (Jammy Jellyfish):

stream_quality 98
stream_maxrate 10
stream_port 8080
stream_localhost off
output_pictures off
ffmpeg_output_movies off
framerate 30
ffmpeg_video_codec mpeg4
width 1024
height 768

@Juan013
Copy link

Juan013 commented Oct 21, 2022

How can I change to /dev/video1?

@Barry-IA
Copy link

Barry-IA commented Oct 22, 2022 via email

@skwzrd
Copy link

skwzrd commented Jun 6, 2023

After messing about with VLC, go2rtc, and webcamd for days, motion simply just works with MINIMAL fuss.

Here is my motion.conf file:

stream_quality 98
stream_maxrate 5
stream_port 1984
stream_localhost off
output_pictures off
framerate 30
ffmpeg_video_codec mpeg
width 640
height 480
auto_brightness off
contrast 0
saturation 0

Here is my NGINX server

server {
    server_name DOMAIN;
    root /var/www/html;

    auth_basic "Admin"; # password protected domain
    auth_basic_user_file /etc/apache2/.htpasswd;

    location / {
        proxy_pass http://127.0.0.1:1984/;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Prefix /;
    }


    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/DOMAIN/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/DOMAIN/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment