ReactとWebRTCでZoomのようなビデオチャットアプリを作ってデータフローを図解してみた
はじめに こんにちは。 都内在住のフロントンドエンジニアです。 僕はとある会社にて約 1 年半ほど React と WebRTC を用いて映像配信のアプリケーション開発を行ってきました。 そこでは開発をスムーズに進める為に WebRTC の SDK を利用していて、 本来学習コストが高いとされている WebRTC をカジュアルに利用することができています。 しかし、より入り組んだ実装をしたり映像配信特有の問題（後述） を解決するとなると以下 3 つの WebAPI の理解は避けて通れません。 MediaStream RTCPeerConnection WebSocket 詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC 関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。
libwebrtc (Android) のカメラ API
はじめにlibwebrtc は Android, iOS 共にデバイスのカメラとマイクを操作する API を提供しています。両プラットフォームの API は統一されておらず、大まかな処理の流れは似ていますが個別に覚える必要があります。 Android 版はクラスとインターフェースの数が多くて把握に苦労したのでメモしておきます。カメラの映像を深くカスタマイズしたい方 (意外と少なくないと思います) のお役に立てれば幸いです。 なお、 iOS 版ではデバイス操作に関してあまり凝った API は提供されていません。内部ではわりと OS と密結合に実装されており、カスタマイズの余地は Android より少ないです。 諸注意この記事は M83 時点での情報です。記事中のコードは Kotlin です。元のコードが Java の場合は Kotlin の表記に変更しています。処理の流れカメラの映像の取得
フロントエンド x RTC界隈の最近とこれから - console.lealog();
フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptのAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。（WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど） ガワのAPIという観点でいうと、最近はも
SkyWay WebRTC GWを利用してUnityでWebRTC Videoをレンダリングする - Qiita
やったこと 最近公開されたSkyWayのWebRTC Gatewayを利用して、WebRTCの映像をUnityでレンダリングしてみました。 具体的な実装方法についてざっくり記載します => 2018/7/13追記: ソースコード公開して解説記事を書きました。 https://qiita.com/nakakura/items/a99c468c56db2a92b32f SkyWay WebRTC GW使ってブラウザからUnityに動画流し込み成功した。 リファクタしたらライブラリ化しよう。 pic.twitter.com/rFORJ55Dlc — るんばにゃん (@arukakan) 2018年7月10日 実装 Unityへのテクスチャ取り出しについては、MHD Yamen Saraiji氏のmrayGStreamerUnityを利用しました。Thanks Yamen! mrayGstream
YouTube が WebRTC 配信に対応した
Today we're making it easier to go live and interact with your community from your computer and phone. First, if you've… YouTube が WebRTC を利用した配信に対応した。つまり今まで YouTube で配信するには何かしらのツールが必要だったが、WebRTC を利用した配信機能を使うことでブラウザとウェブカメラだけあれば配信ができるようになる。 そう、つまり pixiv Sketch Live が実現したあの手軽な配信が YouTube でも可能になった。ただ、まだ画面共有に関してはまだできなさそうだ。 配信者はブラウザから配信して、あとは YouTube が HLS や MPEG-DASH に変換してくれるので、スケーラビリティを気にする必要はない。もちろん
WebRTC を利用した配信の現実
超低遅延、高画質な配信を実現するための選択肢の一つとして WebRTC があります。 ただ WebRTC はもともと少人数で双方向の配信を前提としているため、スケールしないというのが一般的な認識です。 せっかくなので WebRTC サーバを開発・販売している立場から WebRTC を利用した配信の現実がどの程度なのかを書いていこうと思います。 P2P モデルまずは WebRTC といえば P2P なので、WebRTC の P2P 利用についてお話する必要があります。 WebRTC の P2P 利用は、配信者が視聴者分の変換を行うという負担があることから、最大でも 10 名程度までしか配信できません。 さらに、何より配信者の PC 負荷がとても高くなるため、採用は趣味のページまででしょう。 ビジネスで P2P を配信に利用するのはとても現実的ではありません。
【リアルタイム共同編集】Atomで出来るようになったってよ - Qiita
GithubがAtomのパッケージに Teletypeをリリースしました！ 公式サイト：Teletype for Atom また9月には、Atomを統合開発環境にするという「Atom IDE」パッケージが出ましたね！ ->Atomに統合開発環境パッケージが出たってよ 早速どんなものか説明したいと思います Teletypeってなに？ 簡単にまとめると 「離れていても複数人で同じファイルをリアルタイムに編集できる」ものです。 共同編集できるとなんなの？ 例えば上司や先輩にコードレビューをしてもらうときにわざわざ対面で行う必要がなく、 自分のエディタにJoinしてもらうことで、どこでもレビューを行えます。 また、モニターなどを見せレビューしてもらう際に「そこそこ！！！違う！２行下！！！あーそこ！」みたいなこともなく レビュー者が直接コメント行などを残せるのでレビューもしやすくなると思います。 手
詳解 WebRTC
この資料は 2017-09-24 に行われた HTML5 Conference 2017 の 発表者メモ です。 ショートURL は http://bit.ly/u-w-i です。understanding-webrtc-internals です。 この資料の間違いについては Twitter で @voluntas までリプライをお願いします。 おすすめ書籍 この資料では WebRTC API については説明していません。一通りの知識を得たい場合の本をオススメしておきます。 わか(った気にな)るWebRTC 電子版のみ - Route 312 - BOOTH（同人誌通販・ダウンロード） 個人が書かれている本ですが、とてもキレイにまとまっておりますのでオススメです。アップデート版も今後でるそうなので期待しておきましょう。 予習 O'Reilly Japan - Real World HTTP
JavaScriptでWebRTCやるための基礎知識 - console.lealog();
未来の自分のためのメモです。 仕事でやってないせいですぐ忘れるし、都度思い出すの大変なので・・。 ただまぁだいたいの人はSkyWayとかEasyRTCとか何かしらのライブラリを使うはずで、そういう人たちにはあまり関係ない内容かも。 生のjsでWebRTCを書くときに、先に知っておきたかった系のメモです。 素人ではないがベテランでもない、そんな微妙な知識レベルだと思います。 まだ枯れた仕様ではないので、記事を読む時は日付に注意してください... WebRTC is 何 WebでRealTimeCommunicationできる仕様 もといクライアントどうしでP2Pで通信できる仕様やそのAPI群 See WebRTC Home | WebRTC 仕様まわり WebRTC 1.0: Real-time Communication Between Browsers Identifiers for W
WebRTCによるビデオチャットサービスの開発 - Qiita
はじめに Webで使えるビデオチャットサービスを開発しましたので、システム構成や使用したフレームワークやサービス、開発のポイントなどまとめてみました。 (去年にはQiitaの投稿を作っていたのですが、下書き保存したまま忘れて今頃の投稿になってしました。。) 月々のランニングコストは1000円以内、開発工数は1人月以内で作成しています。 WebRTCが出てきたおかげで、かなり容易にビデオチャットサービスが開発できるようになっていますので、よければ参考にしてください。 開発のポイント、コードだけでなく、開発の動機から、システム構成を決める為、開発前後に行ったビデオチャット関連の技術調査なども載せています。必要最小限の事だけ把握したい方はその辺りは読み飛ばしてください。 開発ビデオチャットサービス: ビデオチャッターズ (http://videochatters.net/) 開発動機 5～6年ぐ
ブラウザ間をP2Pで接続する「reep.io」を利用すると知人間での大容量ファイル転送が簡単
ブラウザさえあれば使えるファイル転送サービス「reep.io」が便利そうだったので紹介です。 連絡を取り合える相手であれば手軽にファイルを送れるようになっているので、大きなサイズのファイルも送ることができます。 reep.ioとは reep.ioは、2つのブラウザ間をピアツーピアで接続し、ファイル転送を可能にするサービスです。 ピアツーピア（P2P：peer to peer）とは、コンピューター同士が対等に通信を行う通信方式のことです。「サーバーとクライアント」のようにコンピューター間に上下関係がなく、対等の者（Peer、ピア）どうしが繋がるという意味です。 WebRTCテクノロジー（ビデオや音声、データをブラウザ間でやり取り可能にする規格）を利用して、ブラウザ間をダイレクトでファイル転送を行います。 なので、WebRTCに対応したブラウザからしか使えません。けれどもブラウザさえあれば利用
WebRTC サーバを開発する理由
ブラウザ同士がやりとりする WebRTC 、当たり前だが WebRTC をサーバ側に用意することでブラウザとサーバでのやりとりを実現する事ができる。 理由はたった一つでサーバ側で配信データをコントロールすることが出来るようになるからだ。 通常の WebRTC を使って一人が複数人に配信する場合はこうなる 大きく違うのはサーバがブラウザを管理したり、データの流れを管理できるようになることだ。これはニコニコ動画の生放送をイメージして貰えば良いと思う。 もちろんサーバを経由することでサーバ側での録画も可能になる。もともとクライアント側で録画はできたが、P2P で動作されるとサーバ側での録画は難しくなるからだ。 これらの仕組みをプラットフォームとして提供しているのが tokbox だ。
WebRTC in WebKit
WebRTC is a set of browser APIs and protocols being worked on by the W3C and IETF standardization bodies. With WebRTC, developers can quickly add real-time peer-2-peer audio, video and data capabilities to their web applications through a set of standardised JavaScript APIs. WebKit today lacks support for this exciting new standard. Our intention is to add WebRTC support to WebKit, starting with t
WebRTC/ORTCの最新動向まるわかり！
HTML5 Conferenceでの講演資料です。 ルームB 13:20-14:00 2017/02/13 P24ページの対応表を修正しました。 【誤】制限付きフルコーン☓シンメトリック：TURN 【正】制限付きフルコーン☓シンメトリック：STUN 2015/1/26 P24ページの対応表を修正しました。 【誤】シンメトリック☓フルコーン：TURN 【正】シンメトリック☓フルコーン：STUNRead less
WebRTCにおけるNAT越えの課題へのアプローチ - 鈴木うどんの横須賀おもしろ生活
WebRTCにおけるNAT越えの課題へのアプローチ - Qiita に移転しました。
WebRTC（PeerJS）で遠隔作業支援システムを作る（3） - Tech-Sketch
WebRTCを用いた遠隔作業支援システムを作ります。 前回 はスマートグラス（Vuzix M100）とサーバサイド（node.js + express + peerjs-server）の環境構築について説明しました。今回はCoffeeScriptで記述されたモジュールの全体構成と、PeerJS & MediaStreamの初期化処理について解説します。 CoffeeScript WebRTCを用いた遠隔作業支援システムの中心的なロジックは、ブラウザで動作します。今回はコールバックを駆使するそれなりに複雑な処理を実装するため、画面操作をハンドリングするロジック、PeerJSの操作とコールバックをハンドリングするロジック、シグナリング等の共通ロジック、と責務を分割して実装したほうが見通しが良くなるでしょう。 ただしJavaScriptはプロトタイプベースのオブジェクト指向言語のため、Javaや
WebRTCの最新動向が満載！WebRTC Update（Google I/O 2014番外編）
WebRTCの最新動向が満載！WebRTC Update（Google I/O 2014番外編） がねこまさし（インフォコム株式会社） Google I/Oの後で Google I/Oの後に、技術者が集結したサンフランシスコで様々なイベントが開催されたようです。WebRTC関連として、Kranky Geek WebRTC Event というものがあり、そこでGoogleからWebRTC Updateと題した発表がありました。今回はその50分のセッション映像から、ハイライトをご紹介します。 掴みはcardboard 最初の掴みは、DataChannelで制御できるローバー（自走車）です。キーノートで配布されたcardboardに装着したAndroidでローバーの首を振ってカメラの向きを制御できます。カメラの映像は当然WebRTCで伝達され、cardborad越しに見ることができます。(3分4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいWeb版「Chrome リモート デスクトップ」が正式リリース／「Google Chrome」やモバイルアプリからリモートPC（Windows/Mac/Linux）へアクセス
ぼくのかんがえたさいきょうの超低遅延大規模配信
WebRTC meetup Tokyo 1
