WebRTCへの取り組み

こんにちは。インフォコム技術企画室のがねこです。
今回はWeb上でリアルタイムコミュニケーションを実現する、WebRTCについての取り組みをご紹介します。

　

0. WebRTCとは

WebRTCは、Web Realtime Communication の略で、HTML5で取り入れられた規格の一つです。次のことが可能になります。

  • JavaScriptから、カメラの映像や、マイクの音声を取得できる
  • RTCPeerConnectionオブジェクトを使って、ブラウザ間で映像/音声/データを直接通信できる

　

1.調べる

WebRTCでは、Webブラウザからカメラを使うところまでは簡単です。しかし、それを使って通信をしようとすると一筋縄では行きません。

もちろん、便利なライブラリ(Peer.jsなど)やサービス(Skywayなど)があるので、それを使うとスムーズです。ところが、実際にWebRTCを使って様々な形態の通信を行ったり、そもそも通信ができない場合の原因を調べたりするには、仕組みを理解しておく必要があります。そこで基本から、徐々に複雑なことができるように調査、実験を行いました。分かったことは、HTML5Experts.jpというサイトにも投稿しています。

調査したことはほぼ全て公開してしまいましたが、そもそもオープンな規格なので、このような基礎的な情報は同じくオープンにするのが良いと考えています。

　

2.使う

社内で実際に使ってみて、運用のノウハウを蓄積してます。複数のオフィスがあるので、例えば次のような拠点間での少人数の打ち合わせに、skypeなどと併用しています。

  • 東京 -　大阪
  • 東京 -　四国

外部サービスと違い社内ネットワークで完結し、インターネット回線に負荷がかからないのが良いところです。

双方向のビデオチャット以外にも、片方向の映像配信も行っています。

  • 社内でのプレゼンテーションの中継
  • 特定オフィスで開催しているイベントの中継

映像や音声の品質を保つために、ITではなくAudio/Video系の機器についても試行錯誤しています。

さらに、社内で使っているビデオチャットをベースにして、試験的に社外にもビデオチャットのβサービスを公開しています。

https://talkin.info/

video_banner.png

動作保障はしかねますが、ご自由にお使いいただけます。

　

3. 遊ぶ

WebRTCはHTML5のさまざまな機能と組み合わせて使うことができます。

  • CSS3と組み合わせての映像効果を付ける
  • WebAudio API と組み合わせて、音声を加工する
  • WebGLと組み合わせて、映像を3D空間に配置する
  • WebSpeech APIと組み合わせて、音声認識させる

などなど。実用性は不明ですが、さまざまな表現ができるので、インパクトのあるWebサービスが作れそうです。試してみた内容は、別途ご紹介したいと思います。

　

4. 伝える

WebRTCに関して調査、実験して分かった内容については、機会を見つてお伝えするようにしています。過去には次のようなイベントでセッション発表やライトニングトークに参加させていただきました。

またこれから2015年2月5日（木）～2月6日（金）に開催される、WebRTC Conference Japan にもプラチナスポンサーとして参加しています。ご興味とお時間があれば、ぜひお越しください。チケットが入手できるキャンペーンも開催中です。

次回の記事では、ビデオチャットができるWebサービス talkin.info の使い方についてご説明する予定です。