How to start hacking on palava

Diving into an unkown complex project is hard. We want to help you getting started with palava and to understand the different parts of the project.  We start out with an architectural overview, then dive into each component and explain its purpose.  At the end we list the prerequisits to start development.

Anatomy of palava

The palava project consists of multiple parts which are repositories on our Github account. For more information about the parts, see the readme files in the respective repositories.

palava-client

palava-client is a JavaScript library (actually written in CoffeeScript) allowing you to create video conferences with multiple participants. It offers an abstraction layer above WebRTC, workarounds for browser bugs and incompatibilities as well as standardized signaling using the palava protocol.

palava-machine

palava-machine is the server implementing the signaling used by the palava-client. It is implemented in ruby using EventMachine.

palava-portal

palava-portal is the web page running at palava.tv. You can also use it as an example on how to use the palava-client and base your own palava instance on it. It is written using CoffeeScript and AngularJS. The portal can be deployed as static files.

palava-hq

palava-hq is a Ruby on Rails app which receives newsletter subscriptions and feedback submitted from the palava-portal. You will propably not need this part of the project if you want to set up your own Palava instance.

palava-stats

palava-stats evaluates the anonymous statistics created by palava-machine. It also shows user feedback collected by palava-hq.

Prerequisites

The instructions are written for unix-like systems (Linux, OS X, *BDS, …).

First you have to install ruby. For example using rvm:

curl -L https://get.rvm.io | sudo bash -s stable rvm requirements rvm install 1.9.3 rvm use 1.9.3 --default

We make heavy use of bundler to handle the dependencies of the individual projects. To install it run

gem install bundler

The code is hosted on Github, so you will need git to check out the code. An account on Github will enable you to create tickets, fork the code and create pull requests.

Dev Setup

Let us get started by setting up everything you need to develop on palava. The steps below are aimed at deveolpers. If you want to provide a palava instance to end users please use the instructions from our last blog post.

The first thing we need is the signaling server:

git clone https://github.com:palavatv/palava-machine.git cd palava-machine bundle install

To run the palava-machine simply type:

bin/palava-machine

The palava-machine will now provide the signaling through a websocket on port 4233.

The next step is installing palava-portal:

git clone --recursive https://github.com:palavatv/palava-portal.git cd palava-portal bundle install

palava-portal also includes palava-client as a git submodule. You can find it at source/assets/js/palava.

To test the web application we have to compile the coffeescript code to JavaScript, merge and uglify files, insert some user defined variables like the port of the websocket used by palava-machine and so forth:

export PALAVA_RTC_ADDRESS="ws://localhost:4233/" bundle exec middleman server

This command will do all the things mentioned above and start a web server on port 4567 distributing the resulting files. It will update the files whenever you change the source code.

You are now the proud owner of your very own palava development setup!

Get in touch

Please clone, modify, test, play around with the code. Subscribe to our mailing list and join our jabber chat room at  palava.tv@conference.chaossource.net


Creative Commons Lizenzvertrag palava.tv

How to setup your own palava.tv on ubuntu

This is a step-by-step guide for setting up your own WebRTC Web Portal on an ubuntu 12.04 server.

1) Install required packages

sudo apt-get install python-software-properties git-core curl

2) Create a palava user

sudo adduser palava sudo su palava cd

3) Install Ruby

For example using rvm:

curl -L https://get.rvm.io | sudo bash -s stable rvm requirements rvm install 1.9.3 rvm use 1.9.3 --default

4) Checkout and build portal

Replace the domain with yours.

git clone --recursive https://github.com/palavatv/palava-portal.git cd palava-portal bundle --without development:test --deployment export PALAVA_BASE_ADDRESS="https://example.com" export PALAVA_RTC_ADDRESS="wss://example.com/info/machine" bundle exec middleman build

5) Install redis

You need at least version 2.6. You can get it like this:

sudo apt-add-repository -y ppa:rwky/redis sudo apt-get update sudo apt-get install redis-server

Edit in /etc/redis/redis.conf, comment in:

bind 127.0.0.1

Then restart the redis-server daemon:

sudo service redis-server restart

6) Install and setup the palava machine

gem install palava_machine

Create a new file at /etc/init.d/palava-machine with the folowing content:

Then start the new service:

sudo chmod +x /etc/init.d/palava-machine sudo service palava-machine start

7) Install and configure ngnix

sudo add-apt-repository ppa:nginx/stable sudo apt-get update sudo apt-get install nginx-full sudo touch /etc/nginx/sites-available/palava sudo ln -s /etc/nginx/sites-available/palava /etc/nginx/sites-enabled/palava

In /etc/nginx/sites-available/palava, put the folowing config and edit the marked spots:

sudo service nginx reload

8) Modify the portal

This is all you need to do to setup palava. You might now play around with the portal code and add your own logo and contact details. More on this in a future blog post.

Thank you, please support palava!

Please tell us about your experiences and problems you have working through this guide. You can give us private feedback here, open an issue on github or tweet @palavatv.


Creative Commons Lizenzvertrag palava.tv

Going Open Source Part 2: Client and Portal

As we have announced previously, we are open sourcing the client part of palava as well. Here it is:

Client. Our WebRTC client library. It is also on bower (bower install palava).

Portal. Our palava.tv single page application. It is an AngularJS app that shows how you can utilize the palava client library. We have also released an auxilary Rails-API app for non-WebRTC related server functionality of palava.tv and integration testing.

Now go play with the code! Give us feedback! Host your own palava!

Best,
the palava team.

Going Open Source Part 1: Palava Machine

We at palava believe that WebRTC is a very promising technology with the potential to change the shape of the web. We built palava to get an impression of how well this technology already works. The platform was launched back in May and we collected a lot of encouraging feedback. We also discussed how to take palava further with the following result:

palava is supposed to be a simple and free platform for decentralized and secure communication. Nevertheless, there is still a (centralized) server component (“signaling”) that manages who wants to talk to whom and which kind of media to exchange. This means, in some way, most webrtc application will be centralized and you have to trust the provider (e.g. us) that we do not save any meta data of how you are using the service.

Open Source

This is one of the reasons, why we are open sourcing palava and all our webrtc libraries. It enables you to host your own video communication platform. We will continue to provide an instance at palava.tv and are currently founding a non-profit organization that will run the infrastructure for palava. More information our plans regarding the non-profit in a future blog post.

We have begun open sourcing our stack with an essential part of webrtc infrastructures: The signaling. We have built our palava signaling component using the Ruby programming language and the Redis key-value store. It is called PalavaMachine and you can find it on github.

Within the next weeks, we will also relase our JavaScript client library and the web application code. Happy hacking and mail us for questions!

Best,
the palava team.

PS: Jan & Marius are building a new WebRTC service called signaling.io. If you do web development and plan to use WebRTC in a future project, you might want to get notified when the service launches!

8 Creative Uses of WebRTC

WebRTC is not limited to video communication websites (like palava), but can be used for a whole variety of applications. Here’s a collection of our favorite projects and demos so far:

1) Collaborative Browsing

As a website operator, you can include the TowTruck library (by Mozilla) to add collaborative features to your website. This includes for example shared cursors, seeing what others are typing and voice communication. The github project already has more than 900 watchers and is very active!

2) Distributed Content Delivery Networks

PeerCDN and SwarmCDN are projects aiming to distribute content delivery. Instead of having to care about decentralizing your CDN server infrastructure, it makes totally sense to just fetch the content from a user nearby!

3) Gaming

Mozilla is working on Banana Bread, which is a port of the first person shooter Cube 2: Sauerbraten. They are utilizing emscripten to translate the C++ code to JavaScript and replace OpenGL with WebGL. It uses WebRTC to provide multiplayer capabilities via the p2p library.

The PeerGaming project tries to provide a general framework for web-based multiplayer games.

The official Chromium Blog demonstrates data channels in a little game called cubeslam.

4) File Sharing

Drop a file on sharefest.me and send your friends the link to share it. Works like a charm! These days seem to be finally over!

5) Code Reviews

Codassium could actually push remote code reviews to the next level! Tsahi Levent-Levi interviewed the creators.

6) Responsive Font Sizes

This demo shows a very useful example of how you can use getUserMedia without actually showing the video stream.

7) New kinds of User Interfaces with getUserMedia

soundstep built a demo (Chrome only) that lets you play Xylophone, using only your webcam to control it.

This snake implementation (Chrome only) uses the position of your head to control the snake. It uses the headtrackr library to accomplish this.

8) “Game With A Purpose”

In WikiGolf (Chrome only), two players try to find the shortest connection between two random wikipedia articles. The creators hope to “solve difficult problems in Artificial Intelligence” with the resulting data. The game was built using the PeerJS library.


Creative Commons Lizenzvertrag Jan Lelis (palava.tv)

How to Activate WebRTC on your Android Phone

WebRTC will change the way we communicate with each other, not only for desktop browsers, but for mobile applications as well.

Although, Apple currently does not support WebRTC, there might be ways to use WebRTC on iDevices.

However, the situation on Android phones is much better: Both, Chrome Mobile and Firefox Mobile, already offer experimental support for WebRTC. Although palava is not yet optimized for mobile platforms, it is already working!

Here is how it is done in Chrome and Firefox, using a Galaxy S3. Please note that this far from stable!

Activate WebRTC support in Chrome for Mobile

You can use Chrome to test your device’s WebRTC capabilities. If it is not yet installed, you will need to get it from the Google Play store. Tap the Chrome icon to get started.

chrome icon blank chrome

Go to about:flags

Now type about:flags in your address bar.

type about flags about flags intro

Scroll down to “Enable WebRTC” and enable it

You will see a huge list of experimental settings. Scroll down to WebRTC and tap on “Enable”.

scroll down about flags webrtc flag set

Test it on a website that supports WebRTC

That’s it! After you have restarted Chrome, you can test the WebRTC functionality on palava. Go to palava.tv/test to join a test conference.

type-palava-tv user-media-selection

Last step is to allow access to your device’s media then you are in the channel. Send the link to others to invite them to the conference.

allow-user-media done

Try Firefox Aurora for Mobile with WebRTC support

Firefox has no built-in support for WebRTC, yet. You have to install a preview version called Aurora from the Mozilla website. Eventually, WebRTC will be supported in Firefox Beta, which is directly installable from the Google Play store.

Activate the “Unknown sources” setting

You have to activate the “Unknown sources” setting in order to install the Firefox preview version (Aurora). Go to “Settings” application of your phone and make sure that it is allowed to install apps that are not available in the Play store.

go to settings find unknown sources

Read the warning and confirm it.

understand and confirm unknown sources allowed

Download Aurora from the Mozilla website

Now, navigate to the Mozilla Aurora website in your phone’s web browser.

type mozilla aurora select mobile aurora

Tap the download button and wait for it to finish. Depending on the browser you are using to download Aurora, you have to start the installation process differently. In Firefox Mobile you can simply open the notification area (swipe down the top bar), wait for the download to finish and tap the notification to start the installation.

tap download tap notification

Install Aurora

Start installation as shown on the screenshots.

use package manager accept permissions

After installation has finished, start Aurora.

wait for install install complete

Go to about:config

Type about:config in the address bar.

blank aurora type about config

Toggle media.peerconnection.enabled to true

Enter peerconnection in the search dialog. Then scroll down to media.peerconnection.enabled and toggle it to true.

search for peerconnection enable peerconnection

Test it on a website that supports WebRTC

That’s it! You can now test the WebRTC functionality on palava. Go to palava.tv/test to join a test conference.

type-palava-tv user-media-selection

Last step is to allow access to your device’s media then you are in the channel. It currently looks odd, but this will hopefully be fixed soon. Send the link to others to invite them to the conference.

allow-user-media done

Optional: Deactivate the “Unknown sources” setting (step 1) for security reasons

More Platforms

This guide focuses on Android, but we are curios to see more mobile platforms support WebRTC. For questions, hints, and bug reports please drop us a line at contact@palava.tv or use the feedback form.


Creative Commons Lizenzvertrag Jan Lelis (palava.tv)

How to Build a WebRTC Architecture

palava is based on current web standards and uses the emerging WebRTC for its core video functionality. This article will help to explain how everything works together.

WebRTC

WebRTC is quite new, but it has the potential to change the way we think about the internet. From the beginning, the World Wide Web was based on client server communication. A client (e.g. your computer or mobile phone) contacts a server and uses its web pages and services.

With WebRTC, the client is now not only able to communicate with an always-running server but also with other clients. This paradigm is called peer-to-peer (P2P) and when interacting with other internet users directly (chatting, calling, file sharing, collaborative working), P2P communication is exactly what you want. Since the data is exchanged directly between you and the other participant via an encrypted channel, it never passes the server. This is good for the server operator because there is no need for expensive hardware. Even more importantly, this concept allows a high level of privacy and security for the user. We will not be able to see your video data (or any links you exchange)!

WebRTC is currently implemented in Googles Chrome and in Firefox 22 (release is planned for June 25, 2013 - but it is already available as Firefox Beta). The other browsers will, hopefully, follow soon.

General Architecture and Workflow

Even though none of the video data will ever pass a server, we still need some server software as an intermediary. Its role is to coordinate the peers.

Our central server acts as a simple messaging server. All the clients that join the same chat room can send messages to other peers in that room. We implemented the server part using Ruby-EventMachine and redis. The client parts are written in CoffeeScript using WebRTC and will be available as open source in the near future.

Let us have a look at the workflow of a palava session:

  1. A new user joins a room and gets a list of the existing clients.
  2. The other clients get notified of the new communication partner by the server and add it to their own internal client list. They create a PeerConnection object, later used as a handle for the direct communication, for the new user and add their local stream. The actual P2P connection is not yet established, it still needs to be negotiated.
  3. The new user tries to establish a peer connection to the other clients. He, in turn, creates a PeerConnection object for every client, adds his local stream returned by the getUserMedia function (usually originating from a webcam and a microphone) and sends the resulting SDP object (a session descriptor defining the support of media types and capabilities, see SDP protocol) to the corresponding client using the message server.
  4. Each contacted peer updates his PeerConnection object with the remote SDP object and responds by sending an answer with his own SDP object.
  5. The new user updates his PeerConnection objects with the received SDP. The connections are now established and everything else (e.g. NAT traversal via STUN or optionally TURN) is handled internally by the browsers WebRTC implementation
  6. Using the PeerConnection objects, we ask for the remote stream handles (the video and audio of our peer!) and once we connect the stream to an HTML5 video element, the users are able to see and hear each other!

Conclusion

As you can see, there is much to be excited about WebRTC. And the best: it is an open standard and not controlled by a single corporation! We love this and we are happy to be able to offer palava to you as a free service!

If you like palava, please help us: Use it, send us some feedback and tell all your friends about it!


Creative Commons Lizenzvertrag Marius Melzer (palava.tv)