Creating your WebRTC application on the 1C-Bitrix platform

In the open spaces of Habr, articles about WebRTC technology are increasingly published , several good articles have already been written on how to get started with WebRTC technology (for example: one , two ).

In this article I want to tell how, using WebRTC and Bitrix technologies, to create my own multimedia web application.

A bit about technology

WebRTC technology appeared relatively recently, the first draft was presented in November 2012, and literally in a year the technology reached a good level and it can and should be used.

The technology offers developers the opportunity to create multimedia web applications (video / audio calls) without the need to download and install additional plugins.
Its goal is to build a single platform for real-time communications that will work in any browser and on any operating system.

More recently, the list of supported applications was very small and consisted of only one browser: Google Chrome.
Over the past year, this list has expanded significantly and almost all modern browsers have begun to support the technology.

At the moment it is: Mozilla Firefox 27+ and WebKit-based browsers - Google Chrome 29+, Opera 18+, Yandex.Browser 13+.
It is hoped that Safari should be on this list soon as the company joined the WebRTC working group in February 2014 .

Unfortunately, Microsoft does not plan to implement WebRTC and create their own CU-RTC-Web technology , but perhaps they will make their technology more or less compatible .
For users of Internet Explorer, we offer to release a desktop application based on Chromium and offer it to users of browsers without the support of this technology.

I talked about how we use WebRTC technologies and the work of a desktop application on1C-Bitrix Winter Partner Conference , you can watch my report online or download a video .

How does WebRTC work?

In fact, everything works very simply , literally three points.

1. The user is requested permission to use a video camera and microphone;
2. Connect with another user (who also gave permission to use the equipment), exchanging data with him about codecs and ip addresses for direct connection;
3. Show video and play sound;



Is it that simple? Yes ... almost :)

WebRTC technology does not provide tools for initial user binding, it is this part that you must do yourself, this part is called "Signaling" or "Signaling Protocol".

What is a signaling protocol?

Under the Signaling Protocol or Signaling (Signaling) means the organization of communication between users, for the exchange of commands and data.

In the simplest scheme, you need to organize the processing of the following commands:
1. invite - An invitation to call (the user calls you to answer or not);
2. answer - Answer the call;
3. decline - Cancel the call;
4. busy - The user is busy with another call;
5. ready - The user is ready for data exchange;
6. signaling - data exchange;

Only basic commands are indicated above, there can actually be more of them:
- join - connection to an existing conversation;
- wait - the user is online, wait for an answer;
- waitTimeout - another user did not wait for an answer;
- errorAccess - the user has technical problems;
- reconnect - the user could not establish a connection, reconnection is required;

What will happen when you receive a command, what messages will be displayed and what interface will be, you decide, for your business tasks.

I understood everything, I want to create an application!

To work with WebRTC, you need to understand that while this is not an approved standard , the API in different browsers varies slightly .
It is also worth thinking about how to organize realtime transport for signaling, think about how to bypass NAT and read instructions on how to make it work .

After reading the lines above, you most likely got sick of making a WebRTC application and almost closed the page



But put aside the panic! We already have everything in the product, see for yourself:

1. You can organize a real-time signaling protocol on the basis of our “Push & Pull” module and the module for the nginx server - nginx-push-stream-modulehow to work with them is described in detail in my blog on Bitrix (If this option does not suit you, you can easily replace it with another product, for example, Socket.io );

2. To bypass NAT, we created a cloud service that is available to all users of the product at turn.calls.bitrix24.com ;

3. In the core of the product, we have added a special library core_webrtc which will hide from you the discrepancy in the API and most of the logic of WebRTC (the library is available in the "Main module" starting from version 14.0.15);

and the best part

4. We have developed a special component that implements all the logic so that you can quickly delve into and start writing your application (the component is available in the Push & Pull module starting from version 14.1.5);

Launch a demo application

Starting from version 14.1.5, the “ demo” folder in the “Push & Pull” module (/ bitrix / modules / pull /) has two examples in it at the moment:
1. An example of working with the “Push & Pull” module;
2. An example of working with WebRTC;

I just wanted to talk about the second one:



To get started, do the following:
1. Copy the component from the / bitrix / modules / pull / demo / webrtc / compontents / folder, for example, here / bitrix / compontens / yourcompanyprefix /
2. Copy the / bitrix / modules / pull / demo / webrtc / html /, for example, to the root of your site;
3. Configure the Push & Pull module to work with the Queue Server;
4. Register two users;

That's it, now you can go to this page under two different users and start calling each other!

The best documentation is the source code.

I will briefly describe the purpose of each function that are used in demo_webrtc.js (located in the component), all the rest, I hope, will be clear from the source code.

To better understand the component and how it works, read these two articles, this will help you navigate easier:
Creating your own JS library: JS, CSS, Phrases, Dependencies.
Work with the module "Push & Pull"

---

I hope this article will be useful to you.
If you have any questions, write in the comments.