ReactとWebRTCでZoomのようなビデオチャットアプリを作ってデータフローを図解してみた
はじめに こんにちは。 都内在住のフロントンドエンジニアです。 僕はとある会社にて約 1 年半ほど React と WebRTC を用いて映像配信のアプリケーション開発を行ってきました。 そこでは開発をスムーズに進める為に WebRTC の SDK を利用していて、 本来学習コストが高いとされている WebRTC をカジュアルに利用することができています。 しかし、より入り組んだ実装をしたり映像配信特有の問題（後述） を解決するとなると以下 3 つの WebAPI の理解は避けて通れません。 MediaStream RTCPeerConnection WebSocket 詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC 関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。
フロントエンド 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という観点でいうと、最近はも
tjun月１日記
コロナウイルスが流行する前の2020年1月上旬、中国の杭州に行ってきたのでその記録を書いておく。 はじめに 自分はこれが中国へ行くの5回目。それなりに慣れている方だと思うけど、中国人と一緒に行ったほうが圧倒的に楽です。 数年前にキャッシュレスが普及して、その後も規制が変わったりして行くたびに状況が変わっています。なので、ここで書いてあることは半年後には参考にならないかも。 事前にやっておくこと WeChatPayのアカウントを作る、可能なら本人確認とチャージをやっておく Alipayのアカウントを作って、可能なら本人確認とチャージをやっておく 中国で使える香港SIMを買う WeChatPayとAlipayのアカウントは、外国人でも作れるときと作れないときがある。またお金もチャージできるときとできないときがある。 事前にググってできるかどうか試しておくのが重要。 また、中国はいわゆるGrea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版
