Embed IP camera stream into WordPress pages/posts

Standard
Share

[showCamera width=”300″]I was looking for a way to show my local IP network camera stream in my site (and my wife’s site). Sure, it was easy enough to find the necessary code on Google and embed in a post through the text editor, but I wanted something more.

I can’t expect my wife to write her posts without the Visual editor (which would have butchered the HTML required to show the stream), so I decided to convert the camera-generating HTML code to a PHP function and put it in our sites’ functions.php files. Why would I want to do this?

  1. Allows for repeated use throughout the site
  2. Allows for use with different camera streams
  3. Allows for use with different camera users
  4. Allows for easy styling of the rendered stream via CSS class values
  5. Allows for easy resizing of the displayed image
  6. Allows for easy embedding via a registered WordPress shortcode

I use the FOSCAM FI8904W for my outdoor surveillance needs. It’s a hardy bullet camera with IR features and overall I’ve been very pleased with the quality it produces, although hot spots do tend to get a bit washed out.

Anyway, here’s the code I put in my functions.php file. Because I specified default values for non-specified parameters, I can simply use the shortcode [showCamera] in a post or page and I get my desired videostream. Sweet!

Note that due to IE not accepting the videostream.cgi, I’m serving a static image from the camera and reloading it via javascript. It’s a wonky solution in my opinion, but at least it works ;).

// **************************************************** showCamera ****************************************************
// *                                                                                                                  *
// *      showCamera will display the video feed from an IP-based camera.  It accepts the following parameters:       *
// *      url - this is the url of the camera (http://dockcam.jkshay.com, for example)                                *
// *      port - this is the port on which the camera is listening                                                    *
// *      user - this is the username used to access the camera                                                       *
// *             I suggest creating a camera user with the username 'guest'                                           *
// *      password - this is the password for the user specified above                                                *
// *             I suggest creating a password 'guest' for the user specified above                                   *
// *      width - this is the width of the videostream                                                                *
// *      refresh - the number of milliseconds between image refreshes for IE                                         *
// *      class - a CSS class attribute applied to the videostream to facilitate styling via CSS                      *
// *                                                                                                                  *
// *     NOTE: The credentials necessary to view your camera WILL be available to anyone who views the page source    *
// *               DO NOT USE ADMINISTRATOR CREDENTIALS UNLESS YOU WANT PEOPLE TO MESS WITH YOUR CAMERA               *
// *                                                                                                                  *
// ********************************************************************************************************************

function showCamera($parameters)
{
// Define accepted parameters and convert to PHP variables

extract(shortcode_atts(array('url' => 'http://dockcam.jkshay.com', 'port' => '84', 'user' => 'guest', 'password' => 'guest', 'width' => '480', 'refresh' => '1000', 'class' => 'alignleft',), $parameters));

// Build string of HTML code to be returned by the function call
$results = "";

// IE is unable to accept the videostream.cgi viewing method, so we need to deliver an alternate viewing method
// We do this by introducing a javascript that will reload static images at a predefined rate

// Check if the user is using Internet Explorer
$results = $results."
<!--[if IE]>";

// Introduce javascript function to determine when to reload static image
$results = $results."
<script language='JavaScript' type='text/javascript'>
function reload()
{
   setTimeout('reloadImg(\"refresh\")',".$refresh.")
};";

// Introduce javascript function to reload the static image
$results = $results."
function reloadImg(id)
{
   var obj = document.getElementById(id);
   var date = new Date();
   obj.src = '".$url.":".$port."/snapshot.cgi?user=".$user."&pwd=".$password."&t=' + Math.floor(date.getTime()/1000);
}
</script>";

// Insert the HTML <img> tag to load the static image
$results = $results."
<img src='".$url.":".$port."/snapshot.cgi?user=".$user."&pwd=".$password."&t=' name='refresh' id='refresh' class=".$class." onload='reload(this)' onerror='reload(this)' width='".$width."'>";

// Close the 'User is using IE IF block'
$results = $results."
<![endif]-->";

// Check if the user is NOT using IE
$results = $results."
<![if !IE]>";

// Insert the HTML <img> tag to load the videostream
$results = $results."
<img src='".$url.":".$port."/videostream.cgi?user=".$user."&pwd=".$password."' class='".$class."' width='".$width."' alt='Live Feed'/>";

// Close the 'User is NOT using IE IF block'
$results = $results."
<![endif]>
";

// Return function results
return $results;
}

// Register this function with the WordPress framework as a shortcode
add_shortcode('showCamera', 'showCamera');
// ********************************************************************************************************************

If you implement this code on your site, be certain to change the default values in line #23 to match those of your camera. Also, implementing camera streams with this method requires the cameras to have their own externally available addresses. It’s actually quite easy to do, and for the nominal fee of a domain (I think I paid about $13 for jkshay.com), I can get all the subdomains of jkshay.com for free. That is to say, “dockcam.jkshay.com” didn’t cost any more money than having “jkshay.com”.

I configured dockcam.jkshay.com to resolve to my public IP address, then simply forwarded port 84 on my router to the private IP address of my camera. I configured my camera to listen on port 84, and that handles the external connection to my camera.

I also configured the DNS on my router to resolve dockcam.jkshay.com to the camera’s private IP address, and that handled the internal connection to my camera. Check out my post on configuring the Verizon Actiontec router for more detailed information regarding this configuration.

Sample uses of the new [showCamera] shortcode:

  • [showCamera] – shows the default camera at the default resolution – a width of 480px, a default CSS class value of “alignleft”, and the default IE refresh rate of 1 second (1000 milliseconds).
  • [showCamera width=”240″] – shows the default camera at the reduced resolution – a width of 240px, with the remaining default values applied.
  • [showCamera class=”alignright”] – shows the default camera with the “alignright” class attached for CSS styling purposes. This option is more useful when combined with a reduced width, such as
  • [showCamera width=”240″ class=”alignright”] – shows the default camera at a reduced width with the CSS class “alignright” attached.
  • [showCamera refresh=”500″] – shows the default camera at the default resolution, but with a reduced refresh rate of 500 milliseconds. This setting only applies to viewing in Internet Explorer.
  • [showCamera url=”http://othercameraurl” port=”80″ user=”visitor” password=”cookie”] – shows the camera found at “http://othercameraurl” on port 80 using the camera user with the username “visitor” and the password “cookie”. Default width, class, and refresh values would be applied.

To summarize, I added PHP code to my theme’s functions.php file to show the videostream of my network camera. I wrote the code to accept several parameters, allowing the function to be used for multiple cameras. I registered the function with the WordPress framework as a shortcode, and finally listed several examples of how to use the shortcode with parameters.

P.S. It has become evident that this may not work for all themes. For example, I tried the Esquire theme and saw that it didn’t work properly (I’m pretty sure my issue was with the article starting with the shortcode. Anyway, note that my current theme is a Writr Child theme, and it works here (in Chrome, that is).

I’ve also discovered that the IE-only code seems to break if a user is logged into the site. If they log out, the camera stream renders properly. I’m currently investigating this issue.

60 thoughts on “Embed IP camera stream into WordPress pages/posts

  1. I recently made a wordpress site and wanted to embed an ip camera. Thanks for the article. I hope to come back and find some more wordpress tips because I am really new to all of this. If you had any suggestions for http://www.thedopist.com, it would be greatly appreciated.

  2. Hi,

    I want to embed an ip cam to my site. But I am new on WP and cant do this. How can I create function.php and how can I embed to wordpress.
    Best Regards

    • We can start by figuring out the single camera implementation. Once we do that, it should be fairly easy to add a second (or however many extra) camera(s) to the mix.

    • Adding a second camera should be just a repetition of the code that added the first camera. Without knowing the specifics, I can’t offer much more help.

      Feel free to e-mail me at jkshay@jkshay.com if you’d like to keep the details of your particular setup private, and I’ll offer whatever assistance I can.

        • If you created a WordPress shortcode as described in this article, then you’d have 45 [showcamera] instances in your page. Be aware that the end result DOES allow the username/password to be viewable if somebody opts to view the page source, so you’ll want to use guest accounts on your cameras.

    • Internet Explorer is certainly an issue. Sadly, I’m still struggling to come up with a viable solution for users of IE. If you followed my article, I’m using JavaScript to serve repeated requests of a static image for IE users – which hardly results in a fluid appearance.

  3. Hi Jonathan,
    I have couple questions for you if you have the time. I am a member of a lawn bowling club in Seattle, WA. Our website is currently in Drupal and I am making a hard pitch to migrate our site over to WP. We have two ‘greens cams’ that are supposed to be to providing a stream image to our site- I do not know what type of cameras they are or really anything about the feed set up as it is. But part of my pitch to the board is that the WP site wd have a superior method of keeping this stream feature running. Your 300px stream above was loaded when I arrived to your page, while the 586×480 display on your wife’s site took aprox 2 minutes to load (Mac Chrome). I was wondering about thoughts on that? is it a size issue or is there something else at play? Would a sidebar widget location be able to tap the functions file code the same way a page/post wd?

    Thanks for your time.

    • Joy-

      When I first started my site, I started with Drupal – mainly because I was completely ignorant of WordPress as software I could host on my own. I incorrectly assumed WordPress meant I had to have a “jkshay.wordpress.com” type of URL. That being said, I find WordPress significantly easier to use, both as a content creator and as a site designer. In addition, their mobile app makes creating additional content a breeze – something I believe Drupal still lacks.

      I’m not sure what is causing the significant difference in camera stream load times between the two sites. The following factors *may* be coming into play:

      1. My wife’s site is housed on a different server than mine.
      2. My wife’s site is housed on a multi-domain server, while mine is the only domain on it’s server.
      3. (I don’t think this would affect it) My site is housed on a server that is on the same internal network as the camera providing the stream. I say this shouldn’t affect it as the camera stream-obtaining HTML served by the page simply tells your browser where to go to get the stream. Effectively, they should both respond at the same rate, as they’re both being served by the same camera (and therefore the same server). The server that houses my wife’s site is completely ignorant to where the stream comes from.

      My questions for you:
      1. What speed connection are you using to view the sites? It’s *possible* that the larger image size on my wife’s site would be an issue on a slower connection, but I haven’t really experienced any problems with it.
      2. Can you provide the URL for your drupal site? I may be able to sniff out the camera details and provide more information about how to connect to that camera. In addition, it’s possible I could even set up a temporary page on my site that displayed your camera stream for testing purposes.

      To answer your sidebar question – it shouldn’t be any problem to display a camera stream in the sidebar using the shortcode described in this article. In fact, while designing my wife’s site, we originally had the river dock camera stream displaying in her sidebar using this method.

      Be aware, also, that with the proper plug-ins, you can even have additional private camera streams made available on your site.

  4. I have added your code to functions.php, changed the camera info to that of my cam, but am seeing this:

    Fatal error: Call to undefined function add_shortcode() in … functions.php….

    Any ideas? Did a recent WP update change something?

  5. olivera

    Thank you very much, I think this is more than helpful. Can you please explain how to make the configurations for the camera server…I embedded the code in function.php, but when i used [showCamera] shortcode it only appears Livefeed on my site, without showing the picture. I think the problem is that I didn’t set up the configuration properly, now it uses port 80.
    Thank you very very much

    • I’m not too sure what might be causing your issue without seeing your code modified from mine above.

      Does your camera have a built-in web server that allows you to view the camera feed in a browser? Have you successfully browsed to your camera directly in your browser?

      If so, then send me a link to your website and (more importantly) a link directly to your camera. I’ll be happy to modify the function code above to work with your camera.

      Feel free to e-mail me at jkshay@jkshay.com and I’ll get back to you as soon as possible.

    • Glad it helped! If interested, I’ve got a slightly more robust version that accepts subdomain parameters. It’s really only beneficial if you have several cameras, all at subdomains of a primary domain.

      Let me know!

      • Thanks, yes I do have other cameras I could add. They all run off one domain though using different port numbers. Could you point me in the right direction to having a subdomain setup.

        • Assuming all your cameras are at the same URL but behind different ports, the existing code should work for you. Make sure you code your default values in the PHP code, then simply pass the port number as a parameter in the shortcode usage –> [ShowCamera port=”81″]…

          Let me know if that doesn’t work for you, and I’ll look further into it.

          • Thanks again for your time, so how I understand it then is to just add another duplicate line #23 with the only difference being the port# and usr/pwd. Can I add this right under line 23?

  6. No. You should only modify the script to get your first camera working. If all of your cameras use the same URL but different ports, define the URL in the PHP code you put in your functions.php file.

    It’s then in the implementation of this short code that you would pass alternate values for parameters.

    You can see in line #23 where we define the default values for parameters. In my example, the default port is 84, the default user is “guest” and the default password is “guest”.

    Assume you have two cameras – one at http://www.mydomain.com:83 with user “cam1GuestUser” and password “cam1GuestPassword” and one at http://www.mydomain.com:84 with user “cam2GuestUser” and password “cam2GuestPassword”.

    You would set the values in line #23 such that:
    ‘url’ => ‘http://www.mydomain.com’
    ‘port’ => ’83’
    ‘user’ => ‘cam1GuestUser’
    ‘password’ => ‘cam1GuestPassword’

    Then, to get camera #1 to appear in a post or page, you would simply insert the short code [showCamera].

    To get camera #2 to appear in a post or page, you simply need to pass the parameters with the short code that make this camera connection different from the default:

    [showCamera port=”84″ user=”cam2GuestUser” password=”cam2GuestPassword”]

    Let me know if you have any additional questions or need any assistance.

  7. Ed Barnard

    Hi Jonathan,

    First off Thank You so much for posting this code it has really helped me out a lot!! I have a question about embedding the camera, can you limit the time that a person can view the stream for example say I wanted to limit the time to 10 seconds and then redirect to another page is there a way to do that. thanks again 🙂

    Ed

    • NOTE: This comment is actually in reference to the Axis-brand specific code mentioned in this article. For the code for the Foscam brand cameras referenced in this article, please see additional comments below.

      Thanks, Ed! Glad to have helped!

      You can easily redirect after a number of milliseconds by adding a single line to the script.

      Simply change

      <script>
      var BaseURL = '".(((!isset($url) || trim($url) === '') ? $protocol."://".$subdomain.".".$domain : $url)).":".$port."/'; 
      

      to

      <script>
      setTimeout(function () {window.location.href='http://www.google.com';},10000);
      var BaseURL = '".(((!isset($url) || trim($url) === '') ? $protocol."://".$subdomain.".".$domain : $url)).":".$port."/'; 
      

      The added line #34 uses Javascript’s setTimeout function to force a redirect to http://www.google.com after 10,000 milliseconds (10 seconds).

      To change the duration before redirection, or the redirection URL, simply change these values in line #34.

      • Ed Barnard

        Hi Jonathan,

        Thanks for the quick reply! I feel like such an idiot right now I accidentally commented under the wrong post. This comment was for the Embed IP camera stream into WordPress pages/posts Posted on March 16, 2013. I am so sorry for the mistake.

        Cheers,
        Ed

        • No worries, Ed! I’ve taken the liberty of moving this comment thread to the appropriate post based upon your comment above.

          To clarify, the code I posted above is to be used with the Axis brand-specific code I posted about previously.

          To achieve a delayed redirection with the code posted in this article, we’ll follow the same idea, and use an inline javascript to redirect to a specific URL after a specific number of milliseconds.

          <![endif]>
          ";
          
          $results = $results."
          <script language='JavaScript' type='text/javascript'>
          setTimeout(function () {window.location.href='http://www.google.com';},10000);
          </script>";
          
          // Return function results
          return $results;
          

          Here, we’ve inserted lines #74-77 after we created the shortcode results variable ($results, the PHP output of the shortcode), but before we returned the results.

          Line #74 appends text to the $results variable. Line #75 inserts the code that begins a javascript. Line #76 places the call to the setTimeout function we referenced earlier. Line #77 closes the javascript, and finally line #80 returns the results of the $results variable.

  8. Ed Barnard

    Hey Jonathan,

    Happy 4th!!

    I was wondering if there is any way to make the stream full screen and add audio.

    Thank you for all of the help.

    Ed

    • Ed-

      Hope you had a wonderful holiday. Sorry it’s taken this long to respond.

      As mentioned in the original article I didn’t author the original code, which I believe did support audio transmission, although I’m not sure about full screen mode.

      I’ll have to locate the original code, then I’ll post back my findings.

  9. Ed

    Hey Jonathan,
    I was checking to see if you had any luck with the code. I have tried a million different ways and just can’t get full screen or the audio to work. Hope all is well.

    Ed

    • Ed-

      I haven’t even looked yet, sorry. I intend to get to it this weekend.

      One question, though: what brand/model(s) camera(s) are you programming for? That will determine which base source code I need to start with.

        • Ed-

          What is your overall goal with adding sound and full-screen viewing? Is cross-browser compatibility a concern? Also, what type of server is your site housed on (linux, Windows, etc).

          The camera I have supports a videostream.asf feed as well as the videostream.cgi feed. The nice thing about the .asf version of the feed is that it includes BOTH volume and the ability to go full-screen.

          You can check out your .asf stream by browsing to http://yourcameradomain:port/videostream.asf?&user=cameraUsername&pwd=cameraUserPassword

          However, there are two issues I have with using this in WordPress:
          1. It requires VLC to be installed
          2. It requires a header request to be sent, which must be declared prior to any html generation. Currently I’m trying to figure out how to add that in WordPress.

          Is the installation of VLC an issue? I guess what I’m asking is will this site be viewed by numerous different people who may not want/know how to install VLC, or is it just for your personal use and installing VLC one-time won’t be a big deal?

          If we can go the VLC route, all I’ll need to do is figure out how to send the header request. The benefit of going this route is (I believe) better compatibility with Internet Explorer.

          Let me know the answers to these questions, and maybe we can have a working version sometime soon.

          However, in order for the .asf feed to work we need to insert a “header” call in the page that will house the embedded file

          • Ed

            Hey Jonathan,

            First off thanks for the help with this embed I know you have put in work on this and I thank you for that. So my goal is to be able to load multiple camera streams into the website some with audio and some without. Also if I’m on a mobile device or tablet it would be nice to be able to use full screen. Cross browser is important because I use IE except on the iPhone or iPad. I use a Linux server. I don’t mind adding the VLC code on each page instead of using a short code or will each person that visits the site have to install software on their computer in order to view it. If there are multiple cameras will there be multiple header request when the site is opened? Could this take it longer to load or crash the site.

            Thanks again,
            Ed

          • Ed-

            I’m glad to help! Coding isn’t just my job – it’s also my hobby.

            The VLC requirement is on the viewing computer, not the server – so anybody using your site might need it installed. Obviously this isn’t a viable solution.

            I asked about your server OS just to know what options we might have available.

            I did finally locate an updated version of the original code I used to create this script. One advantage to this updated code is better IE support. I’ll see if I can’t get it working in WordPress; I’ll let you know what I find.

  10. Ed

    Hey Jonathan,

    I was just following up with you to see if you had any luck with the audio. I have tried using .asf but can’t seem to get the audio to work. I called foscam and they gave me multiple embed codes I can get the camera to work but none of them include audio without using the VLC method. This player is going to be the death of me :-).

    Thanks,
    Ed

    • Nothing yet. If I understand correctly, it’s only the videostream.cgi that carries the audio stream. Therefore, I believe the ONLY way to get audio to feed into IE is if we generate code that pushes the need for an ActiveX control download to the browser – much like you probably had to do the first time you browsed directly to your camera with IE.

      I’ve got some ideas about how to get that working, but it’s going to take a while. I haven’t forgotten about you – in fact, these are all things I’ve been wanting to accomplish (including a FLUID video stream in IE). It’s just a matter of finding the time to get to it 🙂

  11. Arik

    Hi

    Imbuilding a website i wordpress. I want to use a ip camera to due livestream on it and the users have to have different access levels. Is this possible with this code?

    What about sound? is there sound on the stream?

    I was trying to copy past the code. I don’t know so much about coding. But i only got a square with no info inside. Do you have i camera or know one that has that i can test the code on to se how it is?

    Hope you can help me 🙂

    Arik
    Denmark

    • Arik-

      There are two methods to obtain a video “stream” from the camera. One is by connecting to the videostream.cgi, the other by capturing numerous still images in sequence then assembling them together, much like a flip book or old-school animation.

      Obviously, if we’re viewing a video stream by capturing a bunch of still images and stringing them together, we won’t have any audio to accompany the video. Therefore, it is only through the videostream.cgi file that we can obtain the audio stream. This poses a problem for users of Internet Explorer, which won’t natively play a camera’s videostream.cgi.

      I’m not sure about the security level… I know my code as it is doesn’t support any kind of access control. Do you simply need to restrict certain users from gaining access to certain cameras? If so, and we can group a security group’s accessible cameras by security group, then we can just use WordPress security to restrict access.

      I’d also like to mention that (at least for the camera stream in the article above) I’m in the middle of a move, and therefore my cameras are currently out of commission. If you were pointing your code to my camera, then a blank square with “Live Stream” is what you should expect to see.

  12. Arik

    Thanks for the answer 🙂

    No i understand better when i see all the snapshot examples. These are the “animated” ones with no audio.

    And i can restrict users on the site with my plugin magic members.

    And yes i got the square with the text 🙂 So it looks like its working then.

    I have found a public ip camera on the web http://208.42.203.54:8588. This is also what my ip camera will look like. What do i have to change in your code to see this camera? Is it only line 23, and what with the port, user and password in this case? and is your code for videostream.cgi?

    Thanks

      • Arik

        Okay i tried to build the code. I tried both with password and user set to ” and *guest’

        And this code:

        // **************************************************** showAxisCamera ****************************************************
        // * *
        // * showAxisCamera will display the video feed from an IP-based Axis brand camera. It accepts the following parameters: *
        // * url – this is the full url of the camera (http://dockcam.jkshay.com, for example) *
        // * protocol – this is the protocol of the video stream (“http”, for example) *
        // * subdomain – the subdomain of the particular camera to display (“dockcam”, for example) *
        // * domain – the domain of the particular camera to display (“jkshay.com”, for example) *

        // * port – this is the port on which the camera is listening *
        // * sc_user – this is the username used to access the camera *
        // * I suggest creating a camera user with the username ‘guest’ *
        // * sc_password – this is the password for the user specified above *
        // * I suggest creating a password ‘guest’ for the user specified above *
        // * width – this is the width of the videostream *
        // * refresh – the number of milliseconds between image refreshes for IE *
        // * class – a CSS class attribute applied to the videostream to facilitate styling via CSS *
        // * *
        // * NOTE: The credentials necessary to view your camera WILL be available to anyone who views the page source *
        // * DO NOT USE ADMINISTRATOR CREDENTIALS UNLESS YOU WANT PEOPLE TO MESS WITH YOUR CAMERA *
        // * *
        // ********************************************************************************************************************
        function showAxisCamera($parameters)
        {
        extract(shortcode_atts(array(‘protocol’ => ‘http://208.42.203.54’, ‘subdomain’ => ‘dockcam’, ‘domain’ => ‘jkshay.com’, ‘port’ => ‘8588’, ‘url’ => ”, ‘sc_user’ => ‘guest’, ‘sc_password’ => ‘guest’, ‘width’ => ‘320’, ‘height’ => ‘240’, ‘refresh’ => ‘1000’, ‘class’ => ‘alignleft’,), $parameters));

        $sc_results = “”;
        // IE is unable to accept the videostream.cgi viewing method, so we need to deliver an alternate viewing method
        // We do this by introducing a javascript that will reload static images at a predefined rate

        $sc_results = $sc_results.”

        var BaseURL = ‘”.(((!isset($url) || trim($url) === ”) ? $protocol.”://”.$subdomain.”.”.$domain : $url)).”:”.$port.”/’;

        // DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
        // You may change these numbers, the effect will be a stretched or a shrunk image
        var DisplayWidth = ‘”.$width.”‘;
        var DisplayHeight = ‘”.$height.”‘;
        var CSSClass = ‘”.$class.”‘;

        // This is the path to the image generating file inside the camera itself
        var File = ‘axis-cgi/mjpg/video.cgi?resolution=320×240’;
        // No changes required below this point
        var output = ”;
        if ((navigator.appName == ‘Microsoft Internet Explorer’) &&
        (navigator.platform != ‘MacPPC’) && (navigator.platform != ‘Mac68k’))
        {
        // If Internet Explorer under Windows then use ActiveX
        output += ”;
        output += ”;
        output += ”;
        output += ”;
        output += ”;
        output += ”;
        output += ”;
        output += ‘Axis Media Control‘;
        output += ‘The AXIS Media Control, which enables you ‘;
        output += ‘to view live image streams in Microsoft Internet’;
        output += ‘ Explorer, could not be registered on your computer.’;
        output += ”;
        } else {
        // If not IE for Windows use the browser itself to display
        theDate = new Date();
        output = ”;
        }
        document.write(output);
        document.Player.ToolbarConfiguration = \”play,+snapshot,+fullscreen\”
        “;

        return $sc_results;
        }

        add_shortcode(‘showAxisCamera’, ‘showAxisCamera’);
        // *******************************************************

        Bit i only get a frame with the message “camera image” and a little blue square with a “?”

        Can you se what I’m doing wrong?

        Thanks

  13. Yulia

    On my opinion this is the best solution, but something wrong on my site and it doesnt work. Its so sad. Couldn`t you explain me something?

  14. Hi
    I prepared a WP site for a strong military disposed of, we are all volunteers to provide free, and we try to put it back after a drop of about 30 years, because it is useful for the community.
    I would like to include in a website page a web cam to control of the premises which have been chosen as the home of a colony of bats.
    I have a IP Camera Wanswiew NCM 621 W, but there may be the possibility of adding other 3 IP Camera. I would be glad to give me the information I need to work on how to do this.

    Thanks for your time.

  15. Leo

    Hi. thank you for your code. I have a question, when you have paste the code in function.php of the theme, in which mode after you can see the ip cam streaming on the site? In summary, once copied the code, what should I do to see the ip cam on my website? Thank you.

    • Leo, after you add the code to your functions.php file (which registers the shortcode with your site), you should simply be able to enter “[showCamera]” (without the quotes) in any content-editable area. Depending on how you changed the code to match your needs, you may need to pass additional parameters with your call to the showCamera shortcode.

      • Leo

        Hello , I’m sorry but I still can not understand , I do not have much knowledge of php and html . I put all the above code in the file functions.php . Then to see it in my theme , I went between the widgets , I added a text in the content sidebar and I just wrote [ showCamera ] inside, but I see nothing, only the text [showCamera] .

        • Leo, it sounds like you’ve done everything right, but I’m not sure what is happening to cause the camera not to render. I see now that my article is displaying the same behavior, which I suspect is due to my currently selected theme.

          Originally I was using CatchBox 2 when the article was written. If you feel up to it, you may want to change (temporarily) to that theme to see if the issue goes away. I’ve also seen some theme-related issues when the [showCamera] shortcode was used at the beginning of the post/page, instead of being embedded somewhere inside the text.

          Currently, my cameras are offline. I plan to try to get some up and running this weekend, and I’ll post back with updates when they occur.

  16. Pingback: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *