Lightweight, Live Video in a Webpage with GStreamer and WebRTC

WebRTC is the hottest thing going right now, and allows you to receive live, secure video over RTP right to the browser. It’s videoconferencing without the need for any plugins or software (other than your browser). Better yet, as long as your audio/video is encoded correctly, it doesn’t have to be another person, but a song or movie in your own, private on-demand service.

Currently, Firefox, Chrome, and Opera are the browsers that support this. Unfortunately, you’ll have to shelf your love for Microsoft (who naturally vied for their own, alternative standard), for now.

There are a few different layers and components that are required in order for a developer to take advantage of this, however. This includes an ICE server (which wraps one or more STUN or TURN servers), a data connection to your webserver, whether it’s Ajax, WebSockets, SSE, or something else, properly encoded video (exclusively using Google’s VP8 codec), and properly encoded audio (e.g. Opus)… All of which is encrypted as SRTP (secure RTP).

Any time spent understanding this would be well-worth it for a lot of engineers. If you want to get started, the top five or six books in Amazon’s results (as of this time) are enjoyable reads. Currently, the most authoritative reference is “WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web“, which is written by two participants of the relevant W3C/IETF working groups.

However, if you decide that you want an easy-as-pie solution and no challenge whatsoever, try out the Janus WebRTC Gateway.

Janus

Janus is a C-based RTP bridge for WebRTC. The following are the components that you’ll need to implement:

  • RTP generator
  • Janus server
  • Webpage that displays the video using Janus’ relatively-simple javascript library
  • STUN/TURN server (this is optional during development, and there’s a default one configured).

For our example, we’ll do exactly what they’ve already provided the groundwork for:

  • Use the provided script to invoke GStreamer 1.0 to generate an audio and video test-pattern, encode it to RTP-wrapped VP8-encoded video and Opus-encoded audio, and send it via UDP to the IP/port that the Janus server will be listening to.
  • Use the default config and certificates provided in the Janus source-code to retransmit the RTP data as a WebRTC peer.
  • Use the provided test-webpage to engage the Janus server using the Janus Javascript library.

Yeah. It’s that simple.

Build

We’re using Ubuntu 14.04 LTS.

  1. Install the dependencies:
    $ sudo apt-get install libmicrohttpd-dev libjansson-dev libnice-dev \
        libssl-dev libsrtp-dev libsofia-sip-ua-dev libglib2.0-dev \
        libopus-dev libogg-dev libini-config-dev libcollection-dev \
        pkg-config gengetopt
    
  2. Clone the project:
    $ git clone git@github.com:meetecho/janus-gateway.git
    Cloning into 'janus-gateway'...
    remote: Reusing existing pack: 394, done.
    remote: Counting objects: 14, done.
    remote: Compressing objects: 100% (14/14), done.
    remote: Total 408 (delta 5), reused 0 (delta 0)
    Receiving objects: 100% (408/408), 733.31 KiB | 628.00 KiB/s, done.
    Resolving deltas: 100% (268/268), done.
    Checking connectivity... done.
    
  3. Build the project:
    $ cd janus-gateway
    $ ./install.sh
    

    This will display the help for the janus command upon success.

  4. Start GStreamer:
    $ cd plugins/streams/
    $ ./test_gstreamer_1.sh 
    Setting pipeline to PAUSED ...
    Pipeline is PREROLLING ...
    Redistribute latency...
    Redistribute latency...
    Pipeline is PREROLLED ...
    Setting pipeline to PLAYING ...
    New clock: GstSystemClock
    
  5. In another window, run the Janus command without any parameters. This will use the default janus.cfg config.
    $ ./janus
    
  6. Either point your webserver to the html/ directory, or dump its contents into an existing web-accessible directory.
  7. Use the webpage you just hooked-up to see the video:
    1. Click on the “Demos” menu at the top of the page.
    2. Select the “Streaming” item.
    3. Click on the “Start” button (to the right of the title).
    4. Under the “Streams list” selector, select “Opus/VP8 live stream coming from gstreamer (live)”.
    5. Click the “Watch or Listen” button.
    6. Watch in wonderment.
      Janus WebRTC Gateway Screenshot

The possibilities are endless with the presentational simplicity of WebRTC, and a simple means by which to harness it.

About these ads

One thought on “Lightweight, Live Video in a Webpage with GStreamer and WebRTC

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s