basic html/python coding help needed (Raspberry Pi)

[silkstone]

Hi all,

I was wondering whether anyone could help?

I'm trying to create a .html file that will cycle between different images after x amount of seconds.

I want to do this as I have a Raspberry set up with multiple cameras and want a basic cycle through them all.

The screen I have is small (netbook sized) and so displaying the two feeds side-by-side is not very helpful.

If it's not possible in html, maybe something based in python would work?

If found some info here, but all the examples have side-by-side feeds

http://www.lavrsen.dk/foswiki/bin/v..._see_more_than_one_camera_stream_at_a_time_63

Thanks for any help and apologies

 

[silentbogo]

With some HTML and Javascript you can do it quite easily.

BTW, the example you've listed is for multiple IP cameras, so if you have a two physical webcams or a camera on CSI interface(e.g. PiCamera), you will need additional script to save snapshots to image files periodically.

Tell me what's your setup, and I'll try to put something together, or at least give you some directions.

 

[silkstone]

With some HTML and Javascript you can do it quite easily.

BTW, the example you've listed is for multiple IP cameras, so if you have a two physical webcams or a camera on CSI interface(e.g. PiCamera), you will need additional script to save snapshots to image files periodically.

Tell me what's your setup, and I'll try to put something together, or at least give you some directions.

It's a PiCam + a webcam used on the front door to my apartment. The PiCam is outwards facing to see a persons face, if they are at the door and the webcam is in a corner above, giving a wide-angle view of the hallway and door.

I am using motion for the streaming and capture. It works well, though a few more snapshots than I'd like.

I have both streams working at the moment, they are just streaming to 2 different ports (same ip). I'd really like to have a round-robin type setup, if possible.

 

[silentbogo]

Ok, so if you haven't set up image capture from your cameras, we can start with that.
I found this article for PiCam w/ small script in Python:
https://www.raspberrypi.org/forums/viewtopic.php?t=117868&p=801443

It's meant to be triggered by motion detector, but if you remove the condition and add a delay - it will continuously record images.
If you don't want to save all images chronologically, and only care about what's happening right now, simply remove the timestamp from the file name (this will also help with streaming).

Second part - webcam.
All you need is install fswebcam tool and you can either write a separate script to capture webcam images, or for the sake of synchronization add a call into your Python script and save it to the other file.

So, your whole script should look like this (I'm just making minimal changes, cause I'm lazy and my Python is a bit rusty):

import os
import time
import RPi.GPIO as GPIO  # no need if you are not using motion sensors
import Picamera
from subprocess import call # We need this for fswebcam calls

cam = picamera.Picamera()

GPIO.setmode (GPIO.BCM)

pir_pin = 4

GPIO.setup (pir_pin, GPIO.IN) # Sensor pin
os.chdir("/home/yourname/capture/") # switch to capture directory

While True:
if GPIO.input (pir_pin):
print ("MOTION DETECTED")
cam.start_preview ()
cam.capture ("Picam.jpg")
cam.stop_preview ()
# Now let's capture webcam
call (["fswebcam", "Webcam.jpg"])
print("Images captured")
time.sleep (5)

else:
time.sleep (0.2) # Delay, if nothing happened

I'll put together some HTML/JS in a minute or two,.

 

[Xpect]

If you can already get still images from the cams and don't need to save them, a simple HTML Frameset would work.

 

[silkstone]

Ok, so if you haven't set up image capture from your cameras, we can start with that.
I found this article for PiCam w/ small script in Python:
https://www.raspberrypi.org/forums/viewtopic.php?t=117868&p=801443

It's meant to be triggered by motion detector, but if you remove the condition and add a delay - it will continuously record images.
If you don't want to save all images chronologically, and only care about what's happening right now, simply remove the timestamp from the file name (this will also help with streaming).

Second part - webcam.
All you need is install fswebcam tool and you can either write a separate script to capture webcam images, or for the sake of synchronization add a call into your Python script and save it to the other file.

So, your whole script should look like this (I'm just making minimal changes, cause I'm lazy and my Python is a bit rusty):

import os
import time
import RPi.GPIO as GPIO  # no need if you are not using motion sensors
import Picamera
from subprocess import call # We need this for fswebcam calls

cam = picamera.Picamera()

GPIO.setmode (GPIO.BCM)

pir_pin = 4

GPIO.setup (pir_pin, GPIO.IN) # Sensor pin
os.chdir("/home/yourname/capture/") # switch to capture directory

While True:
if GPIO.input (pir_pin):
print ("MOTION DETECTED")
cam.start_preview ()
cam.capture ("Picam.jpg")
cam.stop_preview ()
# Now let's capture webcam
call (["fswebcam", "Webcam.jpg"])
print("Images captured")
time.sleep (5)

else:
time.sleep (0.2) # Delay, if nothing happened

I'll put together some HTML/JS in a minute or two,.

Thanks. I've already got all of that set up through motion.

What I really want to do is cycle through the different streams (one at 192.168.0.5:8081 and the other is at 192.168.0.5:8082)

I've tried the xdotool to cycle through chromium tabs, but that isn't working

 

[silentbogo]

So, you already have both streams set up over IP?
What type of streams are you using and what streaming software?

If it's gstreamer or any other type of rtsp server, then you might not need a webpage at all, just use multiple VLC instances side-by-side on a client PC, or get a free and/or opensource security camera monitoring software (most do support RTSP protocol).

 

[silkstone]

So, you already have both streams set up over IP?
What type of streams are you using and what streaming software?

If it's gstreamer or any other type of rtsp server, then you might not need a webpage at all, just use multiple VLC instances side-by-side on a client PC, or get a free and/or opensource security camera monitoring software (most do support RTSP protocol).

I'm using motion with raspbian. images are captured on the device and the streams are good

It's streaming to an LCD inside a picture frame that i have set up as a 'kiosk', so no kb/mouse inputs. I just want it to boot, open the browser and cycle between the two streams with no user intervention.

It's basically a ghetto video intercom system (once i get a couple more echo dots)

If there's an OS/Software solution that will do this, I'm more than open to suggestions.

 

[silentbogo]

I'm using motion with raspbian. images are captured on the device and the streams are good

It's streaming to an LCD inside a picture frame that i have set up as a 'kiosk', so no kb/mouse inputs. I just want it to boot, open the browser and cycle between the two streams with no user intervention.

It's basically a ghetto video intercom system (once i get a couple more echo dots)

If there's an OS/Software solution that will do this, I'm more than open to suggestions.

video.php in motion does not contain any PHP code, so you can either edit that file on your host, or add another HTML/PHP file with whatever setup you need.

For example, if you want to switch between cameras once a second, all you need to do is replace the contents of video.php with following:

<html>
  <head><title>My IPcam manager</title></head>
  <body>
    <!-- Change the image size to whatever works better on your screen -->
    <img id="display" src="http://192.168.0.5:8081" width="640" height="480"/>
      <script>
        var camList = ["http://192.168.0.5:8081", "http://192.168.0.5:8082"];
        var camDisplay = documet.getElementById("display");
        var pos=0;
        function switchCamera(){
          if(++pos>camList.length) pos=0; // Reset camera ID when reached the end of list
          camDisplay.src = camList[pos];
        }
        setInterval("switchCamera", 1000); // Call camera switch once a second
      </script>
    </body>
</html>

That's a very-super-uber-basic slideshow code, which is usually included in JavaScript tutorials for beginners.
Try and see if it works.

 

[silkstone]

video.php in motion does not contain any PHP code, so you can either edit that file on your host, or add another HTML/PHP file with whatever setup you need.

For example, if you want to switch between cameras once a second, all you need to do is replace the contents of video.php with following:

<html>
  <head><title>My IPcam manager</title></head>
  <body>
    <!-- Change the image size to whatever works better on your screen -->
    <img id="display" src="http://192.168.0.5:8081" width="640" height="480"/>
      <script>
        var camList = ["http://192.168.0.5:8081", "http://192.168.0.5:8082"];
        var camDisplay = documet.getElementById("display");
        var pos=0;
        function switchCamera(){
          if(++pos>camList.length) pos=0; // Reset camera ID when reached the end of list
          camDisplay.src = camList[pos];
        }
        setInterval("switchCamera", 1000); // Call camera switch once a second
      </script>
    </body>
</html>

That's a very-super-uber-basic slideshow code, which is usually included in JavaScript tutorials for beginners.
Try and see if it works.

Unfortunately, it doesn't work It only shows the first camera when testing on my desktop.

Once I've got the 2 camera switching working, I'd like to also add a local .html file to the cycle. That way, I can get it to cycle between local .html (2 cameras side-by-side) - camera 1 - camera 2

 

[silentbogo]

My bad. I've made a few grammatical errors, like missing "n" in the "document", and passing function name in quotes.

Try now.

<html>
  <head><title>&#x1f640; My IPcam Uber manager v0.2 pre-pre-pre-alpha (available for preorder soon)</title></head>
  <body>
    <!-- Change the image size to whatever works better on your screen -->
    <img id="display" src="http://192.168.0.5:8081" width="640" height="480"/>
      <script>
        var camList = ["http://192.168.0.5:8081", "http://192.168.0.5:8081"];
        var camDisplay = document.getElementById("display");
        var pos=0;
        function switchCamera(){
          if(++pos>camList.length-1) pos=0; // Reset camera ID when reached the end of list
          camDisplay.src = camList[pos];
        }
        setInterval(switchCamera, 1000); // Call camera switch once a second
      </script>
    </body>
</html>

 

[silkstone]

Still doesn't cycle

Can it be tested by putting in different URLs for each camera, right? e.g. http://goo.gl for the first one and http://yahoo.co.uk for the second and the script should still switch the pages?