1C-BitrixプラットフォームでWebRTCアプリケーションを作成する

Habrのオープンスペースでは、WebRTCテクノロジーに関する記事がますます公開されており、WebRTCテクノロジーの使用を開始する方法に関するいくつかの優れた記事が既に書かれています（例： one 、 two ）。



この記事では、WebRTCおよびBitrixテクノロジーを使用して、独自のマルチメディアWebアプリケーションを作成する方法を説明します。

テクノロジーについて少し

WebRTCテクノロジーは比較的最近登場し、2012年11月に最初のドラフトが発表されました。文字通り1年で、このテクノロジーは良好なレベルに達し、使用できるはずです。



このテクノロジーは、追加のプラグインをダウンロードしてインストールする必要なく、開発者にマルチメディアWebアプリケーション（ビデオ/オーディオコール）を作成する機会を提供します。

その目標は、任意のブラウザおよび任意のオペレーティングシステムで動作するリアルタイム通信用の単一のプラットフォームを構築することです。



最近では、サポートされているアプリケーションのリストは非常に小さく、Google Chromeという1つのブラウザーのみで構成されていました。

過去1年で、このリストは大幅に拡大し、ほとんどすべての最新ブラウザーがこのテクノロジーのサポートを開始しました。



現時点では、Mozilla Firefox 27以上およびWebKitベースのブラウザ-Google Chrome 29以上、Opera 18以上、Yandex.Browser 13以上です。

Safariが2014年2月に WebRTCワーキンググループに加わってすぐに、Safariがこのリストに載ることが望まれます。



残念ながら、MicrosoftはWebRTCを実装して独自のCU-RTC-Webテクノロジーを作成する予定はありませんが、多分彼らはテクノロジーを多かれ少なかれ互換にするでしょう。

Internet Explorerのユーザー向けに、Chromiumベースのデスクトップアプリケーションをリリースし、このテクノロジーのサポートなしでブラウザーのユーザーに提供することを提案します。



WebRTCテクノロジーの使用方法とデスクトップアプリケーションの動作については、1C-Bitrix Winter Partner Conferenceで講演しました 。レポートをオンラインで見るか、 ビデオをダウンロードできます。

WebRTCはどのように機能しますか？

実際、すべてが文字通り3つのポイントで非常に簡単に機能します。



1.ユーザーには、ビデオカメラとマイクの使用許可が求められます。

2.別のユーザー（機器の使用許可も与えた）と接続し、直接接続のコーデックとIPアドレスに関するデータを交換します。

3.ビデオを表示し、サウンドを再生します。







簡単ですか？ はい...ほとんど:)



WebRTCテクノロジーは、最初のユーザーバインディング用のツールを提供しません。この部分は自分で行う必要があります。この部分は「Signaling」または「Signaling Protocol」と呼ばれます。

シグナリングプロトコルとは何ですか？

Signaling ProtocolまたはSignaling（Signaling）とは、コマンドとデータの交換のための、ユーザー間の通信の編成を意味します。



最も単純なスキームでは、次のコマンドの処理を整理する必要があります。

1.招待-電話をかけるための招待（ユーザーが電話をかけて応答するかどうか）;

2. answer-通話に応答します。

3.拒否-通話をキャンセルします。

4.通話中-ユーザーは別の通話で通話中です。

5.準備完了-ユーザーはデータ交換の準備ができています。

6.シグナリング-データ交換。



上記の基本的なコマンドのみがリストされていますが、実際にはさらに多くのコマンドがあります。

-参加-既存の会話への接続。

-待機-ユーザーはオンラインで、回答を待ちます。

-waitTimeout-別のユーザーが回答を待たなかった。

-errorAccess-ユーザーに技術的な問題があります。

-再接続-ユーザーは接続を確立できませんでした。再接続が必要です。



コマンドを受け取ったときに何が起こるのか、どのメッセージが表示されるのか、ビジネスタスクのインターフェイスは何であるのかを決定します。

私はすべてを理解しました、アプリケーションを作成したい！

WebRTCを使用するには、これは承認された標準ではありませんが、ブラウザによって API がわずかに異なることを理解する必要があります。

また、シグナリング用のリアルタイムトランスポートを整理する方法、 NATをバイパスする方法を検討 し、それを機能させる方法に関する指示を読むことも検討する価値があります。



上記の行を読んだ後、おそらくWebRTCアプリケーションを作成することにうんざりし、ページをほぼ閉じました。







しかし、パニックは避けてください！ 製品にはすべてがすでに含まれています。



1.「プッシュ＆プル」モジュールとnginxサーバーのモジュール-nginx-push-stream-moduleに基づいて、リアルタイムシグナリングプロトコルを編成できます。これらの操作方法は、Bitrixのブログで詳しく説明されています（このオプションがあなたのための場合不幸なことに、Socket.ioなどの別の製品に簡単に置き換えることができます。



2. NATをバイパスするために、 turn.calls.bitrix24.comで製品のすべてのユーザーが利用できるクラウドサービスを作成しました 。



3.製品のコアに、APIとWebRTCのほとんどのロジックの不一致を隠す特別なライブラリcore_webrtcを追加しました（ライブラリはバージョン14.0.15以降の「メインモジュール」で利用可能です）。



そして最高の部分



4.すべてのロジックを実装する特別なコンポーネントを開発しました。これにより、アプリケーションをすばやく掘り下げて作成を開始できます（コンポーネントは、バージョン14.1.5以降のプッシュ＆プルモジュールで利用可能です）。

デモアプリケーションを起動する

バージョン14.1.5以降、 デモフォルダーは「プッシュアンドプル」モジュール（/ bitrix / modules / pull /）に登場しました。その中には2つの例があります。

1.「プッシュアンドプル」モジュールの使用例。

2. WebRTCの使用例;



私はちょうど2番目のものについて話したかっただけです：







開始するには、次の手順を実行します。

1. / bitrix / modules / pull / demo / webrtc / compontents /フォルダーからコンポーネントをコピーします。たとえば、here / bitrix / compontens / yourcompanyprefix /

2.ページ/ bitrix / modules / pull / demo / webrtc / html /をサイトのルートにコピーします。

3.プッシュ＆プルモジュールをキューサーバーと連携するように構成します。

4. 2人のユーザーを登録します。



これで、2人の異なるユーザーの下でこのページにアクセスし、お互いに電話をかけることができます！

最良のドキュメントはソースコードです。

demo_webrtc.js（コンポーネントにある）で使用される各関数の目的を簡単に説明し、残りはすべてソースコードから明確になることを望みます。



コンポーネントとその仕組みをよりよく理解するには、次の2つの記事を読んでください。これにより、操作性が向上します。

独自のJSライブラリの作成：JS、CSS、フレーズ、依存関係。

モジュール「プッシュ＆プル」での作業

---

この記事がお役に立てば幸いです。

ご質問がある場合は、コメントを記入してください。