第37回 WebRTCを使ったオープンソースビデオ会議サンプル

こんにちは、うちです。

最近、「WebRTC」に関して相談を頂くことが増えてきました。

私がはじめてこの言葉を聞いたのは、2~3年前のことだったかと思います。
その時の私は、スカイプ等の専用アプリケーションをインストールすることなく、ブラウザだけでビデオやサウンドデバイスを操作してテレビ会議を実現できる、といったぼんやりとした理解度で、具体的にどういったものがあるか知りませんでした。

WebRTCではないテレビ会議システムのオープンソースに関しては「第23回 電話交換機能やテレビ会議を実現するオープンソース」でも紹介していますが、「WebRTCを触ったことある?仕事あるんだけど。」「自分のウェブサイトにテレビ会議機能を載せて、テレビ会議相談を実現したい。」といったご相談が増えてきたので、今回は、WebRTCで実装された「オープンソースのテレビ会議」のサンプルを動かしてみようと思います。

■WebRTCとは

http://www.webrtc.org/

公式サイトによると、WebRTCとは、ブラウザ上でリアルタイムコミュニケーションを実現するオープンなフレームワークで、ブラウザで実装する際はjavascript APIを使ってこれらのコンポーネントにアクセスできるとのこと。

■WebRTを実現するのに必要なもの

WebRTCを使ったテレビ会議システムでは、動画や音声などの通信はブラウザ間で直接行われる、いわゆる「P2P」という構成になりますが、どの端末同士をつなぐかを管理する、「ブローカーサーバー」と言われる取次ぎのシステムが必要になります。

また、全てのブラウザで動作するわけではなく、IEでは動きませんが、Chrome、firefoxなどでは動作します。iPhoneやAndroid端末のSafariやChromeでも動作します。

■オープンソースのWebRTCライブラリ「peerjs」

WebRTCで公開されているネイティブなjavascript APIを使用するよりも、このAPIをラップしたものを使うほうが簡単に実装できます。

今回は、プロジェクトがアクティブで知名度も高い「peerjs」という、オープンソースのWebRTCのjavascriptライブラリを使うことにします。

また、NTTコミュニケーションズが「SkyWay」というWebRTCプラットフォームを提供しており、これも中身「peerjs」で動くプラットフォームのようです。

ドキュメントが日本語で提供されていたり、ユーザー登録することで無料でブローカーサーバーを利用できるとのことで、まずはこれを利用してみようと思います。

■Peerjsベースの「SkyWay」サービスサイト

https://nttcom.github.io/skyway/index.html

ドキュメント->Javascript->スタートガイドの順に移動すると、SkyWayを使ってWebRTCを実現するためのドキュメントが公開されており、実際には、PeerJSの日本語APIリファレンスになります。

https://nttcom.github.io/skyway/docs/#JS

201509u01

このサービスでブローカーサーバーを利用するためには「APIキー」というものが必要になります。

「APIキーの申し込み」のリンク先ページが現時点(2015/09/27)ではリンク切れになっていますが、先ほどのSkyWayの公式サイトトップからユーザー登録を行い、テレビ会議を公開するサイトのURLを入力すると、「APIキー」が使えるようになります。

■サーバーの準備

ブラウザでアクセスし、テレビ会議用のウェブサイトを表示するサーバーを用意します。

今回は「peerjs.opensourcedemo.biz」というドメインを用意しました。

今回使用するサーバーへDNSの設定を行い、ウェブサーバーapacheの設定を行います。

そこに、ビデオチャットのサンプルソース「index.html」と「style.css」をダウンロードして、ウェブサーバー上に配置します。

サンプルソース
https://github.com/nttcom/peerjs/tree/master/examples

index.html内の以下のAPIキー部分をSkyWayで取得したAPIキーに置き換える
と、すぐにビデオチャットが動くのを確認することができました。

8 // Compatibility shim
9 navigator.getUserMedia = navigator.getUserMedia || navigat
or.webkitGetUserMedia || navigator.mozGetUserMedia;
10 // PeerJS object
11 var peer = new Peer({ key: ‘APIキーに置き換える部分’, debu
g: 3});
12 peer.on(‘open’, function(){
13 $(‘#my-id’).text(peer.id);
14 });

今回SkyWayで動かしたビデオチャットのURLはこちら
http://peerjs.opensourcedemo.biz/

201509u02

ビデオチャットのサンプルは、以下の方法で試すことができます。

1. ブラウザを2つ立ち上げて両方に上記URLを入力する。
2. ページが表示されると、

Your id: XXXXXXXXXXXX

という形でIDが表示されますので、そのIDを、起動したもう片方のブラウザのCallボタンの左に入力して実行すると、ビデオ会議がすぐに始まります。

サンプルソースなので、呼び出しが行われることなく、即接続となります。

会社の同僚や友人等に協力してもらい、呼び出し側と受け側で別れて試してみると、実際の映像や会話のテストまでできると思います。

■ブローカーサーバーも自前で構築し、全て自前でフルオープンソースのWebRTCをやってみる

上記では、NTTコミュニケーションズが提供しているSkyWayのブローカーサーバーを利用してWebRTCを簡単に試してみました。

次は、peerjsプロジェクトが提供しているブローカーサーバーとオープンソースでを使って、自分のサーバーにインストールして全て自前で動かしてみましょう。

1.node.jsのインストール

peerjsが提供しているpeerjs-serverはnode.jsで動いています。
第34回「サーバー監視」のオープンソース」で紹介したuptimeというサーバー監視のオープンソースもnode.jsで動いてました。最近のトレンドですね。

今回利用しているサーバーはCentOS7で、前準備としてepelリポジトリからyumでnode.jsとnpmをインストールします。ちなみに、yumはCentOSのパッケージを管理するツールで、npmはNodeのパッケージを管理するツールです。

2.epelリポジトリの追加
yum install epel-release

3.node.jsとnpmのインストール
yum install node.js npm

次に、npmを使ってpeerjsサーバーをインストールします。これを実行するのはウェブサーバーの公開ディレクトリである必要はありません。

コマンドは以下の通りです。

npm install peer

インストールを実行すると、カレントディレクトリに node_modulesという
ディレクトリが作成されます。

以下のコマンドでサーバーを起動します。

./node_modules/peer/bin/peerjs –port 9000 –key geekfeed &

portの9000や、keyのgeekfeedは任意のものに変えてください。
最後の & はバックグラウンドで起動です。

Peerjs-serverのソースの公開URLはこちら
https://github.com/peers/peerjs-server

これで、ブローカーサーバーも自前で用意できましたので、先ほどのindex.htmlを別の名前でコピーして、設定内容も以下に変えます。

8 // Compatibility shim
9 navigator.getUserMedia = navigator.getUserMedia || navigat
or.webkitGetUserMedia || navigator.mozGetUserMedia;
10 // PeerJS object
11 var peer = new Peer({ key: ‘geekfeed’, host: ‘/’, port: 90
00, secure: false,debug: 3});
12 peer.on(‘open’, function(){
13 $(‘#my-id’).text(peer.id);
14 });

ブローカーサーバーから自前のサーバー上で動かしたビデオチャットは以下のとおりです。

http://peerjs.opensourcedemo.biz/index2.html

ちゃんとブローカーサーバーからIDが返されて動いていることが確認できました。

いかがでしたでしょうか?

今回は、プログラムをしたことがない方にとっては手順等が意味不明だったかもしれません。

一方、開発の方には、結構簡単に実装できるんだということがお分かり頂けたかと思います。

私自身もサンプルを構築してみるまでは、なんとなく概念的に理解しているだけでしたが、実際に構築してみて、ホームページなどに簡単に設置できるな、
と実感したのでした。

オープンソース geek(変人)列伝 バックナンバー