5分でWebRTCビデオチャットを構築する

前回の記事では、Ubuntu 上の webrtc ベースの多人数ビデオチャットサービスの詳細なコードを紹介しました。興味のある方は参考にしてください。今日は、5 分で WebRTC ビデオチャットを構築する方法に関する記事を紹介します。

Baidu で WebRTC を検索すると、たくさんあると思います。この友人の SkyRTC デモ (WebRtc 環境の構築) を使えば簡単にチャットできると思ったのですが、長い間苦労した結果、ビデオはおろか、テキストメッセージも送信できませんでした。それで自分でやりました。

パブリックインターネット上でビデオ通信を実現するには、次の 3 つのコア要素が必要です。

1つは、イントラネット侵入を実現するNAT侵入サーバー（ICEサーバー）です。具体的な機能については、Baiduで検索してください。
ポイントツーポイントチャネルを確立するために使用される WebSocket ベースのシグナリングサーバー。 Web クライアント。
カメラは、ユーザーとの対話のために H5 の WebRTC 機能を通じて呼び出されます。

3 つの部分は次のように構成されています。

青い部分は実際には 3 台のサーバーに展開できますが、ここでのデモ環境は 1 台のサーバー上にあります。開く必要のあるポートは 3478、8888、8080 です。もちろん、自分で設定することもできます。詳細な組み合わせ手順は次のとおりです。

準備

サーバー動作環境: Centos 7.3

インストールツール: nodejs、git、Baiduでインストールしてください

クライアント環境: FireFox (または FireFox のモバイル版)。 Chrome では https サポートが必要なため、サーバーは証明書を展開する必要があります。そのため、デモプログラムは Firefox のみをサポートしています。必要に応じて、別の記事を投稿して紹介します。

NAT トラバーサルサーバー (ICE サーバー) のインストール

イントラネット侵入を実現するには、主に stun と turn の 2 つの方法があります。通常、stun と turn のアドレスが設定されます。stun が接続できない場合は、自動的に turn サーバーに切り替わります。詳細な紹介については、以下を参照してください: STUN、TURN、ICE の紹介インターネット上にはオープンソースのスタンサーバーが多数ありますが、私はどれも成功したことがありません。ご興味があれば、以下をお試しください: https://www.jb51.net/article/181287.htm 私は coturn を直接使用してターンサーバーを構築します。インストールコマンドは次のとおりです:

git クローン https://github.com/coturn/coturn
CDコターン
./configure
作る
インストールする

P.S. ./configure が失敗する場合は、openssl と Libevent2 が必要になる可能性があります。

yum インストール -y openssl openssl-devel

yum -y libevent-devel をインストールします

インストールが完了したら、example/etc にある turnserver.conf を bin フォルダにコピーします。

cp examples/etc/turnserver.conf bin/turnserver.conf

構成 turnserver.conf を次のように変更します。

#リスニングポート listening-port=3478

#Alibaba クラウド イントラネット IP
リスニングIP=10.214.31.57

#Alibaba Cloud 外部ネットワーク IP アドレス external-ip=118.24.78.34
#アクセスユーザーとパスワード user=yubao:000000

サービスを開始します:

CD ビン
ターンサーバー -v -r 118.24.78.34:3478 -a -o

設定後、次のように https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ で成功するかどうかをテストできます。

私の場合のように、実行中のログはいつでも /var/log フォルダで表示できます。

末尾 -f /var/log/turn_12447_2018-04-20.log

シグナリングサーバー

シグナリングサーバーは、Websocket に基づく signalmaster を使用します。これを選択した理由は、ターンサーバーに直接統合できるからです。

git クローン https://github.com/andyet/signalmaster.git
CD シグナルマスター
npm インストールエクスプレス
npm インストール yetify
npm インストール getconfig
npm インストール ノード UUID
npm で socket.io をインストールします

Signalmaster は turnserver に接続できますが、ユーザー名/パスワードモードをサポートしていません。ソースコード sockets.js の 110 行目を調整する必要があります。調整されたコードは次のとおりです。

if (!config.turnorigins || config.turnorigins.indexOf(origin) !== -1) {
  config.turnservers.forEach(関数 (サーバー) {
  資格情報.push({
   ユーザー名: server.username,
   資格情報: server.credential、
   URL: server.urls || server.url
  });
  });
 }

完了したら、config/production.json を変更し、turnserver のユーザーとパスワードを次のように設定します。

{
 "isDev": 真、
 「サーバー」: {
 「ポート」: 8888,
 "/* 安全 */": "/* https 経由で接続するかどうか */",
 「安全」: false、
 「キー」: null、
 "証明書": null、
 「パスワード」: null
 },
 「部屋」: {
 "/* maxClients */": "/* 部屋あたりのクライアントの最大数。0 = 制限なし */",
 "最大クライアント数": 0
 },
 「スタンサーバー」: [
 {
 「URL」: 「stun:stun.ekiga.net:3478」
 }
 ]、
 「ターンサーバー」: [
 {
 "urls": ["turn:qq.openauth.me:3478"],
 "ユーザー名": "yubao",
 "資格情報":"000000", 
 「有効期限」: 86400
 }
 ]
}

起動する：

nohup ノード server.js &

ウェブクライアント

クライアントは HTML ページをすばやく作成できます。次のものを参照してください: 顧客サービスシステムを段階的に構築する (1) 3 分で複数人のテキストおよびビデオチャットルームの Web バージョンを実装する (完全なソースコードを含む) もちろん、面倒な場合は、クリックしてダウンロードするだけです。静的 Web サーバーを見つけてデプロイすることができます。 2 番目の部分のシグナルサーバーのアドレスを変更することに注意してください。

var webrtc = 新しい SimpleWebRTC({

 localVideoEl: 'localVideo',
 
 remoteVideosEl: 'remoteVideos',

 自動リクエストメディア: true、

 url:'http://qq.openauth.me:8888', //独自のシグナルサーバーとして設定します nick: 'yubaolee' //テキストチャット中のユーザーのニックネーム});

私が展開したアドレスは http://qq.openauth.me:8080/baortc/index.html です (気軽にアクセスしないでください。突然会ったら恥ずかしいです 🙂 (✿◡‿◡))、コンピューターは Firefox (Chrome はセキュリティ要件が高く、https を使用する必要があります。テストのために一時的に Firefox を使用します)、アクセス効果:

別のコンピューターまたは携帯電話を使用して Firefox でページにアクセスすると、すでに 2 つのビデオウィンドウが存在していることがわかります (コンピューターで開いたページにも自動的に 2 つのビデオウィンドウが表示されます)。テキストとビデオで通信できます。

それ以来、WebRTC プログラムが構築されてきました。

要約する

5分でWebRTCビデオチャットを構築する方法についての記事はこれで終わりです。WebRTCビデオチャットに関するその他の関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

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