• Web会議

WebRTCでの開発時に使えるツールやサイト(まとめ)

WebRTCでの開発時に使えるツールやサイト(まとめ)

WebRTCを利用したアプリケーション開発で活用できるツールやサイトをまとめてみました。

あくまで個人的な所感にもとづくものではあります。

WebRTC開発環境

Visual Studio Code (通称VSCode)

スクリーンショット 0001-09-11 16.29.05.png

とにかく、デザインがよく、サクサク動く。

さらに、
・Gitクライアント標準装備
LiveServer(Plugin)が便利

もうEclipseの時代は終わりかけてますかね。。

WebRTC開発に使えるブラウザ

Google Chrome
chrome://webrtc-internals/(Google Chromeでご覧ください)
Google Chromeの機能です。FPSや画角等の統計情報がリアルタイムに見えます。

スクリーンショット 0001-09-11 17.01.58.png

chrome://inspect/#devices(Google Chromeでご覧ください)
Androidではconsole.logや要素の確認ができないのでPCにつないで確認しています。

スクリーンショット 0001-09-12 13.16.19.png
スクリーンショット 0001-09-12 13.16.33.png

Safari

Webインスペクタ.jpg

iPhoneではconsole.logや要素の確認ができないのでPCにつないで確認しています。
メニュー>開発>該当のデバイス でアクセスできます。

WebRTCの情報サイト

WebRTCテスト
筆者の環境だとAudioがNGになりました。。

スクリーンショット 0001-09-11 16.33.05.png

ブラウザ対応表

スクリーンショット 0001-09-11 16.52.30.png

agora.ioデモ
自由に使えます。ROOM NAMEはなるべくバッティングしないNAMEがおすすめ。

スクリーンショット 0001-09-11 17.10.26.png

2019年のトレンド(海外サイト)

すぐに使えるSDK

・OpenTok
agora.io
・aws Kinesis Video Stream WebRTC(New!)
・SkyWay
・Twilio

WebRTC開発者コミュニティ

WebRTC-JP
WebRTC-JP Slack
イベントにときおり参加しています。筆者が登壇したこともあります。
WebRTCに利用できる技術やサービス提供を直接受けられる場として有効かと思います。

ネットワーク調査

Squid
TCP:80/443しか通信できない環境の再現に利用します。
UDPの良さがなくなってしまいますが。。

端末・デバイス

PCやスマホがメインですが、他にも相性がよさそうなデバイスがこちらです。
・360度カメラ RICOH THETA
・ドローン
・raspberry pi

(おまけ) 顔認識ライブラリ

カメラ映像を加工する際に利用します。ステッカー(SNOWのような!)も実現できます。
オープンソースでも比較的正確に顔認識してくれます。
・clmtrackr.js
・pico.js

(おまけ) VR関連ライブラリ

WebRTC+VR。OculusやVRレンズをつけたスマホでVR体験ができます。
・aframe.io

以上です。ぜひWebRTC開発に役立ててみてください。

ブイキューブ
著者情報ブイキューブ

ブイキューブは映像コミュニケーションの総合ソリューションプロバイダとして、世界中どこにいても働ける働き方・環境の実現を目指しています。創業時よりテレワークを活用し、2016年には総務省「テレワーク先駆者百選 総務大臣賞」に選出されました。

大規模・安定・かんたんに実装 ライブ配信・ビデオ通話・音声通話SDK

mail_agora


agora.ioは、自社サービスのiOS・AndroidアプリやWebサイトにビデオ通話やライブ配信をかんたんに実装できるSDKです。

動画や音声のまったく新しいユーザー体験を実現し、自社のiOS・AndroidアプリやWebサービスに組み込める、APIと開発ツール群を提供しています。

agora.ioの特長

  • 「平均遅延0.3秒」で、従来のCDNの課題を解決
  • 1,000,000同時接続まで拡張可能で、従来のWebRTCの課題を解決
  • WebRTCやCDNよりも手軽に・すぐに・安価に始められる
  • WebRTCと互換性があり、P2P通信よりも安定

agora.ioについてはこちら