Clubhouse リアルタイム配信の仕組みについて (解説編)
Cloubhouse はすでに OSS である Janus Gateway に切り替えており Agora は使用していないようです ライセンス Creative Commons — 表示 - 非営利 - 改変禁止 4.0 国際 — CC BY-NC-ND 4.0 前提 ざっくりと雑に解説。 どんな技術を使っていてこんな感じだろうという妄想は以下をどうぞ。 Clubhouse リアルタイム配信の仕組みについて (妄想編) 著者 商用 WebRTC SFU 開発者 WebRTC プロトコルスタック実装者 End to End Encryption プロトコルスタック実装者 Clubhouse の仕組みはとてもシンプルで配信者が N 人で、それを数千人が聞くという co-streaming と呼ばれる仕組みの一つ。この方式は今までは主に映像ありでパネルディスカッション的な使い方が主だっだ。それを
ビデオチャット機能をWeb・モバイルアプリへ容易に追加できる「WebRTC」が標準仕様に
World Wide Web Consortium（W3C）とInternet Engineering Task Force（IETF）は、WebRTC（Web Real-Time Communications）が公式に標準仕様となったことを、1月26日（現地時間）に発表した。 WebRTCフレームワークは、さまざまなアプリケーションにビデオチャットをシームレスに追加可能な仕組みを提供する。Webブラウザや各種デバイス、プラットフォームにてロイヤリティフリーの機能として標準化されており、プラグインのインストールやアプリケーションをダウンロードすることなく、安全にオーディオ／ビデオ通信を利用できる。 WebRTCによって、デスクトップ／モバイルの主要なブラウザにおいて、ビデオ会議やコラボレーションシステムが強化され、Web上でのライブビデオチャットがこれまで以上に容易になる。また、顧客やユー
とあるデベロッパーが、JavaScriptだけでどのようにしてAirDropを再現したか
タップ・クリックするだけで他のデバイスと簡単にファイルを共有できるAirDropをJavaScriptだけで再現したその仕組みを紹介します。 同一WiFiで利用でき、iOSやmacOSだけでなく、AndroidやWindowsでもあらゆるファイルを簡単に共有できます。 How One Developer Recreated AirDrop Using Just JavaScript by Abdisalan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新しいテクノロジーの使用 これがないとWebRTCは使用できない どのようにデータを保護しているか？ 使い慣れたUIとUX デバイスがWebRTCをサポートしていない場合はどうなりますか？ イベント駆動型のコードスタイル 自身でコードを調べる 終わりに はじめに iP
全世界300万人が使うCacooのビデオ通話機能を支える技術 #ヌーラボのアドベントカレンダー | 株式会社ヌーラボ(Nulab inc.)
※ このブログはヌーラバー Advent Calendar 2020 12日目の記事です。明日は yuh kim さんの記事です。 こんにちは。本日32歳になりました。Cacoo課の川端(@kwbtsts)です。 Cacooは先日、図の編集画面上でビデオ会議ができる「ビデオ通話」機能をリリースしました！ 本記事では、ビデオ通話を実現するために必要なWebRTCという技術について解説したいと思います。ビデオ通話を実際にWebサービスで開発・運用していこうと考えている方や、WebRTCに興味がある方へのヒントになれば幸いです。 ビデオ通話機能についての詳しくはCacooリリースブログ『テレワークで使える！Cacooで「ビデオ通話」ができるようになりました！』をご覧ください。 WebRTC(Web Real-Time Communications)とは？ Cacooのビデオ通話ではWebRTC(
E2EE を開発していて思うこと
ここ数ヶ月は自社製品向けの End to End (Media) Encryption の設計と実装をしています。年内での提供を目標として開発を進めてい見ていますが、色々感じることがあったので雑に書いていこうと思います。 前提自分は暗号やセキュリティの専門家ではない自社製品向けの E2EE は Signal や Google Duo が利用している実績のある仕組みを採用しているE2EE や暗号の専門家を招聘し、相談しながら開発している自分の E2EE に対する考え悪意あるサービス管理者からユーザを守るために存在する機能と考えています。 Signal プロトコルはよく考えられすぎているSignal が考えた Curve25519 (x25519/ed25519) を利用した X3DH / Double Ratchet の仕組みは安全すぎると感じるくらいです。 相手からメッセージを受信するたび
ReactとWebRTCでZoomのようなビデオチャットアプリを作ってデータフローを図解してみた
はじめに こんにちは。 都内在住のフロントンドエンジニアです。 僕はとある会社にて約 1 年半ほど React と WebRTC を用いて映像配信のアプリケーション開発を行ってきました。 そこでは開発をスムーズに進める為に WebRTC の SDK を利用していて、 本来学習コストが高いとされている WebRTC をカジュアルに利用することができています。 しかし、より入り組んだ実装をしたり映像配信特有の問題（後述） を解決するとなると以下 3 つの WebAPI の理解は避けて通れません。 MediaStream RTCPeerConnection WebSocket 詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC 関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。
WebCodecs と WebTransport でビデオチャット | blog.jxck.io
Intro ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。 これにより、映像や音声の変換などといったユースケースへの応用も可能だ。 本来なら WebCodecs 単体の API について解説するところだが、筆者がこの API を待っていた理由であるところの「WebRTC の代替」としての WebCodecs/WebTransport の応用に注目し、背景も踏まえて解説する。 WebRTC WebRTC は UDP 上に DTLS で交換した鍵を用いて、 RTP を SRTP で流し、そのシグナリングに SDP を、ホールパンチに ICE(STUN/TURN) を用いることで、 P2P ビデオチャットといったユースケースを可能にした API だ。 しかし、最初から「P2P ビデオチャット」というユースケ
次の一手
時雨堂は 2020 年 10 月で 9 期を迎えます。最近は WebRTC SFU Sora が様々な場面で使っていただけるようになってきたこともあり、会社が自社製品の売上だけでまわるようになりました。 とはいえ、ただの零細企業でしかないため、いつ自社製品が売れなくなるかわかりません。次どうするかを 8 月はコード書くのを止めて色々考えていました。 一通り考えがまとまったので、まとめておこうと思います。 要約Sora を採用したくなる OSS の提供Sora 向け統計解析ツールを OSS で公開Sora 向け録画合成ツールを OSS で公開Sora 向け負荷試験ツールを OSS で公開本気で日本の WebRTC 市場を取りに行く経営状況ありがたいことに相当順調です。税理士も開いた口が塞がらないほどです。とはいえ働き方は特に変わっていませんので、変化があるとしたら社員の賞与の金額くらいでしょ
ビデオ通話における Web サービス毎の通話品質に関して - ボクココ
ども、@kimihom です。 最近、またガッツリ WebRTC に関しての調査と実装をしている。近頃ではビデオ通話の背景画像を面白おかしくすることが注目されがちだけど、ビデオ通話サービスを提供する側で最も大切なことは、引き続き「ビデオ通話の品質」であることは間違いない。 ビデオ通話の品質の良いサービスと、そうでないサービスの違いがなぜ起こってくるのか、簡単に説明してみる。 一番手軽な 少人数通話 P2P WebRTC で最も簡単に ビデオ通話を実現させる方法として、P2P による パソコンとパソコンをインターネット経由で直接つなげる方法がある。この方法は、最も手軽にビデオ通話の機能を実現できるし、サーバーの負担がほとんどかからない魅力がある。だから WebRTC 初心者のほとんどは、この P2P によるビデオ通話を実現している。 しかし、この P2P 接続によるビデオ通話のクオリティは、
WebRTCやるのに最低限必要なJavaScriptのAPIについて - console.lealog();
JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。 言うなれば、これの2019年度版です。 はじめに 最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。 いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。 その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。 ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側である みたいな場合は、一読の価値ありかもです。 ようするに、弊社の新入社員のような人材のための記事です！ 基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri
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
Chrome WebRTC でスクリーンシェアする方法まとめ - ボクココ
ども、@kimihom です。 WebRTC なサービス開発をしていると、デスクトップのスクリーンシェアをしたくなる時がある。その方法について一括でまとめてみる。 2018/8/28 追記 Chrome Inline Install が廃止されるらしい。そのため、以下のインラインインストールは実装できなくなるのでご注意を。 Google Developers Japan: Chrome 拡張機能の透明性向上について スクリーンシェア概要 まずスクリーンシェアをするには、専用の Chrome 拡張 をマーケットに公開し、ユーザーがその Chrome 拡張をダウンロードしてもらう必要がある。その Chrome 拡張 で作成された Track を最終的に WebRTC に乗っける形となる。 Chrome 拡張のインストールを手軽にしてくれる、Chrome Extension inline ins
WebRTC を利用した配信の現実
超低遅延、高画質な配信を実現するための選択肢の一つとして WebRTC があります。 ただ WebRTC はもともと少人数で双方向の配信を前提としているため、スケールしないというのが一般的な認識です。 せっかくなので WebRTC サーバを開発・販売している立場から WebRTC を利用した配信の現実がどの程度なのかを書いていこうと思います。 P2P モデルまずは WebRTC といえば P2P なので、WebRTC の P2P 利用についてお話する必要があります。 WebRTC の P2P 利用は、配信者が視聴者分の変換を行うという負担があることから、最大でも 10 名程度までしか配信できません。 さらに、何より配信者の PC 負荷がとても高くなるため、採用は趣味のページまででしょう。 ビジネスで P2P を配信に利用するのはとても現実的ではありません。
iOS SafariのカメラストリームをChromeにWebRTCで送ってMediaRecorderでWebMにするとおかしな動画が撮れる - console.lealog();
またもニッチなケースを踏みましたというメモです。 経緯 弊社の開発合宿で作ろうとしてたものが（正確にはいまも合宿中なのでing）あります。 iOS Safariで`getUserMedia()` WebRTCで飛ばす PCのChromeで受け取る MediaRecorderで`.webm`に ざっくりこんな感じ。 本当にやりたかった要件はまだ続きがあるけど、とりあえず問題に必要な手順がコレ。 おかしな動画 こういう風になるhttps://t.co/j2LQe3PBA3 pic.twitter.com/OqzaYOr3CX— りぃ (@leader22) October 16, 2017 こんなん。 iOS Safariから飛んでくるストリームは縦長なのに、そのままの縦長ではなくこのようにアス比1の領域を繰り返すように録画される・・。 原因は・・？ iOS Safariで見えるもの: 問題な
WebRTC における通信不具合の検証 - ボクココ
ども、@kimhom です。 以下のイベントで LT してきたので、今回はスライドとともに補足していく。 atnd.org WebRTC チェックサイト まず利用環境で WebRTC が使えるかどうかというそもそもを確認するには、実際に WebRTC に繋いでみる。弊社で実際に Twilio WebRTC に繋いでみるチェックツールを提供している。 Twilio Client 動作チェック 上記は Twilio Client の WebRTC に最適化されているので、一般的な WebRTC チェックツールは WebRTC 本家が提供しているのを使うのがセオリーになるだろう。 WebRTC Troubleshooter このサイトの注意点として、上記サイトでわかるのは「全く通話できないか、そうでないか」の分類になるということ。音質の不具合などを上記のようなサイトで発見することは難しい。んで、
AppleのSafari、Edgeに続き、ついにWebRTCサポートへ
AppleのWebブラウザが次期OSで、Googleが中心となって推進するオープンプロジェクト「WebRTC」をサポートする。これでChrome、Firefox、Edge、Safariがサポートすることになる。 米Appleは6月7日（現地時間）、次期デスクトップOS「macOS High Sierra」および次期モバイルOS「iOS 11」向けWebブラウザの開発者向けプレビュー版「Safari Technology Preview」をリリースした。リリースノートで、「WebRTC」をサポートするとしている。 WebRTCは、Webブラウザでのリアルタイムコミュニケーション（RTC）を可能にすることを目的としたオープンプロジェクト。Google Chromeチームを中心に、MozillaとOperaが推進している。 プロトコルにUDPを採用し、音声、映像などの大量のデータを高速に送れるの
WebRTC ノハナシ
主に WebRTC に関する最新情報をメモがてら。 宣伝時雨堂が一から開発した WebRTC SFU Sora を利用すれば、WebRTC でもサーバでの録画、複数人数でのビデオチャット、複数人への配信などを簡単に実現可能です。アプリへの組み込みを意識した作りになっているので認証やクライアントのコントロールも全てアプリ側で可能です。 WWDC17 にて Safari 11 が WebRTC への対応が発表
Safari に WebRTC がきてどうなるのか
WWDC17 で iOS/macOS の Safari 11 に WebRTC が搭載されることになりました。これで何が変わっていくのかをだらだら書いてみます。 雑感対応ブラウザが増えてめんどくさくなるSafari 対応を色々頑張らなくて良くなるiOS ネイティブアプリを開発しなくても良くなるかもしれない技術的には対応ブラウザが増えることで、確認作業が増えるのは面倒です。今まで Chrome と Firefox だけだったのが、 Edge と Safari といきなり 2 倍です。確認コストは 2 倍以上です。 Safari 特に iOS の Safari や Chrome で WebRTC が利用できないことで、コスト高めの iOS ネイティブアプリを開発せざるを得ない場合がありました。もともとネイティブアプリであれば気にならないのですがウェブサービスのおまけとして提供される場合は iO
WebRTCハンズオン 本編 - Qiita
はじめに この資料は、WebRTCハンズオン勉強会用の資料です。 資料の全体はこちらのINDEXを参照してください。 WebRTCハンズオン資料 INDEX - Qiita 今日作るもの 本編で作成する最終的なアプリのデモをお見せします。 https://yusuke84.github.io/webrtc-handson-2016/client/ シグナリングサーバが無いと動きません ハンズオン用ソースコード https://github.com/yusuke84/webrtc-handson-2016 handsonブランチをローカルにダウンロードしハンズオンを開始してください STEP１〜STEP4までの各ブランチに各STEPの完成形のソースコードが格納されています masterブランチはgh-pages用のブランチです 2016と書かれていますが、この記事と同じくメンテナンスは実施し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebRTCを利用した超低遅延な映像配信 - DMM inside
