Trace:
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
ja:webrtc [2020/04/05 13:54] yanai |
ja:webrtc [2020/04/07 09:01] yanai |
||
---|---|---|---|
Line 1: | Line 1: | ||
===脱Zoom宣言! WebRTC API でオリジナルのコミュニケーションツールを作ろう=== | ===脱Zoom宣言! WebRTC API でオリジナルのコミュニケーションツールを作ろう=== | ||
- | Zoomを皆さん使っていると思いますが、実は、これはWebRTC (Web RealTime Communication) APIを使ったアプリケーションにすぎません。WebRTCを使えば、自前のWeb会議システムは簡単(?) に実装可能です。オリジナルのオンラインコミュニケーションツールを開発しましょう! | + | Zoomを皆さん使っていると思いますが、実は、これはWebRTC (Web RealTime Communication) APIを使ったアプリケーションにすぎません。WebRTCを使えば、自前のWeb会議システムは簡単(?) に実装可能です。Zoomは会議にはいいけど,人と人とのコミュニケーションにはいまいち...と思っている皆さん,オリジナルのオンラインコミュニケーションツールを開発しましょう! |
WebRTC APIは、JavaScriptから簡単に利用することができます。つまり、基本的にはJavaScript だけで、実現できるということになります。 | WebRTC APIは、JavaScriptから簡単に利用することができます。つまり、基本的にはJavaScript だけで、実現できるということになります。 | ||
実現に向けて、ここに参考リンクを増やしていきます。 | 実現に向けて、ここに参考リンクを増やしていきます。 | ||
+ | ==WebRTC関連リンク== | ||
* [[https://webrtc.org/|Web RTC . org]] 公式ページ | * [[https://webrtc.org/|Web RTC . org]] 公式ページ | ||
* [[https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API|WebRTC API specification]] | * [[https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API|WebRTC API specification]] | ||
Line 13: | Line 13: | ||
* [[https://gist.github.com/voluntas/67e5a26915751226fdcf|WebRTCコトハジメ]] | * [[https://gist.github.com/voluntas/67e5a26915751226fdcf|WebRTCコトハジメ]] | ||
* [[https://qiita.com/lighthouse/items/34bb8ccb6149bbfae427|WebRTCでビデオチャットアプリを作ってみた!]] | * [[https://qiita.com/lighthouse/items/34bb8ccb6149bbfae427|WebRTCでビデオチャットアプリを作ってみた!]] | ||
- | + | ==WebRTCベースのOSS Web会議システム== | |
- | * [[https://webrtc.ecl.ntt.com/js-sdk.html|NTTコムのSkyWay SDK]] WebRTCをいきなり使うのはハードルが高い場合は、WebRTCのWrapperである、SkyWayのSDKを使ってみるのがいいでしょう。 | + | * [[https://meet.jit.si/|JITSI]] WebRTCベースのオープンソースのビデオ会議システム[[https://github.com/jitsi/jitsi-meet|github]] サーバベースの多対多通信をサポートしていて,サーバのコードも含まれています. |
+ | * [[http://webrtc.intel.com/|Intel Open WebRTC ToolKit]] SFU + MCUの両方入ってます.[[https://github.com/open-webrtc-toolkit/owt-server|github]] The usage scenarios for real-time media stream analytics including but not limited to movement/object detectionと書かれているので,サーバに画像処理追加可能です. | ||
+ | * [[http://www.kurento.org/|Kurento]] an Open Source Software WebRTC media server. Seamlessly OpenCV integration と書かれているのでかなり期待できそう.[[https://doc-kurento.readthedocs.io/en/6.13.0/user/about.html|Document]]が充実しています.Media serverにmedia processing moduleを簡単に追加できるそうです.リアルタイム画像変換入れるにはこれが最適そう. | ||
+ | * [[http://lynckia.com/licode/|Licode]] Server/Clientともに,APIが整備されている.Client APIのgetVideoFrame()をvideo streamをcanvasに取り込めて,Javascript上で画像処理できます.Server APIでは,streamは取り込めない. | ||
+ | * [[https://webrtc.ecl.ntt.com/js-sdk.html|NTTコムのSkyWay SDK]] OSSではないですが,サーバインストールしないで済ますには,無償のNTTコムのSkyWayサーバを利用することを前提にSkyWayのSDKを使って見る手があります.[[https://qiita.com/advent-calendar/2018/skyway|活用事例集 (SkyWay 2018 Advent Calendar)]] | ||
昔は,ブラウザからマイクやカメラにアクセスするにはFlashを利用することが必須でしたが,Flashは今年で終了が決まっています.それに代わるJavaScriptベースのAPIがWebRTCということになります.PCのブラウザ(Chrome, Firefox, Safari, Edge) はもちろん,iPhone/iPadのSafari, AndroidのChromeでも動作するのが特徴です. | 昔は,ブラウザからマイクやカメラにアクセスするにはFlashを利用することが必須でしたが,Flashは今年で終了が決まっています.それに代わるJavaScriptベースのAPIがWebRTCということになります.PCのブラウザ(Chrome, Firefox, Safari, Edge) はもちろん,iPhone/iPadのSafari, AndroidのChromeでも動作するのが特徴です. | ||
Line 20: | Line 24: | ||
WebRTCの通信方法は,P2Pベースの1対1通信,サーバが仲介する多対多通信の2通りがあります.P2Pの場合は,最初に2つの通信先にIPアドレスなどを仲介するシグナリングサーバが必要です.また,P2P通信を3人以上の参加者すべての間で行うフルメッシュ型通信というのもあります.多対多の場合は,MCU (Multipoint Control Unit)かSFU (Selective Forwarding Unit) と呼ばれるサーバが必要になります.MCUはサーバで映像や音声の合成処理を行いますが,SFUでは単にクライアントから受け取った映像・音声のストリームを選択し,そのままクライアントに転送するだけです.Zoomなどでは喋っている人の音声と映像に自動的に切り替わりますが,SFUで配信対象ストリームが自動的に選択されているためだと推測できます.SFUは信号の加工を行わないため遅延が小さいですが,MCUでは加工を行うためサーバに負荷が発生し,遅延が発生しやすくなります.通常はSFUですが,遅延があまり問題にならないZoomの参加者16名までの合成映像などはMCUによって処理されているものと推測できます.各クライアントとサーバの間は通常のサーバクライアント通信です. | WebRTCの通信方法は,P2Pベースの1対1通信,サーバが仲介する多対多通信の2通りがあります.P2Pの場合は,最初に2つの通信先にIPアドレスなどを仲介するシグナリングサーバが必要です.また,P2P通信を3人以上の参加者すべての間で行うフルメッシュ型通信というのもあります.多対多の場合は,MCU (Multipoint Control Unit)かSFU (Selective Forwarding Unit) と呼ばれるサーバが必要になります.MCUはサーバで映像や音声の合成処理を行いますが,SFUでは単にクライアントから受け取った映像・音声のストリームを選択し,そのままクライアントに転送するだけです.Zoomなどでは喋っている人の音声と映像に自動的に切り替わりますが,SFUで配信対象ストリームが自動的に選択されているためだと推測できます.SFUは信号の加工を行わないため遅延が小さいですが,MCUでは加工を行うためサーバに負荷が発生し,遅延が発生しやすくなります.通常はSFUですが,遅延があまり問題にならないZoomの参加者16名までの合成映像などはMCUによって処理されているものと推測できます.各クライアントとサーバの間は通常のサーバクライアント通信です. | ||
- | オリジナルの通信ツールを作るには,いずれにしてもサーバが必要です.多数の参加が可能なSFU/MCUがどのように用意するかがポイントになりそうです.P2Pでも5人くらいまでならフルメッシュでなんとかなるでしょう. | + | オリジナルの通信ツールを作るには,OSSのmedia serverを利用するのが良さそうです.いずれもJavascriptのclient sample codeがあるので,改造は容易です.[[https://doc-kurento.readthedocs.io/en/6.13.0/|Kureto]]がドキュメントが充実しているので,良さそうです. |
- | => [[https://webrtc.ecl.ntt.com/|SkyWayの無償SFUサーバ]]を借りるのが現実的な解のようです.[[https://qiita.com/advent-calendar/2018/skyway|活用事例集 (SkyWay 2018 Advent Calendar)]] | + | |
- | MCUもしくはクライアントで以下のような付加価値をつけて研究的なことを行うこともできます. | + | こちらはクライアントでの処理の例です.こちらはサーバ処理よりも敷居が低いです. |
* [[https://qiita.com/taka_katsu411/items/9ca5baa04671c8aedde7|WebRTCで画像処理]] | * [[https://qiita.com/taka_katsu411/items/9ca5baa04671c8aedde7|WebRTCで画像処理]] | ||
+ | * [[https://webrtchacks.com/webrtc-cv-tensorflow/|WebRTC+TensorFlow ObjectDetection]] | ||
+ | * [[https://qiita.com/hand10ryo/items/d7959d9ca8524a8369ab|WebRTC×Tensorflow.jsによるエッジAI感情認識ビデオチャット!]] SkyWayを利用. | ||
* [[https://qiita.com/yorifuji/items/9988f9a31c48bae31def|WebRTCで音声翻訳]] | * [[https://qiita.com/yorifuji/items/9988f9a31c48bae31def|WebRTCで音声翻訳]] | ||