How to Embed a Live Camera in WordPress

Miami Beach Kiteboarders Foundation live stream via Sensr.net

Miami Beach Kiteboarders Foundation live stream via Sensr.net

One popular feature we provide with Sensr.net is the ability to embed live streams into any website. At the left is a screenshot of the Miami Beach Kiteboarders Foundation website and their use of the Sensr.net embed widget.

If you have a camera on the Sensr.net site, its easy to do this with your camera. After you log in, hover the mouse over your name in the top right corner of the window. You’ll see a drop down menu named Widgets.

You can also just go to the link https://sensr.net/widgets.

Currently we support two kinds of embed widgets, one that shows the live stream for a single camera, like the Miami Beach camera shown above, and another one that shows a list of your public cameras. You can see both styles on the screenshots below.

Embed a single camera's live stream.

Embed a single camera’s live stream.

Embed a list of all your public cameras.

Embed a list of all your public cameras.

The code that gets generated for a public cameras widget will look something like this.

<script type="text/javascript" 
src="https://sensr.net/widgets/user_cameras/21675d5e49"></script>

The code that is generated for a live camera widget will look like this.

<script src="https://sensr.net/javascripts/swfobject.js" 
type="text/javascript"></script>
<script type="text/javascript" 
src="https://sensr.net/widgets/live_view/21676d5e49/40694">
</script>

 WordPress Embedding

 If you have access to the source code for your site, you can just drop the embed widget script code directly into the HTML page and it should work. However, WordPress doesn’t allow most users to just paste code like this into a post because it can lead to security issues.

Luckily you can create your own short code and put the embed code there. Thanks to WPBeginner for the nice WordPress shortcode tutorial. Log into WordPress and go to Appearance/Editor and then edit the functions.php file. You can create a new shortcode called [sensr] by adding lines like this:

function get_sensr($atts) {
return '<script src="https://sensr.net/javascripts/swfobject.js" 
type="text/javascript"></script>
<script type="text/javascript" 
src="https://sensr.net/widgets/live_view/8435abf934/39752">
</script>';
}

add_shortcode('sensr', 'get_sensr');

Now when you use the shortcode [sensr] you’ll see the embed widget in your post, here’s the MBKF live widget embedded here:

Customize Widget Size

If you want to change the size of the widget, simply add a width and height parameter to the end.  For the Miami Beach Kiteboarders Foundation they are using a 640×480 widget size so their URL looks like this:

_https://sensr.net/widgets/live_view/8435abf934/39752?width=640&height=480_

What about Custom Fields?

I tried using custom fields for this but it didn’t work. I’m guessing that this is also turned off for some reason on my WordPress configuration. I was able to create a custom field but when I used it, it didn’t work.

Next Steps

Eventually we should support the oEmbed standard to make this even easier.

Thanks!

Tip of the hat to Under My Hat for ways of escaping shortcodes.  Once I finally got the [sensr] shortocde working I couldn’t blog about it!