Hi
I think the page refreshes but there is a new image file. I have been struggling to both stop the file system filling up with images and the refresh problem. The code below seems to work OK. I’m using a Wanscam webcam that creates a new image directory for each day, then creates a directory inside that called images into which the image files are ftp’d. I decided to add a new parameter to be able to specify the name of this subdirectory e.g. [reactwebcam refreshinterval=300 dir=wanscam imagedir=images] and then I find the latest image, clean up the old directories and images and copy the latest image to the webcam/dir directory with the name of the webcam and type of the original image. Hope this helps someone:
<?php
/*
Plugin Name: React Webcam
Version: 1.2.0
Author: Radek Matej
Description: Add auto-refreshing image from your webcam to any page.
*/
namespace ReactWebcam;
const WEBCAM_DIR = ‘webcam’;
const SUBDIR_ATTNAME = ‘dir’;
const IMAGEDIR_ATTNAME = ‘imagedir’;
const REFRESHINT_ATTNAME = ‘refreshinterval’;
const REFRESHINT_DEFAULT = 60; // seconds
function init($atts) {
$atts = shortcode_atts(array(
REFRESHINT_ATTNAME => REFRESHINT_DEFAULT,
SUBDIR_ATTNAME => NULL,
IMAGEDIR_ATTNAME => NULL
), $atts);
wp_register_script(‘react’, plugins_url(‘js/vendor/react.min.js’, __FILE__));
wp_enqueue_script(‘ReactWebcam_ActualImage’, plugins_url(‘js/ActualImage.js’, __FILE__), array(‘react’));
$upload_dir = wp_upload_dir();
$ajax_url = admin_url(‘admin-ajax.php’);
$images_root_url = $upload_dir[‘baseurl’] . ‘/’ . WEBCAM_DIR . ‘/’;
if ($atts[SUBDIR_ATTNAME]) {
$images_root_url .= $atts[SUBDIR_ATTNAME] . ‘/’;
}
$initial_image_filename = get_last_filename($atts[SUBDIR_ATTNAME],$atts[IMAGEDIR_ATTNAME]);
return ‘<div class=”react-webcam”
data-ajax-url=”‘ . $ajax_url . ‘”
data-images-root-url=”‘ . $images_root_url . ‘”
data-subdir=”‘ . $atts[SUBDIR_ATTNAME] . ‘”
data-imagedir=”‘ . $atts[IMAGEDIR_ATTNAME] . ‘”
data-initial-image-filename=”‘ . $initial_image_filename . ‘”
data-refresh-interval=”‘ . $atts[REFRESHINT_ATTNAME] . ‘”>
</div>’;
};
/*
Returns filename of the last webcam image. Modified by Peter Huckle this routine looks in the WordPress uploads directory for the webcam directory and inside this for subdirectories sorted by name, the last one is assumed to be the latest. It cleans up the webcam directory by deleting all but the latest subdirectory. It then looks into this latest subdirectory and deletes all but the latest image file which is then copied to the webcam directory and renamed with the name of this directory. This is to ensure that on auto display page refresh an image is always displayed.
*/
function get_last_filename($subdir,$imagedir) {
$upload_dir = wp_upload_dir();
$webcam_dir = $upload_dir[‘basedir’] . ‘/’ . WEBCAM_DIR . ‘/’;
if ($subdir && preg_match(‘/[a-z0-9]/i’, $subdir)) {
$webcam_dir .= $subdir . ‘/’;
}
$dirs = glob($webcam_dir . “/*”, GLOB_ONLYDIR);
if (count($dirs)){
foreach ($dirs as $path) {
$last_path = $path;
}
$webcam_foundsubdir = basename($last_path);
foreach ($dirs as $path) {
if ($path <> $last_path){
rrmdir($path);
}
}
}
if ($imagedir && preg_match(‘/[a-z0-9]/i’, $imagedir)) {
$webcam_foundsubdir .= “/” . $imagedir;
}
$files = glob($webcam_dir . “/” . $webcam_foundsubdir . “/*”);
if (count($files)){
foreach ($files as $file) {
if (is_file($file) && $array = getimagesize($file)){
$last_file = $file;
}
}
foreach ($files as $file) {
if (is_file($file)){
if ($file <> $last_file){
unlink($file);
}
}
}
$show_image_type = pathinfo($last_file, PATHINFO_EXTENSION);
if ($subdir) {
$show_image_name = $subdir . “.” . $show_image_type;
} else {
$show_image_name = WEBCAM_DIR . “.” . $show_image_type;
}
copy($last_file, $webcam_dir . $show_image_name);
return $show_image_name;
} else {
return “”;
}
}
/*
Recursively remove directories
*/
function rrmdir($dir) {
foreach (glob($dir . ‘/*’) as $file) {
if (is_dir($file)){
rrmdir($file);
} else {
unlink($file);
}
}
rmdir($dir);
}
/*
AJAX call handler to return last webcam image filename. $subdir is the directory inside webcamdir for use if you have multiple webcams. $imagedir is the directory inside the found directories within webcam dir. For example, some Wanscam cameras allow you to specify a directory name for the storage for image uploads but then they insert into this directories – one for each day, and inside these a directory called images and inside that the images themselves. For example, the directory structure for webcam1 would be something like uploads/webcam/webcam1/2017/05/28/images/
*/
function last_image() {
$subdir = $_GET[‘dir’];
$imagedir = $_GET[‘imagedir’];
echo get_last_filename($subdir,$imagedir);
wp_die();
}
add_action(‘wp_ajax_last_image’, ‘ReactWebcam\last_image’);
add_action(‘wp_ajax_nopriv_last_image’, ‘ReactWebcam\last_image’);
add_shortcode(‘reactwebcam’, ‘ReactWebcam\init’);
?>