ローカルネットワーク用のビデオチャットを作成する、または2020年にWebRTCを習得する

よく知られているイベントを背景に、私の専門的な成長の一環として何もすることはありませんでした。私はWebRTCをマスターしようとしています。ご存知のように、学ぶための最良の方法は、少なくとも潜在的に有用なことをすることです。同時に、コーンの作成と詰め込みの共有交換の経験。



タスクとして、インターネットに接続しなくても、ローカルネットワーク内の2つの（これまでの）固定デバイスまたはモバイルデバイス間でオーディオおよびビデオ通話を可能にする簡単なアプリケーションを作成することが決定されました。このようなアプリケーションのインストールと初期構成は、高度なenikeyが問題なく処理し、ユーザーに電話をかける方法を示すことができるように十分に単純である必要があります。適切なスキルがあれば、設計と機能の面でわずかな改善を行うことができます。クライアントは、マルチメディア入出力デバイスを備え、適切なブラウザを実行できるデバイスである必要があります（FirefoxまたはChrome- 5月のテスト、バージョンのようです）。

それはどのように行われますか

ご存知のように、2人の加入者間の通信のためのWebRTCテクノロジーは、RTCPeerConnectionタイプのオブジェクトの使用を提案し、開発者の主なタスクは、発信者と着信者の間のテキスト情報（SDPオファー、SDP回答、ICE候補）の交換を整理することです。言い換えると、開発者は最初にブラウザJavaScript用のAPIを使用してテキストチャットを作成し、次にマルチメディア部分をそれにアタッチする必要があります-RTCPeerConnectionイベントとデータ受信を送信および処理するためのメソッド。



実装およびテキストチャットAPIのテクノロジの選択は、開発者に委ねられています。多くの人（特にRTCPeerConnectionの公式例ではMozilla）は、WebSocket APIと対応するサーバー（たとえば、Node.JS）を使用することを好みます。しかし、展開をできるだけ簡単にするという私たちのタスクを考慮して、特にページとスクリプトをクライアントデバイスに配信するために、サーバーアプリケーションを過度に複雑にしないことから始めることにしました。追加のWebサーバーが必要でした。したがって、APIは、同じWebサーバーへの定期的なクライアント呼び出しでxmlHttpRequestを使用することを決定しました。クライアントデバイスのリソース（およびバッテリー）の消費とブレーキがないという点で完全に機能するとは言えませんが、開発時にいくつかのニュアンスを考慮に入れれば正確に機能します。多分、次のバージョンでは、WebSocketサーバーを追加し、それに応じてAPIを再設計しますが、一度にすべてではありません。



Lazarus forWindowsでサーバー部分を作成することが決定されました。ネットワーキング機能は、Synapseパッケージによって提供されます。ある意味で、これはおそらく転覆であり、すべてを意図したとおりに機能させるために、私は真剣にいじくり回していくつかのバンプを取得する必要がありました。ただし、1つのexe、2つのdll（OpenSSLライブラリ）、自己署名SSL証明書とそのキーのファイル、およびいくつかの構成ファイル（および静的）を使用すると、サーバーのテクノロジーのレベルやアプリケーションの起動方法をあまり気にする必要がありません。このサーバーの最初のバージョンは、WindowsXPの2009Asus Eee PC 900でも32ビットビルドでテストしましたが、最近、通常の超低速SSDをよりモダンでボリュームのあるSSDに置き換えるという形でチートがなかったわけではありません。これはパフォーマンスの観点からです。そして、サーバーの「インストール」は、ダウンロードしたzipアーカイブを適切なフォルダーに解凍します。ユーザーアカウントの構成のJSONファイルを編集し、プログラムのexeファイルを起動します（ウィンドウにはボタンもありますが、コマンドラインでパラメーターを指定してWebサーバーをすぐに起動できます）。どういうわけか、私はそのような経験があるので、もっと深刻なサーバー部分について考えています。何事にも潮時というものがあります。



APIの実際の構成に加えて、サーバーはブラウザー用の静的ファイル（ログインおよびチャットのWebページ、スタイル、画像、スクリプト、呼び出し音）を提供します。一般的には、サードパーティのライブラリをできるだけ使わないようにしましたが、デザインとhtmlレイアウトがそれほど熱くないため、jQuery.UIを使用することにしました。したがって、Webサーバーも静的として送信するjQueryを使用します。すべての静的ファイルは、プログラムフォルダーの個別のサブフォルダーにあります。もちろん、必要に応じて適切なスキルを使用して、監視したり、変更したりすることもできます。JavaScriptでは、コードにコメントが付けられており、必要に応じてコードから学ぶことができます。

コミュニケーションを整理する方法

通信を整理するための主な目的は、クライアントデバイス（コンピューター、ラップトップ、スマートフォン、タブレット）と「サーバー」（クライアントとしても機能する）を備えたWindowsマシンを選択して共通のネットワークに結合することです。クライアントデバイスから、バージョン7以降のAndroidで過去数年間にリリースされたいくつかの安価なスマートフォンと、2台の接続されたWebカメラを含むWindows10のコンピューターとラップトップをテストしました。彼らはうまくいった。楽しみのために、私はOrange Pi OneでLubuntu（またはKubuntu、すぐには覚えていません）を使用してメーカーの最初のバージョンをテストしました。驚いたことに、ビデオの速度が低下し、チャットページがすぐに開かれたにもかかわらず、それは機能しました（システムのロードとブラウザのオープンについては話したくありません）。



私たちのサーバーは上記の方法で「サーバー」タイプライターにインストールされ、ユーザーアカウントが構成されます。各ユーザーには、パスワードを使用してログインする必要があります。



すべてがこのように機能します。ユーザーは、IPアドレスまたはドメイン名を使用して、httpsプロトコルを介してブラウザーで「サーバー」タイプライターを入力します。そこでユーザー名とパスワードを入力し、連絡先のリストを含むチャットページに移動します。連絡先をクリックすると、ダイアログウィンドウが開き、テキストメッセージの履歴（ちなみに、サーバーはRAMにのみ保存し、まだファイルには保存できません）、チャットのフィールド、オーディオおよび（または）ビデオを選択するためのチェックボックスが付いたオーディオビデオ通話フォームが表示されます。ビデオ通話を行うには、ユーザーは適切なチェックボックスをオンにし、通話ボタンを押して、ブラウザーへのアクセス許可を確認します。呼び出されたサブスクライバーは呼び出し音のビープ音を鳴らし始め、応答フォームが同じフラグで開きます。回答ボタンをクリックすると、ブラウザはマルチメディアデバイスへのアクセス許可も求めます。次に、通話ウィンドウが開きます。



ビデオ会議やビデオコンサルティングなどのソフトウェアの経験が豊富だとは言えませんが、たとえば、コンピューターのGoogleハングアウトでは（モバイルデバイスのように、わかりません）、最愛の人をフルスクリーンでオンにする機会がありませんでした。これは、理論的には、対話者に何を表示しているかをよく確認する必要がある場合（たとえば、スマートフォンの背面カメラから）、リモートコンサルテーションで必要になる場合があります。このチャットでは、通話ダイアログで、対話者とユーザー自身の2つのタブをビデオで作成することにしました。ユーザータブの現在のバージョンから、ビデオ自体に加えて、カメラとマイクを選択するためのフィールドがあります。会話中にその場で値を変更できます。おそらくそれは誰かに役立つでしょう。



ここで、開発で満たされたコーンについて簡単に説明します。多分それは彼らのソリューションを開発してデバッグしている間誰かを助けるでしょう。

WebRTCの作業と実装の最新機能、および一般的にJavaScriptでマルチメディアを操作する

ここで、簡単に; 詳細は、javascriptファイルstatic / js /videoChat.jsのコメントに記載されています。

1. 確かにChromeに加えて、おそらく他のブラウザでも、HTTPS経由でアクセス可能なサイトでのみgetUserMediaを操作できます。
2. オーディオおよびビデオ入力デバイスのリストは、getUserMediaへの呼び出しが成功した後にのみ取得できます。
3. JavaScriptによる（htmlビデオまたはオーディオ要素のplay（）メソッドを介した）サウンドの自動再生の開始は、ユーザーがサイトでアクティビティを表示した後（たとえば、コントロールをクリックした後）にのみ可能です。
4. promise setLocalDescription , offer. RTCPeerConnection ICE-, .
5. « » getUserMedia RTCPeerConnection. , , .
6. モバイルデバイスの多くの説明では、frontingModeプロパティを参照して、フロントカメラまたはリアカメラを選択しています。実際、古いデバイスでの方法はわかりませんが、テスト済みのスマートフォンでのこのチャットでは、このプロパティを使用しなくても切り替えが機能します。ただし、第5項を厳密に考慮します。

リストはおそらく網羅的ではありません。今後の発展の過程で、さらに多くのことが浮かび上がると思います。誰かが制限を回避する方法を知っていて、それに応じてプログラムを単純化するか、それを使って作業する場合は、コメントに書き込んでください。

Lazarusネットワークアプリケーション開発者の大物

Synapseは現在、OpenSSL1.0.xライブラリのみをサポートしています。1.1では、多くのものがすでに異なって実装されており、他のものはライブラリ名ですらあります。さらに、dllをプログラムフォルダに配置するだけでは不十分です。また、構成ファイル（openssl.cnf）も必要です。このファイルへのパスは、OPENSSL_CONF環境変数を介して設定されます。

どこでダウンロードできますか

Win32およびWin64のプログラムの配布と、Lazarusのサーバー側のソースコードは、リンクwww.lubezniy.ru/soft/videochatのプログラムページで入手できます



。PS：ちなみに、Lazarusを使用して同じソースからのビルドを自動化する方法を知っている人はいますか。 2つの異なるexe-Win32とWin64の場合？Win64からWin32へのクロスコンパイラは稼働していますが、プロジェクトのオプションを毎回変更することは正しくありません。



PPS：誰が試したのか、コメントで感想を共有してください。