WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by WebSockets, which offered a more robust solution for bidirectional communicati
時雨堂 WebRTC 入門 (講師資料) v2023-05
learning-webrtc_2023-05.md 時雨堂 WebRTC 入門 (講師資料) v2023-05 これは時雨堂が開催しているオンラインイベントである WebRTC 入門の 講師用 の資料であり、 参加者用の資料ではありません。 時雨堂 WebRTC 入門 オンラインイベント 概要 ChatGPT がある今、学ぼうと思えば好きなだけ学べる時代がきています。 ただ「正しい情報」をなんとなく知っている事はとても重要だと考えています。 進め方 今回の WebRTC 入門はまず最後まで大まかに話をしていきます。 その後、残り時間を利用して、細かく話をしていきます。 資料表示用の画面と iPad を画面共有してホワイトボード的な使い方をしていきます。 お願い 是非 Discord にメモを残していってください。 後から振り返るとき、参加者の皆に有用だと思います。 ライセンス Creat
GitHub - httptoolkit/mockrtc: Powerful friendly WebRTC mock peer & proxy
Let's write an automated test with MockRTC. To test WebRTC-based code, you will typically need to: Start a MockRTC mock session Define rules that match and mock the traffic you're interested in Create a WebRTC connection to a mock peer, by either: Using MockRTC's offer or answer directly. Applying the provided MockRTC.hookWebRTCConnection hook function to your RTC connection, and then connecting t
WebRTC配信システムをAWSからオンプレミスに切り替えている話
2021年7月27日 DMM meetup #31 での発表内容です
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という観点でいうと、最近はも
chrome://webrtc-internals のしくみ - console.lealog();
なんとなくアテはついてたけど、中身が気になるという話を聞いたので調べてみた。 WebRTCやってるみなさんならお馴染みのあのページです。 chrome://webrtc-internals WebRTCのデバッグといえばこのページ。 特に何も仕込んでないのに、見てるページで`getUserMedia()`したり`RTCPeerConnection`が作られればその様子が見えるし、実際に流れてるメディアやデータのことまでわかる。 あれってどういうしくみ？っていうのを調べていきます。 ただのWebページ URLが`chrome://`になってるけど、れっきとしたWebページです。 なのでDevToolsでNetworkタブ見ればだいたいわかる！というわけで。 構成要素はこんな感じ。 webrtc-internals.html ただのHTML/CSS 以下の2つのJSを読み込んでる util.j
WebRTC P2P を使った画面共有サービスを作ってみた - hakobera's blog
三行まとめ WebRTC の getDisplayMedia API を利用した P2P で画面共有するサービスを作りました。 全て Managed Service (AWS & Firebase) 上で動作しており、ほぼノーメンテナンスでそれなりスケールします。 無料。ただし、音声無し、TURNサーバー無し、SLA 無しで、繋がらないこともそれなりにあると思うので、クリティカルな用途に使用することは非推奨 getdisplay.media 使い方 どういう風に使うのか、また遅延はどれくらいなのかを以下の動画をご覧ください。 配信側は WiFi で、視聴側の iPhone は LTE 回線で繋がっています。 Fully managed and serverless Screen Sharing Service: getdisplay.media 配信は GitHub 認証が必須ですが、視聴
WebRTCやるのに最低限必要なJavaScriptのAPIについて - console.lealog();
JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。 言うなれば、これの2019年度版です。 はじめに 最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。 いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。 その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。 ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側である みたいな場合は、一読の価値ありかもです。 ようするに、弊社の新入社員のような人材のための記事です！ 基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri
PeerJSを今後も使い続けるのは危険
2023.11.21 追記 PeerJSは、2018.06頃から新しいメンテナーの方が登場し、メンテナンスされる状態になっています。PeerJSのご利用を検討される場合は、最新のメンテナンス状況を確認するのが良いかと思います。 — 以下、元記事 — PeerJS、WebRTCをかじった事がある人なら、殆どの人が聞いた事があると思います。PeerJSは、WebRTC技術を活用したアプリケーションを開発するためのJavaScriptライブラリとして、2012/12/23にgithub上で開発がスタートしました。 WebRTC黎明期を支えたPeerJSHTML5 Experts.jpで2014年に、開発者の一人であるEric Zhang氏にインタビューした記事から抜粋します。
WebRTC スタック Python 実装の紹介
このライブラリはとてもシンプルに書かれており、 WebRTC がどのように機能しているのかを理解したい人にぴったりです。 また Python のエコシステムに乗っかっているので Python から気軽に利用できます。なにより libwebrtc を使っていないのは負荷をとても下げています。libwebrtc は闇しかありません。 このライブラリの素晴らしい点はいくつもあるのですが、何よりコードがとてもキレイです。そして丁寧に書かれています。 また、MediaChannel 向けに libvpx や libopus をラップしてくれており、現時点では音声の配信までできるようです。 DataChannel は双方向でやりとりまでできるところまで作られています。SCTP は自前です、偉い。 ちなみに DTLS (openssl)や SRTP (libsrtp)は外部ライブラリを使っておりますが、
ビットレート改善で転送量を減らしたおはなし
Streaming Conference #1で発表したスライドです。 https://streaming-lab.connpass.com/event/78549/ 【追記】 発表資料について一部記載ミスがありましたので修正と補足説明を追加しました。
WebRTC を利用した配信の現実
超低遅延、高画質な配信を実現するための選択肢の一つとして WebRTC があります。 ただ WebRTC はもともと少人数で双方向の配信を前提としているため、スケールしないというのが一般的な認識です。 せっかくなので WebRTC サーバを開発・販売している立場から WebRTC を利用した配信の現実がどの程度なのかを書いていこうと思います。 P2P モデルまずは WebRTC といえば P2P なので、WebRTC の P2P 利用についてお話する必要があります。 WebRTC の P2P 利用は、配信者が視聴者分の変換を行うという負担があることから、最大でも 10 名程度までしか配信できません。 さらに、何より配信者の PC 負荷がとても高くなるため、採用は趣味のページまででしょう。 ビジネスで P2P を配信に利用するのはとても現実的ではありません。 配信の場合は P2P で Web
Mixer の技術的視点での凄さ
ところてんが Mixer について書いていたので、技術的な話をしようとおもう。 Mixer はマイクロソフトが買収した会社でもともとは Beam.pro というサービスだった。仕組み自体は今と変わらず、ゲーム配信をするという仕組み。 Mixer が他のゲーム配信サービスと違うのは HLS/MPEG-DASH といったストリーミング配信技術を採用せずに WebRTC というリアルタイム配信技術を採用したことだろう。 彼らは Janus という WebRTC Gateway を基盤として採用した。使うだけでなくフォークして、色々自前で改良を進めている。 Mixer が凄い点を上げてみる。 フル HD 、60 fps 、5Mbps での配信が実現可能ほとんど遅延がない、あっても 1 秒あるかないかクライアントを独自で作り込んでいる5Mpbs という高いビットレートでの配信を大規模に実現しているリ
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
はじめに WebRTCを使ったアプリを作る際に、切っても切れないのがカメラ映像の取得です。ノート型のPCで作業したりすると、延々と自分の顔を見続けなければなりません。そこで、自分の顔の替わりに好きな動画をメディアストリームとして流すサンプルを作って見ました。 仕組み 動画ファイルの変換 ユーザにローカルの動画ファイルを指定してもらう（ファイル選択 or ドラッグ＆ドロップ） FileオブジェクトからURLを生成 (window.URL.createObjectURLを利用） それをVideoタグで再生 継続的にCanvasタグに転写 (window.requestAnimationFrameを利用） CanvasタグからMediaStreamを取り出す (Canvas.captureStreamを利用） 音声ファイルの変換 ユーザにローカルの音声ファイルを指定してもらう（ファイル選択 or
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - livekit/livekit: End-to-end stack for WebRTC. SFU media server and SDKs.
GitHub - pojntfx/weron: Overlay networks based on WebRTC.
詳解 WebRTC
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
