I’m going to start testing out live video streaming of open source projects. I’ve been a viewer on Twitch.tv for a while and have recently started checking out LiveCoding.tv.

To make it easy to find my stream, I figured I’d embed it directly on my WordPress blog.  While there are a few plugins that purport to do that through WordPress widgets or shortcodes, they each have a major limitation: they always showed up.  In my case, I only want the stream to show when I’m broadcasting, not waste time with a black box in the middle of the page.

I decided to dust off my PHP skills (which I haven’t touched in many years) and write my own plugin.  Thankfully, Twitch provides an intuitive, anonymous API and WordPress plugins are incredibly straightforward.

Figuring out when the broadcast is active

In order to figure out whether a Twitch channel is actively broadcasting, we can query the REST endpoint at https://api.twitch.tv/kraken/streams/{$channel} (in my case https://api.twitch.tv/kraken/streams/bertjohnsondotcom).

If “stream” is “null”, the channel is offline.  Otherwise, it has a JSON object describing the stream.

My plugin simply checks that value and if it’s online, shows the Twitch IFRAME.

Supporting HTTPS

The normal way to embed a stream is by creating an IFRAME with a source of http://www.twitch.tv/{$channel}/embed (http://www.twitch.tv/bertjohnsondotcom/embed in my case).  You’ll notice that’s over HTTP, but I use CloudFlare for SSL offloading to ensure all connections are performed over HTTPS.

By default, Twitch doesn’t support HTTPS streaming yet.  It’s been on the roadmap for a while, but any attempts to visit https://secure.twitch.tv are redirected back to the HTTP version.  When embedding the HTTP version of Twitch, you won’t see the content or even a warning on the HTTPS site in most browsers.  Instead, it will silently fail.

To work around that, I found an HTTPS Flash endpoint available on Justin.tv’s CDN (which was the precursor to Twitch.tv).  There’s a definite tradeoff, as requiring Flash means this won’t work on many browsers (including the vast majority of mobile platforms), but I consider that better than allowing non-encrypted traffic.

That Flash endpoint is available at https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.rfc07d37fc4eed1d17243b452dd3441665496e1e0.swf?channel={$channel} (https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.rfc07d37fc4eed1d17243b452dd3441665496e1e0.swf?channel=bertjohnsondotcom in my case).

Hopefully this is a temporary workaround and Twitch will support HTTPS everywhere soon.

Getting the plugin: WP Twitch

You can find source code for the WP Twitch plugin on GitHub at https://github.com/bertjohnson/WP-Twitch.  You can download the ZIP archive from https://github.com/bertjohnson/WP-Twitch/releases/download/1.0/wp-twitch.zip.

I’ve also submitted it to the WordPress plugin directory.  Since this is my first submission, it might take some time for review before it’s widely available.

It’s incredibly simplistic, but should meet most needs.  I’ve embedded it into my theme via shortcodes, but it works just as well as a widget.  Suggestions welcome.

The end result

Here’s a sample from my wife’s site, ToniJ.com:

WP-Twitch

When I first created OpaqueMail, I faced the difficult choice between S/MIME and PGP as the standard for encryption.

The advantages for S/MIME were:

  1. A lower barrier of entry due to supporting libraries pre-installed with Windows.
  2. Greater familiarity and ease of use for developers used to public key infrastructure.
  3. Lower complexity of managing, securing, and choosing keys.

S/MIME adoption has grown, partly thanks to the usability of OpaqueMail, but it remains prohibitively complex for many scenarios.

Email is being increasingly secured through PGP. I don’t have reliable data, but PGP seems to enjoy wider adoption and awareness from the general public. I’ve wanted to support both for a while now, but needed a good reason to embark on the PGP path.

A tipping point for me this month has been Facebook’s new support for publishing PGP keys.  Finally, there is a public, (largely) trusted database where users can share keys. Instead of the traditional “web of trust”, I expect key databases (like keybase.io) to foster increased adoption.

With that background, I’ve started adding PGP support to OpaqueMail, now available to test in the 2.2.0 release. For the first time, OpaqueMail now has a dependency on another open source library: BouncyCastle. PGP is far too complex to implement from scratch and thankfully BouncyCastle provides secure, high-performance, and complete libraries for cryptography. The Legion of the Bouncy Castle dates back to the 1990s and their code has been scrutinized by tens of thousands of developers.

OpaqueMail 2.2.0 features PGP decryption and signature verification only. Encryption and signature creation is planned for a future release.

Beyond that, I may start another project to streamline public key discovery from Facebook and other federated sources.

Now that your WordPress Multisite install is up and running in Azure using Project Nami, it’s time to set up daily backups.

WordPress Files

For your files (code, uploads, and other multimedia), it’s easy. Under your Web App settings, choose “Backup” and create a schedule. In my case, I went with daily backups (retained for 30 days), backed up in the same resource group in the same region. With about 1 GB of files, backups complete in under 10 minutes.

WordPress Database

Now what about the database? Normally, I’d just set up a linked resource so the database would get backed up along with the website. Unfortunately, that doesn’t seem to be working in my subscription (and there are more than a dozen threads complaining about the same issue on TechNet).  When I select a database to be backed up with my WordPress site, it fails instantly with a vague error in the operations log, leaving me with a 0 MB backup.

As a backup, I figured I’d just set up a scheduled database backup that would be saved on the filesystem, which would be part of the files backup. Well, it turns out that most of the mature WordPress backup plugins (e.g., WP-DB-Backup, BackWPup, BackUpWordPress) don’t support multi-sites and/or don’t support Project Nami. So that option’s out.

Fortunately, Azure databases on the basic, standard, or premium tiers are automatically backed up hourly and provide 7, 14, or 35 days of retention. Using an S1 instance, I’m more than comfortable with a 14 day database backup window.

I recently launched a new intranet for a Fortune 500 client focused on internal communications and marketing awareness.

They use Tracx to mine and aggregate insights from social networks like Facebook and Twitter. Tracx enables multiple views for slicing and dicing tweets and analyzing sentiments of social posts. Imagine being able to query across all of your brands, segmented by country, age group, or gender.

Our goal was pretty simple in this case. We just wanted to display the ten most recent social posts (Facebook or Twitter) attached to a portfolio of nearly 100 brands.

Tracx provides a REST API, but no SDKs or guidance for integrating client-side. It seems like their API is targeted more towards .NET, Java, and open-source back-ends.

Here’s how I accomplished Tracx integration via JavaScript.

Getting Started: Your Key, Secret, and Query

In order to access Tracx’s OData endpoints, you’ll need an application key and secret.  Those will be 32-digit alphanumeric keys.

You can log into the Tracx API portal at https://api.tra.cx/. From there, find the appropriate query to run. That took me a bit of trial and error before I found the following parameters to pass to the “/activity/posts” endpoint:

 map["filters"] = '{"campaignID":XXXX, "topicIDs":[YYYYY], "dataType": 2, "spotlightsMode":[3], "startDate":"' + prevDate + '", "endDate":"' + nextDate + '"}';
 map["limit"] = 10;
 map["offset"] = 0;
 map["orderBy"] = 0;
 map["key"] = ZZZZZZ;

Calculating HMACs and OAuth

The Tracx API using hash-based message authentication codes (HMAC) for security. To calculate HMAC, SHA1, and help with OAuth requests, we can rely on the following two scripts (created by Netflix and hosted on Google Code):

When we’re assembling our parameters to pass in, we have to order and sign/hash them in a precise way.

Support IE8/9 and Providing a Shared Cache

In our case, we decided that making a web service call directly to Tracx was undesirable for two reasons:

  1. Tracx requires requests to be submitted using the “POST” verb, but older browsers including IE8 and IE9 only reliable support “GET” requests via XmlHttpRequest.
  2. Tracx service calls have a cost, for both performance and licensing. Instead of having many users make dynamic calls simultaneously, we’d be better off having service calls cached for everybody for a period of time.

In order to accomplish both, we implemented my .NET Proxy open source solution, hosted in Azure. .NET Proxy supports shared caching, configurable via the web.config. It also supports verb transformation; by passing in a “httpmethod” parameter on the “GET” query string with the value “POST”, it proxies its outbound calls as “POST”. That allows “GET”-only browsers to simulate “POST”s.

The source code below assumes .NET Proxy is being used as an intermediary.

Tracx in JavaScript: Source Code

Here’s the complete source code for embedding Tracx tweets and social posts on your website.

Make sure to include the sha1.js and oauth.js dependencies referenced above.

The “LoadSocial” function loads the data asynchronously. Once loaded, the second method outputs the posts to a DIV with ID “TracxContent”.

function LoadSocial(){
 if ($('#TracxContent').length > 0) {
 var tracxApiKey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
 var tracxApiSecret = "YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY";

 var baseUrl = "https://api.tra.cx/1/activity/posts";

 var lastWeek = new Date();
 lastWeek = new Date(lastWeek.setDate(lastWeek.getDate() - 7));
 var year = lastWeek.getYear();
 if (year < 1000)
 year += 1900;
 var prevDate = year + '-' + Pad(lastWeek.getMonth() + 1, 2) + '-' + Pad(lastWeek.getDate(), 2)
 var tomorrow = new Date();
 tomorrow = new Date(tomorrow.setDate(tomorrow.getDate() + 1));
 var year = tomorrow.getYear();
 if (year < 1000)
 year += 1900;
 var nextDate = year + '-' + Pad(tomorrow.getMonth() + 1, 2) + '-' + Pad(tomorrow.getDate(), 2)

 var map = {};
 map["filters"] = '{"campaignID":XXXX, "topicIDs":[YYYY], "dataType": 2, "spotlightsMode":[3], "startDate":"' + prevDate + '", "endDate":"' + nextDate + '"}';
 map["limit"] = 10;
 map["offset"] = 0;
 map["orderBy"] = 0;
 map["key"] = tracxApiKey;

 var message = {};
 message["method"] = "POST";
 message["action"] = baseUrl;
 message["parameters"] = map;

 var baseURL = OAuth.SignatureMethod.getBaseString(message);
 var parameters = "filters=" + encodeURIComponent(map["filters"]) + "&key=" + map["key"] + "&limit=" + map["limit"] + "&offset=" + map["offset"] + "&orderBy=" + map["orderBy"];
 var proxyUrl = "https://netproxy.mydomain.com/netproxy.aspx?" + encodeURIComponent(baseUrl);
 var signature = b64_hmac_sha1(tracxApiSecret + "&", baseURL);

 // Try up to 3 times.
 var attempts = 0;
 // Send a GET, but tell the proxy to forward as a POST.
 while (attempts < 3) {
 attempts++;
 $.ajax({
 url: proxyUrl + "&httpmethod=POST&httppostdata=" + encodeURIComponent(parameters + "&signature=" + encodeURIComponent(signature) + "="),
 success: function (e) {
 if (WriteTracx(e))
 attempts = 3;
 else {
 if (attempts == 3)
 $('#TracxContent').html(Terms["unable to load social data"]);
 }
 },
 error: function (e) {
 if (attempts == 3)
 $('#TracxContent').html(Terms["unable to load social data"]);
 },
 timeout: 60000
 });
 }
 }
}

function WriteTracx(res) {
 if (res.indexOf("while(1);") > -1) {
 var result = jQuery.parseJSON(res.replace("while(1);", "")).data;

 if (result.length > 0) {
 var socialFeed = "<ol>";

 var dynamHtml = '<ol>';

 var monthNames = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

 for (var i = 0; i < result.length; i++) {
 var author = result[i].author.name;
 var authorID = result[i].author.id;
 var title = result[i].title;
 var postDate = result[i].publishedDate.replace(' |', '');
 var postDateParts = postDate.split(' ');
 var postDateParts2 = postDateParts[0].split('-');
 var postDate = postDateParts2[1] + '-' + postDateParts2[0] + '-' + postDateParts2[2] + ' ' + postDateParts[1] + ' ' + postDateParts[2];
 var url = result[i].externalUrl;
 var externalID = result[i].externalID;

 var testDate = new Date(Date.parse(postDate));
 var postDateObject;
 try {
 postDateObject = parseDate(testDate, "mm-dd-yyyy hh:MM TT");
 }
 catch (e) {
 postDateObject = 'NaN';
 }

 if (postDateObject == 'NaN') {
 try {
 postDateObject = parseDate(postDate, "mm-dd-yyyy hh:MM TT");
 } catch (e) {
 postDateObject = 'NaN';
 }
 }

 var curDate = postDateObject.getDate();
 var curMonth = postDateObject.getMonth();
 var curYear = postDateObject.getFullYear();
 var postDateFormatted = monthNames[curMonth] + " " + curDate;

 var network = result[i].network.toLowerCase();
 switch (network) {
 case "twitter":
 var titleParts = title.split(' ');
 for (var j = 0; j < titleParts.length; j++) {
 if (titleParts[j].toLowerCase().substr(0, 4) == "http")
 titleParts[j] = "<a href=\"" + titleParts[j] + "\" target='_blank'>" + titleParts[j] + "</a>";
 else if (titleParts[j].toLowerCase().substr(0, 1) == "#")
 titleParts[j] = "<a href=\"https://twitter.com/hashtag/" + titleParts[j].substr(1) + "\" target='_blank'>" + titleParts[j] + "</a>"
 }
 title = titleParts.join(' ');

 var socialPost = "\t\t\t<li class='h-entry tweet with-expansion customisable-border' data-tweet-id='" + externalID + "'>\r\n" +
 "\t\t\t\t<div class='header'>\r\n" +
 "\t\t\t\t\t\t<div class='h-card p-author'>\r\n" +
 "\t\t\t\t\t\t\t<a class='u-url profile' href='https://twitter.com/" + author + "' target='_blank'>\r\n" +
 "\t\t\t\t\t\t\t\t<img class='twitter-pic' src='/images/" + network + "-" + author + ".png'>\r\n" +
 "\t\t\t\t\t\t\t\t<span class='full-name'>\r\n" +
 "\t\t\t\t\t\t\t\t\t<span class='p-name customisable-highlight'>" + author + "</span>\r\n" +
 "\t\t\t\t\t\t\t\t</span>\r\n" +
 "\t\t\t\t\t\t\t</a>\r\n" +
 "\t\t\t\t\t\t\t<span class='p-nickname' dir='ltr'>@" + author + "</span>\r\n" +
 "\t\t\t\t\t\t\t<span class='u-floatLeft'>&nbsp;·&nbsp;</span>\r\n" +
 "\t\t\t\t\t\t\t<a class='twitter-timestamp' href='" + url + "' target='_blank'><time pubdate='" + postDate + "' class='dt-updated' datetime='" + postDateFormatted + "' title='Time posted: " + postDateFormatted + "'>" + postDateFormatted + "</time></a>\r\n" +
 "\t\t\t\t\t\t</div>\r\n" +
 "\t\t\t\t\t</div>\r\n" +
 "\t\t\t\t\t<div class='twitter-content'>\r\n" +
 "\t\t\t\t\t\t<p class='twitter-c'>" + title + "</p>\r\n" +
 "\t\t\t\t\t\t<div class='detail-expander'></div>\r\n" +
 "\t\t\t\t\t</div>\r\n" +
 "\t\t\t\t\t<div class='footer customisable-border'>\r\n" +
 "\t\t\t\t\t<img src='/images/twitter.png'>\r\n" +
 "\t\t\t\t\t<ul class='tweet-actions' role='menu' aria-label='Tweet actions'>\r\n" +
 "\t\t\t\t\t\t<li><a href='#' onclick=\"TwitterReply('" + externalID + "','" + authorID + "')\" class='reply-action web-intent' title='Reply'><i class='ic-reply ic-mask'></i><b>" + Terms['Reply'] + "</b></a></li>\r\n" +
 "\t\t\t\t\t\t<li><a href='#' onclick=\"TwitterRetweet('" + externalID + "')\" class='retweet-action web-intent' title='Retweet'><i class='ic-retweet ic-mask'></i><b>" + Terms['Retweet'] + "</b></a></li>\r\n" +
 "\t\t\t\t\t\t<li><a href='#' onclick=\"TwitterFavorite('" + externalID + "')\" class='favorite-action web-intent' title='Favorite'><i class='ic-fav ic-mask'></i><b>" + Terms['Favorite'] + "</b></a></li>\r\n" +
 "\t\t\t\t\t</ul>\r\n" +
 "\t\t\t\t</div>\r\n" +
 "\t\t\t</li>";

 socialFeed += socialPost;
 break;
 case "facebookpage":
 var titleParts = title.split(' ');
 for (var j = 0; j < titleParts.length; j++) {
 if (titleParts[j].toLowerCase().substr(0, 4) == "http")
 titleParts[j] = "<a href=\"" + titleParts[j] + "\" target='_blank'>" + titleParts[j] + "</a>";
 else if (titleParts[j].toLowerCase().substr(0, 1) == "#")
 titleParts[j] = "<a href=\"https://twitter.com/hashtag/" + titleParts[j].substr(1) + "\" target='_blank'>" + titleParts[j] + "</a>"
 }
 title = titleParts.join(' ');

 var socialPost = "\t\t\t<li class='h-entry tweet with-expansion customisable-border' data-tweet-id='" + externalID + "'>\r\n" +
 "\t\t\t\t<div class='header'>\r\n" +
 "\t\t\t\t\t\t<div class='h-card p-author'>\r\n" +
 "\t\t\t\t\t\t\t<a class='u-url profile' href='https://twitter.com/" + author + "' target='_blank'>\r\n" +
 "\t\t\t\t\t\t\t\t<img class='twitter-pic' src='/images/facebook-" + author + ".png'>\r\n" +
 "\t\t\t\t\t\t\t\t<span class='full-name'>\r\n" +
 "\t\t\t\t\t\t\t\t\t<span class='p-name customisable-highlight'>" + author + "</span>\r\n" +
 "\t\t\t\t\t\t\t\t</span>\r\n" +
 "\t\t\t\t\t\t\t</a>\r\n" +
 "\t\t\t\t\t\t\t<span class='p-nickname' dir='ltr'>@" + author + "</span>\r\n" +
 "\t\t\t\t\t\t\t<span class='u-floatLeft'>&nbsp;·&nbsp;</span>\r\n" +
 "\t\t\t\t\t\t\t<a class='twitter-timestamp' href='" + url + "' target='_blank'><time pubdate='" + postDate + "' class='dt-updated' datetime='" + postDateFormatted + "' title='Time posted: " + postDateFormatted + "'>" + postDateFormatted + "</time></a>\r\n" +
 "\t\t\t\t\t\t</div>\r\n" +
 "\t\t\t\t\t</div>\r\n" +
 "\t\t\t\t\t<div class='twitter-content'>\r\n" +
 "\t\t\t\t\t\t<p class='twitter-c'>" + title + "</p>\r\n" +
 "\t\t\t\t\t\t<div class='detail-expander'></div>\r\n" +
 "\t\t\t\t\t</div>\r\n" +
 "\t\t\t\t\t<div class='footer customisable-border'>\r\n" +
 "\t\t\t\t\t<img src='/images/facebook.png'>\r\n" +
 "\t\t\t\t\t<ul class='tweet-actions' role='menu' aria-label='Tweet actions'>\r\n" +
 "\t\t\t\t\t\t<li><a href='#' onclick=\"FacebookShare('" + rfc3986EncodeURIComponent(url) + "', '', '" + rfc3986EncodeURIComponent(url) + "', '" + rfc3986EncodeURIComponent(title) + "')\" class='reply-action web-intent' title='Reply'><i class='ic-reply ic-mask'></i><b>" + Terms["Share"] + "</b></a></li>\r\n" +
 "\t\t\t\t\t</ul>\r\n" +
 "\t\t\t\t</div>\r\n" +
 "\t\t\t</li>";

 socialFeed += socialPost;
 break;
 }
 }
 }
 else
 return false;

 $('#TracxContent').html(socialFeed);
 }
 else {
 return false;
 }

 return true;
}}