イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

いまさら?!WebRTCを使って社内のビデオ会議をお手軽に行う

こんにちは!
いやいやいや〜寒いですね〜
八王子は雪があれで、もう滑るのなんので、大変ですね〜。
矢ヶ崎です。

リモート?ローカル?

そんな出勤困難な状況でも、ビデオ会議できればいい感じですよね?
あと、そんな八王子と渋谷みたいに離れてなくても、社内で席が遠かったり、
なんなりしたときって、意外とビデオ会議やビデオ通話って便利だと思いませんか?

はい(Y) いいえ(N)

いいえの方は、ほんとすいません。
はい、前提で進めます。

そんなときって、いまはSlackとかいろいろなもので簡単にビデオ会議できちゃいますが、
なんか、それでインターネットの帯域を使いまくっちゃうのって、なんか嫌です。
そんな時、昨今ってWebRTCとかで社内LANから出ずにP2Pでビデオ会議するやつって、
実は簡単に実装できちゃうんじゃないの?
という声が聴こえたり聴こえなかったりしてきたわけで、ちょっと試しにやってみたいと思います。

WebRTCの情報はたっぷり目にあります

WebRTCについて、Webで検索してみると、もうたくさんの情報が溢れています。
ただ、ちょっと古かったり、閉域網内でのWebRTCの利用の情報は意外と多くなかったりしますね。(感覚値)

では、そのたっぷりある情報を利用させていただきつつ、閉域網内での利用についてやってみたいと思います。

しかも、できれば1対1ではなく、複数人で通話できるといいですよね〜。
そんな気持ちでやってみたいと思います!

ちなみに、iOSを対象にするとちょっとプラスでやらないといけないようなので、
まずは、PCとAndroidのChromeでの動作を前提としてやってみようと思います!

httpsの準備

昨今のサービスやプロトコル系は、httpsになっていないと「セキュアじゃない!」とか怒られて、いろいろ使わせてくれなかったりもします。
WebRTCをやるときも、もれずになかなか許してくれません。
しかし!ローカルでちょろっとテストするのに、サーバー証明書を買うのもあれですし、無料の証明書もいろいろありますが、問題があったりなかったり意外とめんどくさかったりします。

そこで!みなさんおなじみ!オレオレ証明書(自己証明書)でなんとかしていきます。
前提として、Macであれこれする例になります。

自己証明書の作成

$ brew install openssl
 => ほかの方法でもよいので、opensslを入れておく
$ openssl req -days 3650 -new -nodes -newkey rsa:4096 -x509 -keyout cert.pem -out cert.pem
 => 10年有効のオレオレ証明書を作成。証明書の内容を聞かれるので入力する
 CommonNameは、以下でアクセスさせるサーバのURLのホスト名と一致させる必要があり。
 今回は、 wstest.momiage.com で設定してみます
$ openssl dhparam -out dhparam.pem 2048
 => DHパラメータも作っておく

hostsを設定する

DNSに設定しちゃってもよいのですが、お手軽にhostsを書き換えちゃいます。
ただ、接続する複数のマシンのhostsを書き換えないといけないので、本格的にやる場合は、
ローカルDNSとか作ったほうがよいかもしれません。

設定例

192.168.1.9 wstest.momiage.com

作成した証明書をMacに許してもらう

$ open cert.pem
 => キーチェーンアクセスが開くので、この証明書を「常に信頼」にしておく

nginxでhttpsの設定をする

まあ、ふつーですね。
一応、このあとにWebSocketを使うので、そのプロキシの設定も入れておきます。

upstream socket_nodes {
    ip_hash;
    server wstest.momiage.com:9001 weight=5;
}

server {
    listen 443 ssl;
    server_name _;

    # SSL Settings
    ssl_certificate /usr/local/etc/openssl/certs/cert.pem;
    ssl_certificate_key /usr/local/etc/openssl/certs/cert.pem;
    ssl_session_timeout 5m;
    ssl_session_cache shared:SSL:50m;
    ssl_dhparam /usr/local/etc/openssl/certs/dhparam.pem;
    ssl_protocols TLSv1.1 TLSv1.2;
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!3DES:!MD5:!PSK';
    ssl_prefer_server_ciphers on;

    # Document Root
    root html;

    # Static file location
    location /static/ {
        alias html/;
    }

    # WebScoket Proxy
    location / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://socket_nodes;
    }

}

ここまでやれば、Chromeでのアクセスでは、オレオレ証明書をなんとか許してくれますね。
Chromeに怒られても、怒られた画面で、
詳細設定 ⇒ wstest.momiage.com にアクセスする(安全ではありません)
を選べは、無理やりアクセスできます!

WebRTCのクライアントを実装する

シグナリングサーバーを応用! 「WebRTCを使って複数人で話してみよう」
https://html5experts.jp/mganeko/5438/

こちらのコードをほぼそのまま利用させていただいております。
変更した点は、
・https化
・ビットレートの調整を入れた
・社内LANを使うためにiceを意識しておいた ( https://stackoverflow.com/questions/30742431/webrtc-on-isolated-lan-without-ice-stun-turn-server ) くらいです!

これを、nginxのstaticのディレクトリにhtmlファイルとして置きます。

WebSocketのサーバを実装

同じく
シグナリングサーバーを応用! 「WebRTCを使って複数人で話してみよう」
https://html5experts.jp/mganeko/5438/

をほぼそのまま使わせていただいております。
これは単純ですが、一部、
・Socket.IOの新しいバージョンに合わせて記述を変更
をしております。

ふつーにnode.jsにてSocket.IOが使える状態にして、

$ node ./sig.js

とかで実行します。今回は9001でListenするようにしてます。
上記のnginxのhttpsでのProxyを経由できるようになってます。

まずはMac同士で試す

Mac同士で試すため、複数台のMacのChromeで、
https://wstest.momiage.com/static/webrtctest.html
※社内LAN用なので自分のPCでしか開きません
を開いて、接続してみます!
いい感じ!

Androidでもつないでみる

オレオレ証明書のインストール

先ほど作成した、cert.pemをcert.crtという名前にして、Android端末にメールかファイル転送で持っていきます。
Android端末本体の、

設定 => セキュリティ => SDカードからインストール
※端末やAndroidのバージョンなどによって表現が微妙に違いますが、だいたいこんな感じです

を選んで、cert.crtをインポートしておきます。

hostsの変更

Android端末のhostsの変更が必要な方はやってください。
※今回の例では、wstest.momiage.comがなんらかの形で解決できればOK

Chromeで開く

Macの時と同じように開いてみます。
お!通信できた!

マルチメディア(死語)の世界がもう手中に!

もはや、こんな簡単にこんなすごい物が作れちゃう世の中、そりゃプログラミングも簡単かつ複雑になってくるわけですね。

これからも、学び続ける!

こちらからは以上です。

以上