Securing a Raspberry Pi Motion Video Streaming with SSL/HTTPS

Question

Is it possible to create a secure connection using motion? I have embedded my motion stream on an HTML page using Apache, but it will not display as it is an insecure img on a secure page encrypted with letsencrypt and certbot. I can view the motion stream at:

http://www.example.com:<Motion-Port> but the embedded video at

https://example.com/camera.html will not display.

img code:

<img id="camera" src="http://xx.xxx.xxx.xx:8081">

I tried to modify the motion.conf file but that doesn't seem to do anything

webcontrol_tls on
stream_tls on
webcontrol_cert /etc/letsencrypt/live/www.example.com/fullchain.pem
webcontrol_key /etc/letsencrypt/live/www.example.com/privkey.pem

Picture of my setup

Otherwise, I'd be just as happy to learn about another way to display the raspberry pi's camera stream to my website.

Answer 1

I found the solution !

You don't need to mess with the motion.conf.

You need to modify /etc/apache2/site-enabled with a ProxyPass and a ProxyPassReverse

<IfModule mod_ssl.c>
<VirtualHost *:443>
        DocumentRoot "/var/www/html"
        ServerName www.example.com
        ServerAlias example.com


Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/www.example.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/www.example.com/privkey.pem

ProxyPass /camera http://xxx.xxx.x.xx:8081/
ProxyPassReverse /camera http://xxx.xxx.x.xx:8081/

</VirtualHost>
</IfModule>

and then in your.html file

<img id="camera" src="https://www.example.com/camera">

you can modify camera with whatever you like