WEBRTCの導入に向けて

2017.3.10 / 

はじめまして。
リアズのアプリエンジニアチームの安田です。

 

 

 

 

 

 

 

 

 

 

ブラウザのみでビデオ・音声のコミュニケーションを実現する「WEBRTC」をご存知でしょうか?

セキュリティホールの問題が取り沙汰され、大手ブラウザからも動作の制限が強くなっているAdobe Flash Player脱却に向けて

弊社のライブチャットに関して大きな変化が必要になっています。

既にAndroid環境においてはWEBRTCメディアサーバーを利用したサービスを提供しています。

(ネイティブアプリの対応や「つながらない」を無くすため日々改善を続けています!)

実装事例

 

WEBRTCを導入することでブラウザだけでより手軽にライブチャットを体験いただけるサービスとなりました。

近日Webkitにも実装されるとのことでiOS(iPhone)Safari対応となりさらにユーザビリティを高める事ができます!!

 


WEBRTCはブラウザ⇔ブラウザをP2Pでやりとりをすることが可能ですが、一対一 を超える 一対多、 多対多 などの通信が必要となると通信量や負荷の問題でクライアントだけでは処理が間に合いません。

そのためサーバー経由でエンドポイントへ配信する必要があります。

一対一だと

一対一

 

しかし以下の場合・・・

 

多対多

大問題!


これを解決するため今回はオープンソースで利用が可能なWEBRTCゲートウェイ

 

を紹介したいと思います。 

 

オープンソースの中でも多数存在するWEBRTCゲートウェイですが以下のようなことから個人的な期待を寄せて注目しています!

  • コミュニティが活発
  • 日々コミットされている
  • ネイティブアプリのサンプルが用意されている
  • Simulcast対応β ※1

※1
送信側が高解像度映像と低解像度映像を送信し受信側がデバイス性能や帯域にあわせたストリームを受信できる仕組み。

 

DEMO

 

こちらはご自由にログインしてお試しいただけます。
任意のIDを入力し「LOGIN」ボタンでログインしていただくとカメラ・マイクの使用許可を聞かれ、許可することでルームにログインすることができます。

対応ブラウザ
PC/SP:Chrome/Firefox


  • ログイン画面

ログイン

  • 4人でルームにログイン中

 



こちらのデモは以下の環境で構築しています。

MongoDB
Express
Node.js
(MEANスタックではありません)
リアズでは今のところ導入していない手法ですが常に新たな挑戦をしています!!

※ MEANスタック
M :MongoDB
E :Express( Node.js用WEBフレームワーク )
A :AngularJS
N :Node.js
これらを組み合わせた海外では人気のある開発手法です。(用途による)

 

iOSのデモアプリはまたの機会に。
Androidに関しては公式デモAppRTCを参考に作られていますがかなり古いため作り直しが必要では..と考えています。

LicodeのコアはC++のネイティブで開発されていますが、APIはJavascriptで書かれているためフロント寄りの知識が必要になります。
構築に関してUbuntuサーバーを推奨されており、弊社では主にCentOS環境下でサービスを運用してるためシステムの違いから理解する必要がありました。
海外では人気のディストビューションなので積極的に触れていきたいですね☆


 

次回はアプリに焦点を当てていきたいと思います。