Category Archives: Software

AstraNOS Intro

I have spent the past few days working on my blog, and creating a new YouTube Channel. Please check it out under

https://www.youtube.com/channel/UChKSZPbizKmySaWmkue8viQ/videos

There is fairly little contents yet since I just set everything up over there. However over the next couple of weeks / months I am planning in filling it with a lot of practical tutorials on JavaScript, C++, multi threaded programming and some neat projects.

The first video is all about AstraNOS, which is one of my fun side projects. I have used this as a way to help setting up my gear and getting the first video out. Looking at the result is showing though that it is still rough around the edges but I am planing in working on the production quality.

AstraNOS has a lot of features which I have not mentioned in the video. I would encourage you to sign up for a free account and discover what is all possible with it. Going forward I may use the framework to allow users to easily access all of my programming material, online books and courses from one convenient place online.

AstraNOS intro

The neat thing is that it has built-in communications capabilities which will allow me to interact with my audience directly.

In case you have not yet done so, please feel free to go over to https://www.AstraNOS.org and create your own account. I would also be happy to receive feedback on which tools or features you would like to see there next.

As I mentioned in the video, I am heavily using AstraNOS on a day-to-day basis and here is the screenshot of my current ‘desktop’AstraNOS

 

Rpi WebRTC Streamer to Android WebRTC streaming

In this article I will setup Android WebRTC streaming to RPI-WebRTC-Streamer running on my Raspberry PI Zero W, to talk to each other.

Here is the architecture of RPI-WebRTC-Streamer.

Now why do we use WebRTC instead of directly streaming audio/video through a socket from the Raspberry PI to the Android device ?

It is helpful to understand how WebRTC works under the hood and how a connection is established.

The magic in WebRTC is the probing of the connection to allow two clients to talk P2P ( Peer-to-Peer ), even if they are behind a firewall or using NAT. There are plenty of online resources devoted to this complex topic ( E.g. https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ )

The basic steps in establishing a WebRTC connection are:

  • Step 1: Signaling: both peers connect to a signaling server (using websockets over 80/443, comet, SIP,etc..) and exchange information (about their media capabilities, public IP:port pairs when they become available, etc.)
  • Step 2: Discovery: Devices connected to LAN or mobile networks are not aware of their public IP (and port) where they can be reached at so they use STUN servers located on the public Internet to discover their ip:port pair (ICE candidates). In the process they punch a hole through the NAT/router which is used in step3:
  • Step 3: P2P connection: once the ICE candidates are exchanged through the initial signaling channel each peer is aware of each other’s ip:port (and holes have been punched in NATs/routers) so a peer to peer UDP connection can be established.
  • Step 4: If a P2P connection can’t be established ( maybe through firewall rules or the usage of Symmetric NAT ) then TURN servers can be used, which will relay the data between the peers. Please note that this will require the TURN server to receive and send all video and audio and is the last resort in WebRTC.

Under normal circumstances you would establish the connection between two web-browser. However in this case I need to establish Android WebRTC streaming to the Raspberry PI Zero W. Fortunately we have the required tools and libraries available on both platforms and can take full advantage of this technology stack. This allows us to basically build a video conference similar to skype between the Raspberry PI and Android. As an aside, iOS can also handle WebRTC, which may be a project for later.

Android WebRTC Streaming:

  1. Lets first make sure you have the RPI WebRTC Streamer setup, as explained in my previous post.
  2. Then you have to install ADB onto your computer to be able to transfer the App to your Android phone.
  3. Connect your Android phone to your computer and make sure you have the developer option enabled
  4. Next get the source code for RPI WebRTC Streamer from github and install it onto your phone, like so.
    bash> git clone https://github.com/kclyu/rpi-webrtc-streamer.git
    bash> cd rpi-webrtc-streamer/misc
    bash> adb install AppRTCMobile.apk
    
  5. Next open the app on your Android phone
  6. Change settings of the Video encoder to H264 High
  7. Change the resolution to VGA(640 x 480)
  8. And then simply enter the IP address of your raspberry PI as the room number
Android WebRTC streaming in action
Android WebRTC streaming in action

Finally, here is the article from mpromonet if you ever feel like compiling rpi-webrtc-streamer https://www.raspberrypi.org/forums/viewtopic.php?t=186271.
You can even use docker containers to make things easier: https://hub.docker.com/r/mpromonet/webrtc-streamer/

As an aside, I found multiple Android app templates to use WebRTC

uv4l WebRTC vs rpi-webrtc-streamer

I have spent the past two days working with the uv4l driver to get WebRTC working. I eventually got everything to work with three major issues

  1. I could not get the transmitted quality to anything close to what I needed
  2. I could not get rid of the the watermark which was put over the video
  3. The complete CPU utilization for 640×480 was above 90% and caused issues.

Another slightly annoying issue was that I had to re-install Jessie after I found out that uv4l is currently not available for Raspbian stretch lite. I could only find the full version for Jessie, which requires at least a 8GB microSD card. And off I went to replace my 4GB microSD card.

On the positive side I installed rpi-webrtc-streamer from github and was able to look at the results in realtime right away.

Unlike uv4l, which is based off OpenWebRTC from Ericson, rpi-webrtc-streamer is based off the Native Code from www.WebRTC.org which seems to be a bit more responsive than uv4l.

Here are the steps I had to do to get things to work.

bash>  # First create a home for the code
bash>  mkdir utils && cd utils
bash>  git clone https://github.com/kclyu/rpi-webrtc-streamer.git

You can find the Android App under rpi-webrtc-streamer/misc/AppRTCMobile.apk
But first lets avoid the work and go straight to installing the software.

Go to https://github.com/kclyu/rpi-webrtc-streamer-deb and download the appropriate deb-package.

bash>  dpkg -i rws_xxx_armhf.deb
bash>  sudo systemctl start rws

Then simply point your browser at http://<IP Address>:8889/native-peerconnection/

Raspberry PI camera
Raspberry PI camera

I will be going through the setup and usage of the Android App which is part of rpi-webrtc-sstreamer in one of my next blog entries.

AstraNOS for the stars

So I have not written anything about AstraNOS, my web desktop, for a while. That was for a good reason, as I was busy doing a batch of other things the past months.

However I have never give up on it and I am still using it heavily all the time to store pics, ideas, notes, videos and other things.

Progress

I recently fixed my AWS instance and re-enabled Conference, my WebRTC based video conferencing tool. Also since I always have a multitude of windows open I added a virtual desktop feature to the mix.

 

The number of virtual desktops is currently hardcoded to 4 however I believe that this will be plenty. The current version of AstraNOS is now grown up enough to handle a lot of the everyday tasks. It provides a central place online to -feel-at-home.

Feel free to sign up for a free account <a href=”https://www.AstraNOS.org/virtual”>Here</a>, connect your DropBox account and link some youtube videos to your folders.

DyGraphs Pie Chart Plotter

DyGraphs is a decent Javascript library to plot time series data points.

DyGraphs plotter
DyGrpahs

I chose DyGraphs a long time ago mainly due to its small footprint of 123530 bytes for dygraph.2.0.0.min.js

One of the things it allows you to do now is to add a different plotter algorithm to plot data. One such example can be found on the demo page is that of a BarChart plotter. If you look at the code it is a fairly small addition.

One of the possible plots missing though is a PieChart. It happened that I needed a PieChart for my project and I did not want to switch to E.g. ChartJS [ Release 2.5.0 ] so I wrote my own little PieChart function for DyGraphs.

function pieChartPlotter ( e ) {
        var ctx  = e.drawingContext;
        var self = e.dygraph.user_attrs_.myCtx;
        var itm, nme, data = self._pieData;
        if ( ! data )  {
          var t, i, y, all, total = 0;
          data = {};
          all = e.allSeriesPoints; // array of array
          for ( t=0; t

The one thing you will see in this code is that I calculate the required PieChart data once and then check for its existance each time I enter this function. This is requried beause DyGraph does currently not call the plotter function in a context but rather in the global browser context ( I.e. the this object is the browser Window ).

So instead I ‘added’ ( read hacked ) myCtx to the dygraphs – plotter options to gain access to my local JavaScript object where I buffer the _pieData.

DyGraphs Pie Chart plotter
DyGraphs Pie Chart plotter

While this may not be the nicest pie chart around, it is a small, basic function which can be expanded on fairly easily.

Addendum: Here is how to use this code

    this._options  = {
      labels: ["Date","Count"],
      legend: 'always',
      title:  "  ",
      myCtx: this,
      animatedZooms: true,
      hideOverlayOnMouseOut: false,
      stackedGraph: false,
      clickCallback    : this.onGraphClicked,
      showRangeSelector: true,
      underlayCallback : this.highlightWeekend,
      legendFormatter  : this.legendFormatter,
      highlightSeriesOpts : {
        strokeWidth: 3,
        strokeBorderWidth: 1,
        highlightCircleSize: 5
      }
    };
    this._chart = new Dygraph ( dom, this._data.data, this._options );
    ...