Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
ja:webrtc [2020/04/06 16:16]
yanai
ja:webrtc [2020/04/07 09:23] (current)
yanai
Line 1: Line 1:
-===脱Zoom宣言! WebRTC API でオリジナルのコミュニケーションツールを作ろう===+====脱Zoom宣言! WebRTC API でオリジナルのコミュニケーションツールを作ろう====
  
 Zoomを皆さん使っていると思いますが、実は、これはWebRTC (Web RealTime Communication) APIを使ったアプリケーションにすぎません。WebRTCを使えば、自前のWeb会議システムは簡単(?​) に実装可能です。Zoomは会議にはいいけど,人と人とのコミュニケーションにはいまいち...と思っている皆さん,オリジナルのオンラインコミュニケーションツールを開発しましょう!  Zoomを皆さん使っていると思いますが、実は、これはWebRTC (Web RealTime Communication) APIを使ったアプリケーションにすぎません。WebRTCを使えば、自前のWeb会議システムは簡単(?​) に実装可能です。Zoomは会議にはいいけど,人と人とのコミュニケーションにはいまいち...と思っている皆さん,オリジナルのオンラインコミュニケーションツールを開発しましょう! 
Line 15: Line 15:
 ==WebRTCベースのOSS Web会議システム== ==WebRTCベースのOSS Web会議システム==
   * [[https://​meet.jit.si/​|JITSI]] WebRTCベースのオープンソースのビデオ会議システム[[https://​github.com/​jitsi/​jitsi-meet|github]] サーバベースの多対多通信をサポートしていて,サーバのコードも含まれています.   * [[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://​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と書かれているので,サーバ画像処理追加可能です. 
-  * [[https://​webrtc.ecl.ntt.com/​js-sdk.html|NTTコムのSkyWay SDK]] OSSではないですが,サーバインストールしないで済ますには,無償のNTTコムのSkyWayサーバを利用することを前提にSkyWayのSDKを使って見る手があります.+  * [[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 22: 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人くらいまならフルメッシュなんとかなるでしょう +オリジナルの通信ツールを作るには,OSSmedia 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://​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で音声翻訳]]
 +
 +==J専攻学生が作ったコロナ対応OSS==
 +  * [[https://​github.com/​nenoNaninu/​NeuralVirtualCam|リアルタイムスタイル変換仮想カメラドライバNeuralVirtualCam]] ビデオチャットの映像をリアルタイムでスタイル変換します.標準的なConvResBlockDeconvNetによる変換なので,パラメータを入れ替えれば,様々な変換に対応できます.Ubuntu+GPU搭載マシン限定です.