Ubuntu 上で WebRTC ベースの複数人ビデオチャットサービスを構築するための詳細なコード

WebRTC は、Web Real-Time Communication の略で、Web リアルタイム通信技術です。簡単に言えば、音声通話やビデオ通話を含むリアルタイムコミュニケーションを Web ブラウザに導入することです。

疫病流行中、どこにも行けなかったので、自宅でWebRTCビデオライブブロードキャスト技術を勉強しました。インターネットでいくつかのチュートリアルを見つけましたが、どれもスムーズに動作しませんでした。記事が比較的古く書かれていたり、使用されているオープンソースコンポーネントが更新されていたり、一部の構成が同じではなくなったりしたため、前の手順に従うと問題が発生する可能性があるかもしれません。しばらく苦労しましたが、ようやく実行できました。記録しておきます。

シンプルなチャットルームの HTML ページ

このページでは、simple-webrtc を使用して webrtc 通信を実装します。simple-webrtc は、いくつかの webrtc コアオブジェクトをカプセル化したものなので、これを使用するのは比較的簡単です。

<!DOCTYPE html>
<html>
<ヘッド>
 <title>WebRTC チャット ルーム</title>
 <スタイル>
 ビデオ
 高さ: 200px;
 幅: 200ピクセル;
 境界線: 1px 実線 コーンフラワーブルー;
 境界線の半径: 3px;
 マージン: 10px;
 }
 </スタイル>
</head>
<本文>
 <div>
 ルームID: <input id="roomid" type="text" value=""/> <input type="button" id="btnStart" value="ルームに参加">
 </div>
 
 <div>
 ニックネーム: <input id ="nickname" readonly="readonly" type = "text" value="">
 </div>
 <h3>
 自己：
 </h3>
 <ビデオ id="localVideo"></ビデオ>
 <div id="リモートビデオ">
 <h3>
 リモートクライアント:
 </h3>
 </div>
 <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
 <script src="js/simplewebrtc-with-adapter.bundle.js"></script>
 <script lang="javascript">
 $("#ニックネーム").val(新しい日付().getTime()); 
 var qs = 関数 (キー) {
 戻り値: (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
 };

 var ルームID = qs("ルームID");
 if (ルームid) {
 $('#roomid').val(ルームid);
 }
 それ以外 {
 $('#roomid').val('99999');
 }
 // $('#roomid').val(roomid);
 var smUrl = 'https://webrtc.xxx.com:8800';
 var webrtc = 新しい SimpleWebRTC({
 // 「私たちの」ビデオを保持する id/element DOM 要素
 localVideoEl: 'localVideo',
 // リモートビデオを保持する id/element DOM 要素
 remoteVideosEl: 'remoteVideos',
 // すぐにカメラへのアクセスを要求する
 自動リクエストメディア: true、
 url:smUrl、
 ニックネーム: $('#nickname').val(),
 });

 webrtc.on('readyToCall', 関数() {
 // 任意の名前を付けることができます
 console.log('接続されました。');
 });
 webrtc.on("createdPeer", 関数(ピア) {
 console.log('createdPeer', ピア, peer.nick);
 if (ピア.ニック) {
 alert('クライアント ' + peer.nick + ' が参加しました');
 }
 });
 webrtc.on("参加した部屋", (部屋名)=>{
 console.log('参加した部屋', 部屋名 );
 alert('部屋に参加しました' + roomName);
 });
 webrtc.on("leftRoom", (部屋名)=>{
 console.log('leftRoom', 部屋名 );
 });
 webrtc.on("ビデオが追加されました", (videoEl, ピア)=>{
 console.log('videoAdded', videoEl, ピア);
 if (ピア.ニック) {
 alert('クライアント ' + peer.nick + ' が参加しました');
 }
 });
 webrtc.on("ビデオが削除されました", (videoEl, peer )=>{
 console.log('ビデオが削除されました', videoEl, peer);
 });
 $('#btnStart').click(function(){
 var 部屋のID = $('#部屋のID').val();
 webrtc.joinRoom(ルームID); 
 // アラート('ルームに参加 '+ roomId + ' 成功') 
 })
 //$('#btnStart').click();
 </スクリプト>
</本文>
</html>

nginxをインストールしてチャットルームページを展開する

nginx をインストールします。

sudo apt-get install nginx

nginx を設定します。

サーバー{
 聞く 80;
 聞く 443;
 サーバー名 webrtc.xxx.com;
 位置 / {
  インデックス index.html;
  ルート html/www;
  }
 sslオン;
 ssl_certificate /ssl/xxx.crt;
 ssl_certificate_key /ssl/xxx.key;
 ssl_session_timeout 5分;
 ssl_プロトコル TLSv1 TLSv1.1 TLSv1.2;
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;

 }

nginx をインストールした後、nginx を使用して上記の HTML ページをサーバーにデプロイします。 Chrome は https を使用しないように設定されており、カメラとマイクを呼び出すことができないため、https を使用する必要があることに注意してください。

シグナルマスターシグナリングサービスをインストールして構成する

シグナリングサービスは、クライアント間で WebRTC クライアント情報を送信するために使用されます。 WebRTC は P2P 接続を確立するときに他のクライアントの関連情報を必要とするため、クライアント間で情報を転送するためのチャネルが必要です。 SignalMaster は、socket.io を使用して Websocket の永続的な接続を実装する Node.js ベースのサービスです。

signalmasterをインストールします。

git clone https://github.com/simplewebrtc/signalmaster.git

シグナルマスターを設定します。

CD シグナルマスター
cd 構成
vim 開発.json
//編集{
 "isDev": 真、
 「サーバー」: {
 「ポート」: 8800,
 "/* 安全 */": "/* https 経由で接続するかどうか */",
 「安全」: 真、
 "証明書": "/ssl/xxx.crt",
 "キー": "/ssl/xxx.key",
 「パスワード」: null
 },
 「部屋」: {
 "/* maxClients */": "/* 部屋あたりのクライアントの最大数。0 = 制限なし */",
 "最大クライアント数": 0
 },
 「スタンサーバー」: [
 {
 「URL」: 「stun:webrtc.xxx.com:3478」
 }
 ]、
 「ターンサーバー」: [
 {
 "URL": ["turn:webrtc.xxx.com:3478"],
 "ユーザー名": "abc",
 「資格情報」: 「123」、
 "秘密"： ""、
 「有効期限」: 86400
 }
 ]
}
〜

ここで注意すべき主な点は、SSL 証明書も構成する必要があり、上記の nginx 証明書を使用できることです。さらに、trunserver がパスワードを設定している場合は、正しいユーザー名とパスワードも設定する必要があります。

Coturn 侵入サービスをインストールして構成する

当社のクライアントは通常、ローカルエリアネットワーク内にあるため、P2P 接続を確立するにはイントラネットへの侵入が必要です。 coturn を使用して、turnserver を侵入サービスとして確立します。

coturn をインストールします:

# 依存関係
apt-getインストール-y \
 emacs-nox \
 ビルド必須\
 libssl-dev sqlite3 \
 libsqlite3-dev \
 libevent-dev \
 g++ \
 libboost-dev \
 libevent-dev

# ダウンロード
https://github.com/coturn/coturn/archive/4.5.0.7.tar.gz をダウンロードしてください
tar xvf 4.5.0.7.tar.gz

# ビルドとインストール
cd コターン-4.5.0.7
./configure --prefix=/opt
作る
インストールする

#env
echo "export PATH=/opt/bin:$PATH" >> ~/.bashrc
ソース ~/.bashrc

coturn を設定します。

cd コターン-4.5.0.7
vim の coturn.conf
＃サーバ
リスニングポート=3478
リスニングIP= 
リレーIP= 
代替リスニングポート=0
外部IP= 
レルム=abc

# サーバー名={YOUR_SERVER_NAME}

TLSなし
dtls なし
モビリティ
ノークリ
冗長
指紋

# 認証
lt-cred-mech
古いノンス=3600

# ユーザー
# これはデモンストレーションです。データベースは設定されていません。設定するには use={name}:{password} を使用してください # userdb=/opt/var/db/turndb
# 複数のユーザーの場合は、複数行を記述します。user=abc:123

ここで注意すべき主な点は、IP 構成です: listening-ip = イントラネット IP、relay-ip = イントラネット IP、external-ip = 外部 IP。ユーザーが設定されている場合は、対応するユーザー名とパスワードを使用してシグナリングサーバーも設定する必要があります。

すべてのサービスを実行する

シグナリングサービスを実行します。

CD シグナルマスター
ノードサーバー.js

侵入サーバーを実行します。

cd コターン-4.5.0.7
ターンサーバー -c coturn.conf

nginx によってデプロイされた静的ページにアクセスするだけです。 2 つの Web ページを開いて、自分で試してください。他の友人にも試してもらうのがベストです。侵入サービスが適切に構成されていない場合、自分で試すことはできても、他の人には試せないことがあります。

参照する

Coturn: TURN および STUN サーバー
5分でWebRTCビデオチャットを構築する

共演

要約する

Ubuntu で WebRTC ベースの複数人ビデオチャットサービスのサンプルコードを構築する方法については、これで終わりです。Ubuntu WebRTC ビデオチャットに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: