[WebRTC]PLiCy におけるゲーム実況配信機能の実装について

WebRTC Meetup Osaka#2 の講演資料です。
WebRTCとしては珍しく、
カメラではなくCanvasを利用した配信を採用しております。
Unity、RPGツクールMV、PlayCanvas、WolfRPGエディターや自社製ゲームエンジンなどのゲームをWebRTCを用いて配信します。

Transcript

1. PLiCy におけるゲーム実況 配信機能の実装について Canvas + WebRTC でゲーム画面を配信しよう 自作ゲーム投稿共有サイト
2. PLiCy(プリシー)とは • 自作フリーゲームの公開・共有を主目的としたSNS • RPGツクール、WolfRPGEditor、Unityといったゲームエンジンで作られた作品がブ ラウザ上で直接プレイ可能 • 自社製のWebGLゲームエンジンもあり • 13000以上のゲームが公開されている これらゲームの配信・実況システムをWebRTCで構築
3. ブラウザゲームの簡易配信機能 ゲームの配信は画面と音声を外部ツールでキャプチャして流す必要があった →ツールのダウンロード、インストール、設定など環境を整える必要がある →配信者になるのは面倒 ブラウザの機能だけで配信できるようにすればよいのでは？
4. ブラウザゲームの簡易配信機能 CanvasにcaptureStreamというAPIがある →WebRTCで使えるMediaStreamオブジェクトが取得できる →これを用いてCanvasの画面映像が配信可能 →2D・3Dは問わない（Unity製のゲームなども取れる） 音楽・効果音もWebAudioからMediaStreamに合成可能 マイクも取得できるので声付き実況も可能
5. ブラウザゲームの簡易配信機能 ブラウザの機能だけでゲームの配信ができる！ もちろんWebRTC自体が新しいものなのでそれに対応する環境は必要になる →少なくともAndroid4.0で動いたので すでに十分広まっていると見れる →iOS/Macintoshでも先月対応。なんとcaptureStreamも動きました。
6. Pli-Peerの仕様と目標 誰でも簡単に、ゲームページで実況配信をできるようにする。 →遊んでる人全員に配信をしてもらうのが目標。 トップページにアクセスした時、配信中の動画をランダムに流す。 →一人で遊ぶゲームでも、みんなで遊んでると感じられる！ →常時複数のゲーム放送がトップで流れてたら盛り上がりそう！
7. ゲーム画面を抽出 captureStreamで取得するだけ！ Game Designer World (WebGL) RPGツクールMV (WebGL/Canvas2D) Unity(WebGL) WWAWing (Canvas2D) WolfRPGエディター 互換(WebGL) Game Designer Action (WebGL/Canvas2D) Clickteam Fusion2.5 (Canvas2D) Play Canvas (WebGL) PLi-Log (Canvas2D) 内製ツール
8. ゲーム音楽の抽出 createMediaStreamDestination で WebAudio を配信できる。 →addTrack したり connect しないと再生できない。 内製ツールなら対応できるけど、 Unity や ツクールMV などの他社製ツールの音楽抽出はどうするの？
9. ゲーム音楽の抽出 ゲーム開始前に GainNode の prototype を書き換えて、 connect実行時に割り込めばいい！ →WebAudio の再生データを取得できました。
10. マイクを使った実況対応 getUserMedia API を使えばマイクが利用可能。 →HTTPS必須。SSL証明書を用意しましょう。 →配信時にマイク利用の設定ができるようにしました。
11. WebRTCの通信 とりあえず調べると色々な記事がすぐ出て来るPeerJSを利用 最終更新日付が怪しいものの、試したら動いたので続行 特に設定をしなくてもローカル同士では繋がった これは問題なくいけるのでは？
12. WebRTCの通信 ところがどっこい 外部ネットワークを介しての別PCとの接続がうまくいかない。 『NAT越え』をしないといけないので turnserver を用意しないといけません。
13. TURNサーバーの構築 Linux環境でしたら turnserver をインストールすることで構築可能です。 CentOS5 など古いOSでは動かないのでご注意ください。 CentOS7 などではインストール可能です。 conf の設定して turnserver 構築完了。 マイクを使う場合はSSLの設定も忘れずに。
14. データ通信 映像・音声とは別にデータ通信が使える RTCDataChannel API を用いてデータのやり取りが出来る これを用いて文字チャット機能を構築
15. ゲーム配信のサポート機能 チャットコメントの読み上げ Web Speech API で視聴者のチャットコメントを音声読み上げする →いわゆる「棒読みちゃん」「ゆっくり音声」みたいなもの →チャット欄を見なくても視聴者に対応できる
16. Safari対応 SafariでWebRTCに対応したと聞いて実装。 →まさかの captureStream 対応。ゲーム配信も行けます。 しかし PeerJS のエラー発生。 →RTCDataChannel API でOSをまたぐ String型 の通信にて問題。 →ソースの修正を試みる。 →データ通信を ArrayBuffer型 に統一。エラーが発生しなくなる。
17. EDGEについて oniceconnectionstatechange イベントハンドラで failed エラーが出る。 →原因がよく分からない。 →修正できても RTCDataChannel API 非対応だから、コメントが送れない。 →EDGE が RTCDataChannel API にサポートしたら本気出す。
18. WebRTCブラウザサポート状況 Chrome Firefox Safari EDGE MediaStream ✓ ✓ iframeを超えた addTrack不可 ✓ iframeを超えた RTCPeerConnection不可 △不安定 captureStream (Canvas配信) ✓ ✓ ✓ × createMediaStreamD estination (WebAudio配信) ✓ ✓ ✓ × getUserMedia (マイク/カメラ) (HTTPSのみ) ✓ ✓ ✓ ✓ RTCDataChannel (バイナリ通信) ✓ ✓ ✓ ×
19. 運用状況と課題 海外のユーザーがゲームの配信をしていたので状況確認。 →普通に配信が見えました。海外も大丈夫。 画質の設定がない →captureStream API でフレームレートは設定できる →通信に時間がかかると解像度が勝手に小さくなる？ 回線が細いと割りと途切れる →接続自体が切れるので都度接続し直し、配信者が切れると全員つなぎ直し。
20. Q.TURNサーバーには何を使用したのですか？ A.turnserverという名前のTURNサーバーを利用しました。 分かりづらいですが、パッケージ名が turnserver というプログラムです。 質疑応答
21. Q.何人程度の接続まで耐えられますか？ A.P2Pで直接接続する場合と、TURNサーバーを経由する場合があり、 環境によって接続方式が変わるため、一概に言うのは難しいです。 PLiCyの運用ではPC/Wifi環境で、10人程度まで配信はできました。 10人より多いとカクついてきます。 質疑応答 ※ゲーム実況配信なので、配信者のみがリスナーへ映像を送信する方式です。 　双方向に映像を送信しあう方式ではもっと少人数になるかと思われます。
22. 連絡先 ご清聴ありがとうございました。 ゲーム配信サービス PLiCy （プリシー） https://plicy.net/ twitterアカウント https://twitter.com/shine_star_name 公式アカウント https://twitter.com/plicy_info メール plicy_info@ukida.co.jp