Web page on Raspberry Pi

Thread Starter

Man_in_UK

Joined May 13, 2008
192
Forgive me if this is not the right section for this question.
(Noob alert - never created a web page before)


I seek assistance.
I have setup a Raspberry Pi with a static I.P address and got it to run as a web server. I can browse to its 'It works' web page from any PC on the network. Is there a simple way to add code to this simple web page that will show me a JPG image taken from the Pi camera?

From the terminal I can type "raspistill -o image.jpg" to show an image but I do not know how to incorporate this into a html file.
 

theonewho

Joined Jul 9, 2015
17
So, you're running an Apache server on your raspi and you have a way to capture images from the camera.

One really easy way to make the image available on the apache server would be to create a cron job that will capture the image on some interval (i.e. - once per minute) and place it in the web root.

Capture the image
I would create a shell script that captures the image, I'll call it imgcapture.sh:
Bash:
#!/bin/bash
raspistill -o /var/www/html/img/webcam.jpg
Do it at a regular interval
Then create an entry in your cron table to run the thing on some interval by using the command crontab -e (format reference: http://www.adminschoice.com/crontab-quick-reference). To create a cron job that runs every minute add a line to the crontab similar to this one:
Code:
* * * * * /path/to/imgcapture.sh
You can only do things with 1 minute granularity with cron - I won't address a solution if you want to capture more frequently.

View the result
Now you can either access the image directly in your browser (i.e. - http://192.168.1.57/img/webcam.jpg), or you can create an HTML file and show the image on the page. To start to get fancy you can add a meta refresh to an HTML page to cause it to automatically reload the page every so often. Here is a simple example for how to do that:

HTML:
<html>
  <head>
      <meta http-equiv="refresh" content="30" />
  </head>
  <body>
      <img src="/img/webcam.jpg" />
  </body>
</html>
The content value is in seconds, so in the example above the page will reload itself 30 seconds after it is loaded.

Disclaimers
  • This is a very simple way to accomplish what you are trying to do and you can get just as fancy as you'd like with it.
  • I've never used raspistill so ymmv, but I set up something the same in all other ways a couple of years ago with my raspi using a common webcam and some other program to capture the image and it worked well enough for my purposes.
  • I've assumed that you have the common raspi user setup.
  • I chose to use the root crontab for this since it's easier than setting groups and permissions: sudo -i to get an interactive root shell.
    • When you're done just exit the root shell with exit.
    • I'd suggest doing everything else as the pi user and using sudo (i.e. - to create the web page: sudo nano mypage.html)
 
Top