Web page on Raspberry Pi

Discussion in 'Programmer's Corner' started by Man_in_UK, Jul 8, 2015.

  1. Man_in_UK

    Thread Starter Senior Member

    May 13, 2008
    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.
  2. theonewho

    New Member

    Jul 9, 2015
    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:
    Code (Bash):
    2. #!/bin/bash
    3. 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 (Text):
    1. * * * * * /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. -, 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:

    Code (HTML5):
    2.   <head>
    3.       <meta http-equiv="refresh" content="30" />
    4.   </head>
    5.   <body>
    6.       <img src="/img/webcam.jpg" />
    7.   </body>
    8. </html>
    The content value is in seconds, so in the example above the page will reload itself 30 seconds after it is loaded.

    • 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)
    jrap likes this.