WebRTC P2P を使った画面共有サービスを作ってみた
三行まとめ
- WebRTC の getDisplayMedia API を利用した P2P で画面共有するサービスを作りました。
- 全て Managed Service (AWS & Firebase) 上で動作しており、ほぼノーメンテナンスでそれなりスケールします。
- 無料。ただし、音声無し、TURNサーバー無し、SLA 無しで、繋がらないこともそれなりにあると思うので、クリティカルな用途に使用することは非推奨
使い方
どういう風に使うのか、また遅延はどれくらいなのかを以下の動画をご覧ください。 配信側は WiFi で、視聴側の iPhone は LTE 回線で繋がっています。
Fully managed and serverless Screen Sharing Service: getdisplay.media
- 配信は GitHub 認証が必須ですが、視聴側はシェアされた URL を開くだけで認証不要です。
- 配信できるのは Chrome M72以上, FireFox 66以上, Chromium ベースなEdge のみ。
- 視聴側は WebRTC Unified Plan をサポートしていればいいので、上記のブラウザに加えて、macOS 10.14.4 または iOS 12.2 以降の Safari でも見えます。（macOS 10.14.4 / iOS 12.2 の方は「実験的な機能」から WebRTC Unified Plan を有効化してください。macOS 10.14.5 / iOS 12.3 からはデフォルトで有効化されいます。）Android は手元に端末がなかったので未確認ですが、Chrome M72 以降を使えば見えるはずです。
使っている技術
- Frontend
- React (可能な限り、Hooks を利用）
- AWS S3 にデプロイして、CloudFront 経由で配信
- 認証
- Signaling Server
- Serverless WebRTC Signaling Server の Firebase Authentication 対応カスタマイズ版
- AWS のマネージドサービス上で動作 (API Gateway, Lambda, DynamoDB)
ソースコードの公開の予定はありませんが、特に秘密があるわけではないので興味があって話を聞きたいという人がいれば、Twitter でお声がけください。
Kazuyuki Honda (@hakobera) | Twitter
過去（７年前）には WebSocket で画面を PNG として転送するという力技をやっていましたが、WebRTC ですごく簡単にできるようになったので、ブラウザの進歩を感じました。
最後に
WebRTC はがっつりやろうと思うと大変難しいですが、JavaScript の API を叩いてブラウザ上で動かすだけなら簡単です。 動画、音声とか、話題のゲームストリーミングなどに興味のある人は触ってみるといいのではないでしょうか。
より詳細を知りたくなった場合は、WebRTC SFU を開発している時雨堂さんに資料がまとまっていて大変参考になります。
