WebRTC開発あれこれ

[**agoraがよくわかる！無料セミナー実施中！>**](https://jp.vcube.com/service/agora#seminar)  

#WebRTCを利用したアプリケーション開発時に活用するツールや提供サイトをまとめてみました
あくまで個人的な所感です。
オススメがあれば是非コメントをください。

##WebRTC 開発環境
Visual Studio Code(通称VSCode?)
![スクリーンショット 0001-09-11 16.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/309ac8c5-2b26-bff2-9b8d-358ed66589b9.png)
・軽量でサクサク動く
・Gitクライアント標準装備
・[LiveServer(Plugin)](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)が便利
・デザインがcool

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

##頼れるサイト
[WebRTCテスト](https://test.webrtc.org/)
自分の環境では何故かAudioがNGになります。。。
![スクリーンショット 0001-09-11 16.33.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/a45f5bbf-4aac-c138-10b0-05658c3159e2.png)


[ブラウザ対応表](https://caniuse.com/#search=webrtc)
![スクリーンショット 0001-09-11 16.52.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/e6c02132-317a-99bf-2f5b-ce3b75ef1139.png)

[カメラ設定の確認](https://webrtc.github.io/samples/src/content/peerconnection/old-new-stats/)
<img width="1453" alt="スクリーンショット 0002-06-19 8.51.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/351340d7-fda3-53f8-9b62-f63339852d39.png">

[Chromeのロードマップ](https://chromestatus.com/roadmap)
![スクリーンショット 0004-01-05 15.38.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/0778f3f8-5053-d0c4-c681-47cbcae3b423.png)



[agora.ioデモ](https://videocall.agora.io/#/)
自由に使えます。ROOM NAMEはなるべくバッティングしないNAMEを推奨します。
![スクリーンショット 0001-09-11 17.10.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/a9b768d2-4b1a-8c53-9382-cea52d2fee24.png)

[2019年のトレンド(海外サイト)](https://webrtc.ventures/2019/09/2019-webrtc-trends-use-cases/)


##WebTRC開発ブラウザ
Google Chrome
[chrome://webrtc-internals/](chrome://webrtc-internals/)
Google Chromeの機能です。画角やFPS等の統計情報がリアルタイムに見えます。
![スクリーンショット 0001-09-11 17.01.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/6919762f-fd98-8b2a-8554-42317b5ca906.png)

[chrome://inspect/#devices](chrome://inspect/#devices)
Androidではconsole.logや要素の確認ができないのでPCにつないで確認しています。
<img width="250" alt="スクリーンショット 0001-09-12 13.16.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/d8dcb76a-94f5-9c21-3fbf-f5714b283317.png">
<img width="250" alt="スクリーンショット 0001-09-12 13.16.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/18519cae-4ad2-f480-72c9-f0f7091bc971.png">



Safari
<img width="250" alt="Webインスペクタ.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/57a500d4-3f09-895b-dda5-d6335580013d.jpeg">
iPhoneではconsole.logや要素の確認ができないのでPCにつないで確認しています。
メニュー>開発>該当のデバイス　でアクセスできます。


##WebRTCコミュニティ
[WebRTC-JP Slack](https://webrtc-jp.slack.com/)
たまにイベントに参加しています。登壇したこともありました。
WebRTCに使える技術やサービス提供を直接受けられる場として使えるかと思います。


##SDK
・SkyWay
・Twilio
・OpenTok
・[agora.io](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=5eb8f12b3a2d968655d4)
・aws Kinesis Video Stream WebRTC(New!)

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

##VR関連ライブラリ
WebRTC+VR。OculusやVRレンズをつけたスマホでVR体験ができます。
・aframe.io

##ネットワーク関連
・[Squid](http://www.squid-cache.org/)
TCP:80/443しか通信できない環境の再現に利用します。
UDPの良さがなくなってしまいますが。。。

##興味のある端末デバイス
PCやスマホがメインですが、以下のデバイスとの相性もよさそうです。
・raspberry pi
・360度カメラ RICOH THETA
・ドローン

##小技
###iframe内での利用
iframeでWebRTCのアプリケーションを呼び出す際、カメラとマイクに対しては以下の属性と追記する必要があります。

```html
<iframe 
    src="https://HOST/PATH"
    allow="microphone; camera">
</iframe>
```



---
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=5eb8f12b3a2d968655d4)
[**agoraがよくわかる！無料セミナー実施中！**](https://jp.vcube.com/service/agora#seminar)  
[<img width="912" alt="Agoraの詳細はこちら" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5865441c-9d31-c702-3698-3aeb84927f28.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=dd30a977b68855ceeb64)