My challenge for the day was working on a 2 or 3-year-old WordPress website that had an embed of an outdoor webcam on its homepage. The webcam was critical to the community it belonged to as many people visit the website to check the weather, and randomly see loved ones or friends visiting the town.  The website was built using fusion and was pretty standard in terms of the template used + the page builder.

The webcam was displaying twice, and no longer auto-refreshing. I confirmed the router was allowing traffic through directly to the netcam’s ip address and the image was loading in a browser, but the image that was displayed on the website was over a week old. Something obviously broke. (This site had been injected with some malicious code as well, so fixing that was a part of the journey, but I’ll save that for later).

I noticed there was a very outdated plugin installed called “netcam” in wordpress. The plugin sourced a static JPG and set an auto refresh parameter so that the image would reload every few seconds. I imagine when the previous developer found the plugin they were surprised at the simplicity of the implementation. Unfortunately the plugin hadn’t been touched in over 3 years, and the repo clearly stated that the plugin had not been verified for a version of WP even close to what was running on the site. It was now broken in Gutenburg.

I needed a more robust solution that would add a webcam image to a WordPress page and not depend on a plugin.

The solution was quite simple!

First I created a new simple .html file with two lines of code. The first line was a “meta” refresh that set the page to refresh every 20 seconds, and the second line of code was an img src that embedded the image directly from the webcam.

It literally looked like this:

<meta http-equiv=”refresh” content=”20″>
<img src=”http://ip-address-of-camera/camera.jpg”>

I uploaded that file to the root of the public_html directory and confirmed that loaded correctly in my browsers + auto-refreshed the camera every 20 seconds.

Next up! Getting this injected into the homepage of the site.

I used an iframe (oh no!) and simply sourced in the .html file I created and uploaded above. I also needed to “wrap” the Iframe in a DIV so that I could apply some CSS to it later (I’ll explain in a bit). I did this by going into the fusion page builder, using a “code” block and adding the following:

<div class=”iframe-container”>
<iframe src=”/cam.html”></iframe>
</div>

If you’ve worked in HTML and remember the days of coding in notepad and then uploading files to Geocities like I do (ha!), you know that iframes aren’t the best user experience on mobile devices. In fact it sucks. It makes for a really poor user experience, so I needed to make the iframe more responsive.

Lastly, I added some CSS to the site’s primary style sheet to “style” that iframe-container div and make it more user friendly on mobile devices.

That looked like this:

.iframe-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

 

And that’s it! The webcam was now loading via a static html file with a meta fresh set to 20 seconds via an iframe on the wordpress page.  No more outdated plugins were needed, no more worries of a wordpress plugin breaking or the file not loading due to some WP glitch.

In summary, to add a webcam image to a wordpress page

  1. Create a new html file that sources the webcam’s image directly, sizes it and sets an auto refresh using a meta tag.
  2. Upload that file to your webserver.
  3. Use a “code” block in wordpress to source that html file via an iframe.
  4. Style the iframe with CSS to give a better user experience on mobile.

 

 

I need to shout out to David Walsh for his post on how to make an iframe responsive.  A quick google search prevented me from having to figure out the CSS from scratch!

If you aren’t interested in using an iframe to solve this problem, here’s a great article on how to do it with javascript. https://arstechnica.com/civis/viewtopic.php?t=772329