• Hey Radek,

    I am struggeling with the following problem: The plugin uses the directory https://www.myurl.com/wp-content/uploads/webcam to get the picture. My webcam stores the pictures in https://www.myurl.com/webcam. How can I tell the plugin to grab the picture from that specific url?

    What I’ve done so far: I modified the file react-webcam.php like this:

    function init($atts) {
    
    	$atts = shortcode_atts(array(
    		REFRESHINT_ATTNAME => REFRESHINT_DEFAULT,
    		SUBDIR_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 = site_url();
    	$ajax_url = admin_url('admin-ajax.php');
    	$images_root_url = $upload_dir . '/' . WEBCAM_DIR . '/';
    	if ($atts[SUBDIR_ATTNAME]) {
    		$images_root_url .= $atts[SUBDIR_ATTNAME] . '/';
    	}
    	$initial_image_filename = get_last_filename($atts[SUBDIR_ATTNAME]);
    
    	return '
    		<div class="react-webcam"
    			data-ajax-url="' . $ajax_url . '"
    			data-images-root-url="' . $images_root_url . '"
    			data-subdir="' . $atts[SUBDIR_ATTNAME] . '"
    			data-initial-image-filename="' . $initial_image_filename . '"
    			data-refresh-interval="' . $atts[REFRESHINT_ATTNAME] . '">
    			<img src="' . $images_root_url . $initial_image_filename . '" />
    		</div>';
    
    };

    and

    // Returns filename of the last webcam image.
    function get_last_filename($subdir) {
    
    	$upload_dir = site_url();
    	$webcam_dir = $upload_dir . '/' . WEBCAM_DIR . '/';
    
    	if ($subdir && preg_match('/[a-z0-9]/i', $subdir)) {
    		$webcam_dir .= $subdir . '/';
    	}
    
    	foreach (array_filter(glob($webcam_dir . '*'), 'is_file') as $path) {
    		$last_filename = basename($path);
    	}
    	return $last_filename;
    
    };

    But somehow this does not work. I always get a broken image link on the webcam page, where I inserted the shortcode. Any hint on what is wrong here?

    Thanks and cheers,
    Thom

    • This topic was modified 7 years, 6 months ago by Thomas Hitz.
Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Radek Matej

    (@nikdo)

    Hi Thomas,

    I don’t have time to fully investigate your code and suggest a proper solution. But after a quick review, it seems that in get_last_filename you use URL instead of filesystem path so glob function that operates with files cannot work.

    Radek

    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’);

    ?>

    Hi Radek!

    Thanks for making this plugin, it seems that years of trial and error is over for me!

    I have been trying to edit const WEBCAM_DIR = 'webcam3/FI9804W_00626E4E4229/snap'; and setting upload_url to $upload_dir = site_url(); to make the plugin get images from another folder in the site, but then the URL:s on my webpage gets a strange “h” in the ULR:s, as such: <img src="h/webcam3/FI9804W_00626E4E4229/snap/" />

    Any ideas where the h comes from?

    Any input appreciated!

    Edit: I tried the code in the initial post which is marked as resolved, and then I get no “h”, however still only a broken image link.

    • This reply was modified 7 years, 2 months ago by bpahe.
    Plugin Author Radek Matej

    (@nikdo)

    Hi,

    your tweak couldn’t really work because $upoad_dir should really contain wp_upload_dir(). On one of the next lines, I’m getting baseurl from the array returned by wp_upload_dir function. That’s probably the reason for the strange character.

    Why have you decided not to put your webcam images to the /wp-content/uploads/webcam/ directory? What’s the motivation? If there is a solid motivation, you need to further modify the source code.

    Radek

    Hi, I need help with this as well.
    My webcam is unable to upload to the wordpress site.
    I’ve tried to use other software to sync with /wp-content/uploads/webcam/.
    However, that doesn’t work securely.

    If I could direct the react webcam to a different url that would solve everything.

    Haukur

    Plugin Author Radek Matej

    (@nikdo)

    Hi Haukur,

    Having webcam images on another website is not possible with this plugin. It is a WordPress plugin, it operates only with files on filesystem available to WordPress.

    In your case, I recommend finding a hosting, that provides sftp or ssh to securely sync images with a webcam or another server.

    Radek

    Hi Radek, the reason for changing the code is that the cam I used (a Foscam) did not have the option to upload directly to /uploads. Since then I changed camera (to Axis) and now it works great. It would however be a great feature to be able to set the upload directory from WP backend/admin.
    It is a truly great plugin for WP that solves a lot of problems that I′ve had in the past.

    Plugin Author Radek Matej

    (@nikdo)

    The reason why there is no WP admin for this plugin is to keep it as simple as possible. First, webcam that cannot upload images elsewhere is pretty lame. Second, operating within wp-content/uploads directory is a good practice when dealing with files in WordPress plugin.

    Thanks for the words of praise. ?? It’s great to hear that this simple plugin actually helps somebody.

    Hi Radek,

    That’s what I’m trying to do now. Syncing between an ftp and the wordpress site.
    Thank you for a great plugin. It helps a lot.

    Best,
    Haukur

    Radek, @nikdo, Thanks for making this plugin. Truly appreciate all your hard work. I’m getting an error that I cannot seem to fix….

    Notice: Undefined variable: last_filename in /hermes/bosnacweb01/bosnacweb01ag/b1021/ipg.neye4ucom/ocpc/wp-content/plugins/react-webcam/react-webcam.php on line 60

    Like @peterhuckle above, the IP camera i’m using uploads images to this directory structure… webcam/00-18-ae-64-83-a0/MOTION/2018/01/30/23/MOTION_20180130230229.jpg … the file name changes with the date and time, and it creates new directorys for the year, month, day and hour.

    How can I adjust the php file to work with that directory structure and file names?

    Thanks!!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Direct Plugin to different Folder’ is closed to new replies.