--- title: WebRTCでの開発時に使えるツールやサイト（まとめ）｜ブイキューブのはたらく研究部 description: WebRTCを利用したアプリケーション開発で活用できるツールやサイトをまとめてみました。 image: https://www.nice2meet.us/hubfs/teleworknavi/images/post_header/blog_webRTC-tools_main.png --- [![ブイキューブのはたらく研究部](https://www.nice2meet.us/hs-fs/hubfs/raw_assets/public/Custom/vcube-work-lab/theme/images/logo.png?width=302&height=104&name=logo.png)](https://www.nice2meet.us/) - [![公式Xアカウント](https://www.nice2meet.us/hubfs/raw_assets/public/Custom/vcube-work-lab/theme/images/icon_x.svg)](https://twitter.com/TeleworkNavi/) - [![公式Facebookアカウント](https://www.nice2meet.us/hubfs/raw_assets/public/Custom/vcube-work-lab/theme/images/icon_facebook.svg)](https://www.facebook.com/TeleworkNavi/) - [はたらく業界](https://www.nice2meet.us/tag/industry) はたらく業界 業界の動向や特色、最新情報をキャッチ - [#エンタメ](https://www.nice2meet.us/tag/industry_entertainment) - [#建設](https://www.nice2meet.us/tag/industry_construction) - [#不動産](https://www.nice2meet.us/tag/industry_realestate) - [#製造](https://www.nice2meet.us/tag/industry_manufacture) - [#官公庁](https://www.nice2meet.us/tag/industry_government) - [#製薬](https://www.nice2meet.us/tag/industry_pharma) - [はたらく部署](https://www.nice2meet.us/tag/department) はたらく部署 部署別の課題と成功の秘訣を探る - [#総務](https://www.nice2meet.us/tag/department_general-affairs) - [#法務](https://www.nice2meet.us/tag/department_legal-affairs) - [#人事](https://www.nice2meet.us/tag/department_human-resources) - [#経理](https://www.nice2meet.us/tag/department_accounting) - [#広報](https://www.nice2meet.us/tag/department_public-relations) - [#経営企画](https://www.nice2meet.us/tag/department_busines-planning) - [#マーケティング](https://www.nice2meet.us/tag/department_marketing) - [#営業](https://www.nice2meet.us/tag/department_sales) - [#現場作業](https://www.nice2meet.us/tag/department_fieldwork) - [#情シス](https://www.nice2meet.us/tag/department_information-system) - [はたらく課題](https://www.nice2meet.us/tag/issue) はたらく課題 日々の業務課題を解決するヒントとケーススタディ - [#オフィス](https://www.nice2meet.us/tag/issue_office) - [#生産性向上](https://www.nice2meet.us/tag/issue_productivity-improvement) - [#採用](https://www.nice2meet.us/tag/issue_recruitment) - [#研修・教育](https://www.nice2meet.us/tag/issue_training-education) - [#エンゲージメント向上](https://www.nice2meet.us/tag/issue_engagement) - [#はたらき方](https://www.nice2meet.us/tag/issue_workstyle) - [#社内コミュニケーション](https://www.nice2meet.us/tag/issue_internal-communication) - [#テレワーク・ハイブリッドワーク](https://www.nice2meet.us/tag/issue_telework-hybridwork) - [#DX](https://www.nice2meet.us/tag/issue_dx) - [#PR](https://www.nice2meet.us/tag/issue_pr) - [#記者会見・発表会](https://www.nice2meet.us/tag/issue_pressconference-announcement) - [#株主総会](https://www.nice2meet.us/tag/issue_shareholder-meeting) - [#コスト削減](https://www.nice2meet.us/tag/issue_cost-reduction) - [#業務効率化](https://www.nice2meet.us/tag/issue_business-efficiency) - [#接客・販売](https://www.nice2meet.us/tag/issue_customer-service) - [#営業](https://www.nice2meet.us/tag/issue_sales) - [はたらく製品・サービス](https://www.nice2meet.us/tag/product) はたらく製品・サービス 業務に役立つ製品・サービスの最新情報と事例 - [#Web会議](https://www.nice2meet.us/tag/product_web-conference) - [#オンラインイベント](https://www.nice2meet.us/tag/product_online-event) - [#SDK](https://www.nice2meet.us/tag/product_sdk) - [#個室ブース](https://www.nice2meet.us/tag/product_privatebooth) - [#スマートグラス](https://www.nice2meet.us/tag/product_smartglasses) - [#社内動画](https://www.nice2meet.us/tag/product_internalvideo) - [#株主総会](https://www.nice2meet.us/tag/product_shareholder-meeting) - [#メタバース](https://www.nice2meet.us/tag/product_metaverse) - [#クラウド電話](https://www.nice2meet.us/tag/product_cloudphone) メニュー - [はたらく業界](https://www.nice2meet.us/tag/industry) - [はたらく部署](https://www.nice2meet.us/tag/department) - [はたらく課題](https://www.nice2meet.us/tag/issue) - [はたらく製品・サービス](https://www.nice2meet.us/tag/product) - [公式X](https://twitter.com/TeleworkNavi/) - [公式Facebook](https://www.facebook.com/TeleworkNavi/) - [![twitter](https://www.nice2meet.us/hubfs/raw_assets/public/Custom/vcube-work-lab/theme/images/icon_x.svg)ポスト](https://twitter.com/share?url=https://www.nice2meet.us/tools-and-sites-that-can-be-used-when-developing-with-webrtc&text=WebRTCでの開発時に使えるツールやサイト（まとめ）) - [![facebook](https://www.nice2meet.us/hubfs/raw_assets/public/Custom/vcube-work-lab/theme/images/icon_facebook.svg)シェア](http://www.facebook.com/sharer.php?u=https://www.nice2meet.us/tools-and-sites-that-can-be-used-when-developing-with-webrtc&t=WebRTCでの開発時に使えるツールやサイト（まとめ）) - [![](https://www.nice2meet.us/hubfs/raw_assets/public/Custom/vcube-work-lab/theme/images/icon_line.svg)LINEで 送る](https://social-plugins.line.me/lineit/share?url={encodeURIComponent(URL)}) - ![](https://www.nice2meet.us/hubfs/raw_assets/public/Custom/vcube-work-lab/theme/images/icon_link.svg)URLを コピー # WebRTCでの開発時に使えるツールやサイト（まとめ） - [#SDK](https://www.nice2meet.us/tag/product_sdk) 2020.03.07 ![](https://www.nice2meet.us/hubfs/teleworknavi/images/post_header/blog_webRTC-tools_main.png) WebRTCを利用したアプリケーション開発で活用できるツールやサイトをまとめてみました。 あくまで個人的な所感にもとづくものではあります。 ###### 目次［ 非表示 ］［ 表示 ］ ## **WebRTC****開発環境** Visual Studio Code (通称VSCode) ![スクリーンショット 0001-09-11 16.29.05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F300377%2F309ac8c5-2b26-bff2-9b8d-358ed66589b9.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=7f28e04b57e3a8ca3205b6766497c8ca) とにかく、デザインがよく、サクサク動く。 さらに、 ・Gitクライアント標準装備 ・[LiveServer(Plugin)](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)が便利 もうEclipseの時代は終わりかけてますかね。。 ## **WebRＴC開発に使えるブラウザ** Google Chrome chrome://webrtc-internals/（Google Chromeでご覧ください） Google Chromeの機能です。FPSや画角等の統計情報がリアルタイムに見えます。 ![スクリーンショット 0001-09-11 17.01.58.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F300377%2F6919762f-fd98-8b2a-8554-42317b5ca906.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=abb71b2fc79100c8dadda87c593c016f) chrome://inspect/#devices（Google Chromeでご覧ください） Androidではconsole.logや要素の確認ができないのでPCにつないで確認しています。 ![スクリーンショット 0001-09-12 13.16.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F300377%2Fd8dcb76a-94f5-9c21-3fbf-f5714b283317.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=6e1948010a743562274dacbf1b4c81fd) ![スクリーンショット 0001-09-12 13.16.33.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F300377%2F18519cae-4ad2-f480-72c9-f0f7091bc971.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=02071a614f915156ed5344214acb6e58) Safari ![Webインスペクタ.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F300377%2F57a500d4-3f09-895b-dda5-d6335580013d.jpeg?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=fe95310e2e213bacbdd5a0a98be98193) iPhoneではconsole.logや要素の確認ができないのでPCにつないで確認しています。 メニュー>開発>該当のデバイス　でアクセスできます。 ## **WebRTCの情報サイト** [WebRTCテスト](https://test.webrtc.org/) 筆者の環境だとAudioがNGになりました。。 ![スクリーンショット 0001-09-11 16.33.05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F300377%2Fa45f5bbf-4aac-c138-10b0-05658c3159e2.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=604463610682d492e975189892a15c0f) [ブラウザ対応表](https://caniuse.com/#search=webrtc) ![スクリーンショット 0001-09-11 16.52.30.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F300377%2Fe6c02132-317a-99bf-2f5b-ce3b75ef1139.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=83f57528acd78d54cd32339c7d640614) [Agoraデモ](https://videocall.agora.io/#/) 自由に使えます。ROOM NAMEはなるべくバッティングしないNAMEがおすすめ。 ![スクリーンショット 0001-09-11 17.10.26.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F300377%2Fa9b768d2-4b1a-8c53-9382-cea52d2fee24.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=8fb84c02408d2ba2d5099ec2b04b2be1) [2019年のトレンド(海外サイト)](https://webrtc.ventures/2019/09/2019-webrtc-trends-use-cases/) ## **すぐに使えるSDK** ・OpenTok ・A[gora](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=5eb8f12b3a2d968655d4) ・aws Kinesis Video Stream WebRTC(New!) ・SkyWay ・Twilio ## **WebRTC開発者コミュニティ** [WebRTC-JP](https://atnd.org/groups/webrtc) [WebRTC-JP Slack](https://webrtc-jp.slack.com/) イベントにときおり参加しています。筆者が登壇したこともあります。 WebRTCに利用できる技術やサービス提供を直接受けられる場として有効かと思います。 ## **ネットワーク調査** ・[Squid](http://www.squid-cache.org/) TCP:80/443しか通信できない環境の再現に利用します。 UDPの良さがなくなってしまいますが。。 ## **端末・デバイス** PCやスマホがメインですが、他にも相性がよさそうなデバイスがこちらです。 ・360度カメラ RICOH THETA ・ドローン ・raspberry pi ## **(おまけ) 顔認識ライブラリ** カメラ映像を加工する際に利用します。ステッカー（SNOWのような！）も実現できます。 オープンソースでも比較的正確に顔認識してくれます。 ・clmtrackr.js ・pico.js ## **(おまけ) VR関連ライブラリ** WebRTC+VR。OculusやVRレンズをつけたスマホでVR体験ができます。 ・aframe.io 以上です。ぜひWebRTC開発に役立ててみてください。 ![ブイキューブ](https://www.nice2meet.us/hubfs/author/V-CUBE.jpg) ###### 著者情報ブイキューブ ブイキューブは映像コミュニケーションの総合ソリューションプロバイダとして、世界中どこにいても働ける働き方・環境の実現を目指しています。創業時よりテレワークを活用し、2016年には総務省「テレワーク先駆者百選　総務大臣賞」に選出されました。 ## 関連記事 [![代表的な音声配信アプリ12選！種類と特徴をご紹介](https://www.nice2meet.us/hs-fs/hubfs/teleworknavi/images/post_header/blog_audio-delivery_main.jpg?width=340&name=blog_audio-delivery_main.jpg) 代表的な音声配信アプリ12選！種類と特徴をご紹介 - #エンタメ - #SDK 2022.03.31 ](https://www.nice2meet.us/voice_streaming_app) [![SDKとは？基礎知識や活用事例を紹介](https://www.nice2meet.us/hs-fs/hubfs/teleworknavi/images/post_header/blog_sdk_main.jpg?width=340&name=blog_sdk_main.jpg) SDKとは？基礎知識や活用事例を紹介 - #SDK 2022.02.22 ](https://www.nice2meet.us/sdk) [![WebRTC SFUとは？通信方式の種類とリアルタイム配信ツールを自社開発する方法](https://www.nice2meet.us/hs-fs/hubfs/teleworknavi/images/post_header/blog_webrtc_sfu_main.jpg?width=340&name=blog_webrtc_sfu_main.jpg) WebRTC SFUとは？通信方式の種類とリアルタイム配信ツールを自社開発する方法 - #SDK 2022.02.18 ](https://www.nice2meet.us/webrtc_sfu) [![ボイスチャットアプリが話やすいワケ。Agoraの高音質オーディオ](https://www.nice2meet.us/hs-fs/hubfs/teleworknavi/images/post_header/blog_agora-sound-quality_main.jpg?width=340&name=blog_agora-sound-quality_main.jpg) ボイスチャットアプリが話やすいワケ。Agoraの高音質オーディオ - #エンタメ - #SDK 2021.06.03 ](https://www.nice2meet.us/agora-sound-qualoty) [![ブイキューブのはたらく研究部](https://www.nice2meet.us/hs-fs/hubfs/raw_assets/public/Custom/vcube-work-lab/theme/images/logo.png?width=246&height=86&name=logo.png)](https://www.nice2meet.us/) - [ブイキューブのはたらく研究部とは](https://www.nice2meet.us/about) - [運営会社](https://jp.vcube.com/) - [個人情報保護方針](https://jp.vcube.com/privacy) - [![各種お問い合わせ](https://no-cache.hubspot.com/cta/default/1970584/bd154394-2a9c-4779-9e26-740a5d569802.png)](https://cta-redirect.hubspot.com/cta/redirect/1970584/bd154394-2a9c-4779-9e26-740a5d569802) © V-cube, Inc. All Rights Reserved. ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "ブイキューブ", "url" : "https://www.nice2meet.us/author/ブイキューブ" }, "dateModified" : "2023-10-19T12:25:11.982Z", "datePublished" : "2020-03-07T12:25:00.000Z", "headline" : "WebRTCでの開発時に使えるツールやサイト（まとめ）", "image" : [ "https://www.nice2meet.us/hubfs/teleworknavi/images/post_header/blog_webRTC-tools_main.png" ], "mainEntityOfPage" : { "@id" : "https://www.nice2meet.us/tools-and-sites-that-can-be-used-when-developing-with-webrtc", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.nice2meet.us/hubfs/vcube-work-lab/logo.png" }, "name" : "株式会社ブイキューブ" } } ```