electronical Brain

Dies ist eine alte Version des Dokuments!

Linux Webcam

live.jpg

webcam.sh

This script saves a fullsize image to /archiv named with current timestamp. At the same time a smaller image is saved to live.jpg for live view.

webcam.sh
#!/bin/bash
# Aufloesungen Logitech C270
# 1280 x 720 // 800 x 438 // 720 x 394
SAVEPATH="/var/www/webcam"
TIMESTAMP="$(date "+%s")"
 
#Save live image and archiv
fswebcam -v --title "my-azur.de" --timestamp "%Y-%m-%d %H:%M:%S (%Z)" -S 2 -r 1280x720 ${SAVEPATH}/archiv/${TIMESTAMP}.jpg --scale 720x394 ${SAVEPATH}/live_pre.jpg
 
#copy pre live image to real live image
cp ${SAVEPATH}/live_pre.jpg ${SAVEPATH}/live.jpg
 
#set rights
sudo chown www-data.users ${SAVEPATH}/archiv/${TIMESTAMP}.jpg
sudo chmod 774 ${SAVEPATH}/archiv/${TIMESTAMP}.jpg
 
#delete old archiv images, but kepp the last 1440 images
(ls -t ${SAVEPATH}/archiv/*.jpg |head -n 1440;ls ${SAVEPATH}/archiv/*.jpg)|sort|uniq -u|xargs rm

Crontab

Whe webcam script runs every minute from 8am to 6pm

Crontab
* 8-18 * * * /home/pi/webcam.sh

index.html

Does the browser magic

index.html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>Webcam</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  <style>    
  img { max-width: 100%; height: auto; }  
  p { margin-top: 0; }
  .hide { display: none; }  
  </style>
</head>
<body> 
<div class="page" id="wrapper">
  <h1>Webcam</h1>
  <p>by <a href="http://my-azur.de/" target="_blank">my-azur.de</a></p>
  <div class="live">
    <img src="live.jpg" alt="Live" title="Webcam Live" border="0" id="liveimage" />
    <p><small>Automatic reload every <span id="liveReloadTime">X</span> seconds</small></p>
  </div>  
  <h2>Timeline</h2>
  <div id="timeline"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var liveReloadTime = 5000 // reload live image every x second
  , count = 0 // counter for timeline
$(document).ready(function(){
  /* = Live
   * ----------------------------------------------------*/
  jQuery('#liveReloadTime').text(liveReloadTime/1000);
 
  setInterval(reloadLive,liveReloadTime);
  function reloadLive(){ // set (new) live image every x second
    var timestamp = new Date().getTime();
    //Query('#liveimage').attr('src', 'live.jpg?'+timestamp);
		//console.log('Live: reload: live.jpg?'+timestamp);
		jQuery('#liveimage').attr('src', 'live.jpg');
    console.log('Live: reload: live.jpg');
  }
 
  /* = Timeline
   * ----------------------------------------------------*/
 
  $.getJSON('archiv.php?callback=?', {
    n: '100'
  }, function(archiv) {
    console.log(archiv);
    addTimelineImage(archiv); // add first timeline image
    setInterval(function(){ addTimelineImage(archiv); },200); // on scroll add timeline image
  }); // END: getJSON    
 
  function addTimelineImage(archiv) {
     if(count < archiv.length && jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 500) {
         var img = jQuery('<img src="archiv/'+archiv[count]+'"/>');
         jQuery('#timeline').append(img);   
         count++;
     }
  }
 
}); // END jQuery.ready       
</script>
</body>
</html>

archiv.php

Returns a json encoded array with (n) last images of archiv/

archiv.php
<?
$path = "./archiv/";
 
$dh  = opendir($path);
while (false !== ($filename = readdir($dh))) {
  if (preg_match('&\.(jpg|jpeg|gif|png)$&is', $path.$filename)) {
    $archiv[] = $filename;
  }
}
natsort($archiv);
$archiv = array_reverse($archiv);
 
echo $_GET['callback']."(".json_encode($archiv).")";
pub/linux-webcam.1371203361.txt.gz · Zuletzt geändert: 2013/12/06 19:12 (Externe Bearbeitung)