How To Build Personal Web API Server Using Raspberry PI And Node.js

Introduction 

I have various streaming boxes (Apple TV, Roku, Fire TV, Nexus Player) because I prefer to watch video tutorials on TV rather than watching on my laptop. However, we don't have apps for all the sites that provide video tutorials. For example, MSDN channel9 doesn't have an app for any streaming boxes. So, I decided to use Roku sample video player app to play channel 9 videos. This app expects the video content to be defined in a certain XML format. So, I just have to build the Web APIs to return the XML output dynamically. I also prefer not to host the Web APIs on the internet. I just want to host it on my home network. So, I need a web server that will always be on so, I decided to use my existing Raspberry PI 3 as a web server.

Setup and Creating Web API

I initially thought of using .NET Core on Windows IoT but later, decided to use Raspian OS and NodeJS because I wanted to try NodeJS with some real-world applications.

Setting up Raspian OS on Raspberry PI was pretty simple. I just followed this excellent article on how to setup Raspian on Raspberry PI. Also, I configured the remote connection and shared the work folder to deploy the files so I no longer needed my Raspberry PI connected to my TV. I just placed the Raspberry PI along with my other stream boxes and connected through my laptop using the remote desktop.

I started the NodeJS Web API with the following Node packages to parse the Channel 9 feeds.

• Express
• Cheerio
• XMLBuilder

Express is one of the most famous Node.js web application frameworks to create Web APIs quickly and easily. Cheerio is used for parsing the DOM elements. XMLBuilder is used to construct the XML output in an easy way.

To start with, I created the web server with routing as follows,

var express = require('express')
  , app = express()
  , server = require('http').createServer(app)
  , path = require('path')

 var parser = require('./lib/parser');

 app.set('port', 4567);
 app.use(express.static(path.join(__dirname, 'public')));

 //Routes
 app.get('/', function (req, res) {
  res.sendFile(__dirname + '/public/index.html');
 });

 app.get('/Ch9', function (req, res) {
  parser.Ch9(function (result) {
   res.set('Content-Type', 'text/xml')
   res.send(200, result)
  })
 });

 app.get('/Ch9/:topic/List', function (req, res) {
  var topic = req.params.topic;
  parser.Ch9List(topic, function (result) {
   res.set('Content-Type', 'text/xml')
   res.send(200, result)
  });
 });

 app.get('/Ch9/:topic/:title/View', function (req, res) {
  var topic = req.params.topic;
  var title = req.params.title;
  parser.Ch9View(topic, title, function (result) {
   res.set('Content-Type', 'text/xml')
   res.send(200, result)
  });
 });

I created the parser library class and added the following code to parse the Channel 9 RSS content to fetch the video URLs.

const topicLists = ["Shows", "Events", "Series", "Blogs"];
 const ch9BaseURL = "http://channel9.msdn.com/Browse/";
 exports.Ch9 = function (callback) {
   var xml = builder.create('categories');
   var cIndex;
   for (cIndex in topicLists) {
     var category = xml.ele("category");
     category.att("title", topicLists[cIndex]);
     category.att("description", topicLists[cIndex]);

     var catLeaf = category.ele("categoryLeaf");
     catLeaf.att("title", topicLists[cIndex]);
     catLeaf.att("description", topicLists[cIndex]);
     catLeaf.att("feed", appBaseURL + "Ch9/" + topicLists[cIndex] + "/List/");
   }
   xml.end({ pretty: true });
   callback(xml.toString());
 }

 exports.Ch9List = function (topic, callback) {
   var xml;
   request(ch9BaseURL + topic + '/rss?sort=recent', function (error, response, html) {
     if (!error && response.statusCode == 200) {
       var $ = cheerio.load(html, { ignoreWhitespace: true, xmlMode: true });
       xml = builder.create('categories');
       var currIndex = 0;
       $('item').each(function (i, element) {
         var category = xml.ele("category");
         category.att("title", $(element).find('title').text());
         category.att("description", $(element).find('description').text());

         var catLeaf = category.ele("categoryLeaf");
         catLeaf.att("title", $(element).find('title').text());
         catLeaf.att("description", $(element).find('description').text());
         catLeaf.att("feed", appBaseURL + "Ch9/" + topic + "/" + encodeURIComponent($(element).find('title').text()) + "/View/");
         currIndex++;
       });

       xml.end({ pretty: true });
       callback(xml.toString());
     }
   });
 }

 exports.Ch9View = function (topic, title, callback) {
   var xml;
   request(ch9BaseURL + topic + '/rss?sort=recent', function (error, response, html) {
     if (!error && response.statusCode == 200) {
       var $ = cheerio.load(html, { ignoreWhitespace: true, xmlMode: true });
       var curElement = $('item').filter(function (i, el) {
         return $(this).find('title').text() === title;
       });
       var feedURL = $(curElement).find('c9\\:feed').text();
       if (!feedURL)
         feedURL = $(curElement).find('c9\\:feed').text() + "/Rss";

       request(feedURL, function (error, response, html) {
         var $ = cheerio.load(html, { ignoreWhitespace: true, xmlMode: true });
         xml = builder.create('feed');
         var loopIndex = 0;
         $('item').each(function (i, element) {
           var url = $(element).find('media\\:content').filter(function (i, el) {
             return $(this).attr('url').includes("_high");
           }).attr("url");

           var item = xml.ele('item');
           item.att('sdImg', $(this).children('media\\:thumbnail').attr('url'));
           item.att('hdImg', $(this).children('media\\:thumbnail').attr('url'));
           item.att('thumbnailURL', $(this).children('media\\:thumbnail').attr('url'));
           item.ele('title', $(this).children('title').text());
           item.ele('contentId', loopIndex);
           item.ele('streamFormat', 'mp4');
           var media = item.ele('media');
           media.ele('streamUrl', url);
           media.ele('thumbnailURL', $(this).children('media\\:thumbnail').attr('url'));
           loopIndex++;
         });
         xml.end({ pretty: true });
         callback(xml.toString());
       });
     }
   });
 }

That's it. We have just implemented the web API using NodeJS with just a few lines of code. If I run my application using http://localhost:4567/ch9, it responds back with xml output.

The deployment is super easy too. Just copy the folder excluding Node_Modules folder. You don't have to deploy the node_modules folder. You can run the NPM Update command to get the node_modules folder from PI Server after deploying it to save some deployment time.

To run the App Server, just open the terminal from Raspian and run it using the following  Node APP.js command and your personal web server is ready to serve.

I have modified the UrlCategoryFeed in categoryFeed.brs in the Roku app before I deployed it.

Update : Roku recently updated their video channel sample app and the new app can be found here. You can find all my articles at https://jeevasubburaj.com

Happy Coding!!