• 無料Web会議 SOBA meeting
  • クラウド型Web会議 SOBA mieruka cloud
  • インターネット個別指導SOBA スクール

メディア掲載2013②

WebRTC Meetup Osaka #2 に行ってきました

こんにちは。SOABフレームワーク・クラウド 開発部です。

WebRTC Meetup Osaka #2 に行ってきました。


前回は東京との同時開催でしたが今回は大阪単独開催です。
何時来てもグランフロントのさくらさんのオフィスは綺麗で羨ましいです。

今回は時雨堂さんのSFUでライブ配信との事でした。

参加予定21名中19名参加で参加率9割は優秀との事でした。
東京の場合は参加率は5割位だそう。

勉強会のキャンセル、ダメ、絶対。


ワンボタンでできる!WebRTCゲーム配信!



自作ゲームを公開するサービスPlicy(プリシーと読む)
RPGツクール、WOLF RPGエディタ、Unityに対応
Canvas + WebRTCでゲーム画面を配信できる。

13000以上のゲームが公開されているそうです。知らなかった。

CanvasのcaptureStream API を使えば MediaStream を吐いてくれるので、それをWebRTCで配信しているとの事。

Canvas では音は無いので、WebAudio (createMediaStreamDestination) を使ってMediaStreamを合成しているので映像と音声両方を配信出来る。

PeerJSを使用、turnserver は jitsi/turnserverを使っているそう。

文字チャットは RTCDataChannelAPI を使って行っている。
チャットは読み上げが出来る。棒読みちゃん、ゆっくり音声みたいなのを Web Speech API で実現している。

Safari も動いたが RTCDataChannelAPI でOSをまたぐ String で問題ありとのこと。
あとEdgeは動かないそうです。

iframe を超えたaddTrack 問題があった。iframe を超えてWebRTCをブラウザ互換で作るのは筋が悪いとのこと。

知見がいっぱいの発表でした。




実践 WebRTC 〜最新事例と開発ノウハウの紹介〜 HTML5 Conference 2017 再演


WebRTCとは
IPネットワークで リアルタイムコミュニケーションのオープン標準技術

リアルタイムコミュニケーションの民主化
最初のリアルタイムコミュニケーションは電話。1876年以来NTTが独占。
2000年前後からNapsterやSkypeがインターネット上で実現。
2011年にWebRTC草案が発表、パテントフリー、全てのソフトウェアエンジニアが扱える時代が到来した。
Peer to Peerが特徴。

WebRTCを構成する技術要素
1)〜3)はIETF、4)はW3C

1) 暗号化、到達・順序保証、流用・輻輳制御を実現するプロトコル
2) ネットワーク機器(NAT等)を超えてP2P通信する手順
3) 音声と映像のコーデック
4) JavaScript API

httpと違いトランスポートは基本的にUDP

音声と映像のコーデックは VP8, VP9, H264(Mpeg-4/AVC)、Opus

SafariがH264のみ、Chrome/Firefox も H264 対応
モバイルブラウザのシェアの65%はSafariなので、H246は無視出来ない


WebRTC市場予測
2020年にはコラボレーションアプリ通話の90%以上がWebRTC (ガートナー)
2020年の市場規模は44億5千万ドル

個人的にはここの事例紹介は非常にテンションが上がるやつです。

Co-Streaming (共同ストリーミング)
複数人が同時に動画配信し多人数が視聴するサービス

Mixer: MSが買収したゲーム配信サービス
Pixiv Sketch LIVE: 多人数でリアルタイムにお絵かきを楽しめるライブ配信機能

Serverless CDN
P2Pでデータを配信するユースケース

Peer5: 同じデータを見ているP2P同士がテレビ並(数百万)の同時視聴者

Serverless CDN x Streaming
従来のサーバ配信に加えてP2Pでの配信も行う
Streamroot: Dailymotionの裏側で使われている。先日$3.2M調達


オンライン英会話
従来SkypeだったのがWebRTCへ移行

weblio、レアジョブ、ネイティブキャンプ、ECC等の事業者は既にWebRTC化

カスタマサポート
videodesk (ソフトバンク): Web組み込み型のコンタクトセンター

遠隔診療
CLINICS: 全国550以上の医療機関で利用可能 先生PCと患者スマホアプリを利用したビデオチャットによる診療

IoT
WebRTCスタックが動くデバイスであれば簡単にコミュニケーション機能を追加可能

petoco: NTTドコモ開発のホームコミュニケーションサービス(中身はAndroid)、スマホアプリでロボットと会話が可能

マッチングアプリ(出会い系)
KoeTomo: 年齢・性別に関わらず、世界中の人たちと話す事が出来るサービス



WebRTC開発の勘所

1. WebRTC API の進化が早い
仕様書完成してないのにレガシーAPIがある。SafariはレガシーWebRTC APIを無効化する気満々
ex.  pc.addStream -> pc.addTrack
ORTCの考え方を一部取り入れて変わってきている

WebRTC1.0 では SDPを利用する
ICEの候補やコーデックなどを文字列で交換しているので、すごく長い
例えば、ミュート、アンミュートするだけなのに全ての情報を交換する必要がある
ネットワークレイヤまでネゴシエーションしなおし


ORTCはレイヤごとにオブジェクトのAPIがあるのでそれぞれのAPIで必要に応じてネゴシエーション出来る
音声ミュートとかならSRTPのレイヤだけでいい

APIの進化は早いが、adapter.js (shim)を使えばだいたいうまくやってくれる


2. ブラウザの互換性に注意

Chrome/Firefox/Safari はGoogleのライブラリがベースなので相性は良いが、Edgeは独自仕様かつ非公開

動画コーデックのサポートに差異
Chrome/Firefox ・・・ VP8/VP9/H264
Edge・・・VP8/H264UC(Skype用)
safari・・・H264のみ


3. マイクカメラの扱いにハマりどころが多い

getUserMedia の constrains は曲者
オプション指定ではなく制約なので100%そのとおりになるとは限らない
書き方がブラウザによって幅がある、実装にもムラがある



4. 多人数通話

- フルメッシュ ・・・ P2P、台数が増えると負荷増える
- MCU ・・・ サーバ経由、サーバの負荷が増える
- SFU ・・・ 送信1本、下りが複数。デコードよりもエンコードの方が負荷が高いので、上りが1本になると接続台数が増やせる


5. WebRTCは運用開始後が大変

- つながらないパターン

1. シグナリングサーバとの接続が出来ない(だいたいWSS)

> 理由は WebSocketが禁止されていたり、プロキシサーバが有ったりなので、ネットワークポリシーを変更してもらう

2. メディアの通信(P2P)が疎通できない

> NATタイプがセキュアとか、UDP禁止とか。これも ネットワークポリシー変更か、TURNサーバを用意する。TURNなら上りTCPに出来る
。UDP禁止ならそれしか選択肢は無い。


プラットフォームサービス

積極的に活用しよう
OpenTok・・・SFUを利用した多対多
CafeX・・・LiveAssist等のWebRTC対応コンタクトセンターに
Skyway・・・日本唯一のプラットフォームサービス
Twillo・・・SIPとWebRTCを中継するSBC機能が特徴
FacePeer・・・ビデオチャットに特化

ミドルウェア
WebRTC SFU SORA・・・時雨堂、国産ソフトウェアベースSFU

質疑応答
Screen Share は Safariでいけるの? プラグインとかが要るの?
-> SafariにAPIは無い。temasysを入れてもらうと使える

H264UC <-> H264 は互換性があるの?
-> 無い

Edgeでデータコネクションが存在しないが、チャット通信はどうすれば
-> websocketを使いましょう


兎に角熱量の高い発表で聞き入ってしまいました。
事前にスライドは拝見していて中身は判っている筈だったけど、現地で直接話を伺うと記憶への定着率が全然違う感があります。




WebRTCのデバッグに関するTips&Tricks

@mzsm_jさん

わかるの人
BOOTHから買ってください


Webカメラ無しで大丈夫
映像を取得できる

Safari: 模擬キャプチャデバイス
Chrome: オプション指定で起動
Firefox fake:true
Edge なし

Firefoxのfake:trueは知らなかったので個人的に嬉しい。
個人でWebRTC開発するときにカメラ足らない問題は深刻なので。


localhostで大丈夫
gUM制限、SSL必須、localhostだけは例外

手元と公開サーバの間でhttpトンネル
Macの場合homebrewで入る

これ後で試しました。
brew cask install ngrok
ngrok http 3000
って感じでした。
便利。


LT iOS11は本当にWebRTCに対応したのか

@sbntaminifさん


weblioの人、最近京都近郊の勉強会に必ず誰かいる印象。


iOS上のブラウザのWebRTC対応状況

- Safari ○
- Chrome ☓
- Opera  ☓
- Edgeプレビュー ☓

ネイティブアプリ側の対応状況

- WKWebView ☓
- SFSafariViewController ☓
- UIWebView(depredated) ☓

getUserMedia が無い。通信は出来る。
このへんは個人的にはかなり残念なお知らせです。

【記事掲載】SOBAプロジェクト、セミナー配信ソフトをパッケージ化−簡単にオンラインシステム構築(日刊工業新聞)

業界初、当社が開発したプラグイン可能なライブ配信ソフトウエア「SOBA LIVE for Seminar」サービス開始に関する記事が掲載されました。

■ 2015年12月7日 日刊工業新聞(電機・電子部品・情報・通信面)
「SOBAプロジェクト、セミナー配信ソフトをパッケージ化−簡単にオンラインシステム構築」


本件のニュースリリースはこちらhttp://www.soba-project.com/03_press/#article-9092097 

SOBA LIVE for Seminar 公式サイト https://live.soba-project.com/


【記事掲載】SOBAプロジェクト:業界初、プラグイン可能なセミナー配信ソフトウェア クラウドサービス「SOBA LIVE for Seminar」の提供開始(CNAレポートジャパン)

業界初、当社が開発したプラグイン可能なライブ配信ソフトウエア「SOBA LIVE for Seminar」サービス開始に関する記事が掲載されました。

■ 2015年11月30日号 Vol.17 No.22  CNAレポート・ジャパン
「 SOBAプロジェクト:業界初、プラグイン可能なセミナー配信ソフトウェア クラウドサービス『SOBA LIVE for Seminar』」の提供開始」


掲載記事 http://cnar.jp/home/CNAarchive/cnar-15-1130.pdf (PDF)

本件のニュースリリースはこちらhttp://www.soba-project.com/03_press/#article-9092097 

SOBA LIVE for Seminar 公式サイト https://live.soba-project.com/


【記事掲載】 SOBAプロジェクト、ライブ配信/録画配信プラグインを提供(キーマンズネット)

業界初、当社が開発したプラグイン可能なライブ配信ソフトウエア「SOBA LIVE for Seminar」サービス開始に関する記事が掲載されました。

■ 2015年11月30日 キーマンズネット
「 SOBAプロジェクト、ライブ配信/録画配信プラグインを提供」


掲載記事 http://www.keyman.or.jp/nw/20064899/

本件のニュースリリースはこちらhttp://www.soba-project.com/03_press/#article-9092097 

SOBA LIVE for Seminar 公式サイト https://live.soba-project.com/


【記事掲載】SOBA/セミナーのライブ配信や録画配信を容易にするソフトウエア(ICT教育ニュース)

業界初、当社が開発したプラグイン可能なライブ配信ソフトウエア「SOBA LIVE for Seminar」サービス開始に関する記事が掲載されました。

■ 2015年11月27日 ICT教育ニュース
SOBA/セミナーのライブ配信や録画配信を容易にするソフトウエア


掲載記事はこちら http://ict-enews.net/2015/11/27soba/

本件のニュースリリースはこちらhttp://www.soba-project.com/03_press/#article-9092097 

SOBA LIVE for Seminar 公式サイト https://live.soba-project.com/