WebRTC Blueprints: Develop your very own media applications and services using WebRTC

The WebRTC Data API introduces the RTCDataChannel entity, which enables direct data connections between peers (just like for audio and video media channels), as we learned in Chapter 1, Developing a WebRTC Application.

Used in pair with RTCPeerConnection and utilizing the ICE framework, it makes it possible to link up direct data connections through firewalls and NATs. The Data API can be used to build powerful, low-latency applications such as games, remote desktops, desktop sharing, real-time private text chats, peer-to-peer file sharing, and torrents.

Data channels in WebRTC have built-in security. They are usually even faster than WebSocket connections (browser-to-server), because connections proceed between browsers without any point in the middle. Nevertheless, if you turn on the server, data will be transmitted via the server (consuming additional bandwidth on the server side). Also, connection establishment using data channels takes longer than when using...

In this book, we will use the HTML5 API to perform different tasks with JavaScript while developing our demo applications.

HTML5 itself is the latest standard for HTML and you can find its home page at http://www.w3.org/TR/html5/.

Its ancestor HTML 4.01 came in 1999, and the Internet has changed significantly since then. HTML5 was designed to deliver rich content without the need for additional plugins. The current version delivers everything, from animation to graphics, music to movies, and can also be used to build complicated web applications.

HTML5 is also designed to be cross-platform. It is designed to work irrespective of whether you are using a PC, a Tablet, a Smartphone, or a Smart TV.

We will use HTML5 while working on our WebRTC applications; in this chapter, we will start with the HTML5 File API.

Data channels help us to transmit data (files) between peers. Nevertheless, it doesn't provide any mechanism to read and write files. So, we need some mechanism to be able to read/write files.

For the purpose of filesystem access, we will use the HTML5 File API. It provides a standard way to interact with local files. Using this API, you can create and read files, create thumbnails for image files, save application preferences, and more. You can also verify on the client side; if a customer wants to upload the MIME type of file, you can restrict the uploading by the file size.

When reading files, we will use the FileReader object. It reads files asynchronously and provides the following four ways (methods) to read them:

WebRTC and its Data API are supported by major web browsers. Nevertheless, the WebRTC standard is not yet complete and web browsers can still behave in different ways.

Chrome versions lower than 31 uses the RTP data channel type by default; Firefox uses SCTP by default in all versions.

At the time of writing these lines, Chrome still has some traits in the data channel's implementation. They limit channel bandwidth, which can cause unexpected effects. To fix it, you can use a hack described in this chapter.

With some browsers (not having fully compliant support of the WebRTC API), you can face the unexpected behavior while transmitting big-sized files that cause weird errors.

Nevertheless, all these cases are temporary. You can check the current status of the data channel's implementation on the WebRTC home page at http://www.webrtc.org/home.

Also, you can check the browser's home page for more detailed information on supporting the WebRTC API for a particular browser's version...

The whole structure of our application will be the same as in the previous chapter.

We need to create a folder for the new application, for example, filesharing_app. Again, create a subfolder for the HTML/JavaScript part, for example, filesharing_app/www.

We still need a signaling server, and in this chapter we won't introduce any new functionality on the server side. So, you can take the signaling server from the previous chapter. It will work fine for the new application that we're going to develop. You can just copy the signaling server from my_rtc_project/apps/rtcserver and paste it to filesharing_app/apps/.

We will also need the WebRTC API JavaScript adapter that we developed in the previous chapter. The adapter library can be used from the previous chapter with no change, so we need not pay much attention to it in this chapter.

So, take the signaling server application and the myrtcadapter.js library from the application we developed in the previous chapter.

The client code of our new application is very similar to the previous application in some parts. Nevertheless, it will be significantly different in the core side, so we will rework it and discuss it in detail in this chapter.

As we did in the previous Chapter 1, Developing a WebRTC Application, we need an index.html page where we will implement the UI visible for customers and some additional JavaScript code to implement the client application. This can be done by performing the following steps:

Now we're ready to test our file-sharing application. This can be done by performing the following steps:

We developed a simple peer-to-peer file-sharing application using the WebRTC DataChannel API. Using it, two peers can establish a direct connection between each other and send files to each other. You can choose just one file to transmit or you can select a list of files and they will be transmitted one by one.

You also got a brief practical introduction to the HTML5 File API and learned how to use it to work with the filesystem from JavaScript.

In the next chapter, we will delve deeply into the WebRTC API and develop an application that will be able to stream a prerecorded peer-to-peer video. This application will also be able to share a desktop to the remote peer.