時雨堂 WebRTC 入門 (講師資料) v2023-05
learning-webrtc_2023-05.md 時雨堂 WebRTC 入門 (講師資料) v2023-05 これは時雨堂が開催しているオンラインイベントである WebRTC 入門の 講師用 の資料であり、 参加者用の資料ではありません。 時雨堂 WebRTC 入門 オンラインイベント 概要 ChatGPT がある今、学ぼうと思えば好きなだけ学べる時代がきています。 ただ「正しい情報」をなんとなく知っている事はとても重要だと考えています。 進め方 今回の WebRTC 入門はまず最後まで大まかに話をしていきます。 その後、残り時間を利用して、細かく話をしていきます。 資料表示用の画面と iPad を画面共有してホワイトボード的な使い方をしていきます。 お願い 是非 Discord にメモを残していってください。 後から振り返るとき、参加者の皆に有用だと思います。 ライセンス Creat
時雨堂は何をしている会社なのか
大変反省したので、何をやっていて、どんな会社なのか書いていきます。知ってもらうためにも定期的に更新していければ思っています。 まとめ零細企業リアルタイムな音声と映像を扱うミドルウェア製品を作って売ってるミドルウェアのクラウド版を作って売っているサブスクリプションモデルの積み上げ型OSS 重視何をやってるのか時雨堂はミドルウェアソフトウェアをパッケージとして開発、販売しています。最近は「リアルタイムな音声と映像、データの配信」に特化したミドルウェアがメインです。 現在の主力製品は WebRTC SFU Sora (以降 Sora)という本来は P2P で利用する WebRTC を、クライアント・サーバー方式で利用するソフトウェアを1 から開発して、販売しています。売上のほとんどはこの製品関連になります。 製品はサブスクリプションを採用しており、 3 ヶ月、6 ヶ月、 12 ヶ月単位で Sor
Ayame互換の WebRTC Signaling Server "ayu" を作った - castaneaiのブログ
AyameというWebRTC Signaling Serverの実装がある。 Web側のSDKとサーバー側の実装が両方公開されており、プロトコルの仕様も文章化されている。 GitHub - OpenAyame/ayame-web-sdk: Ayame Web SDK GitHub - OpenAyame/ayame: WebRTC Signaling Server Ayame GitHub - OpenAyame/ayame-spec: WebRTC Signaling Server Ayame Spec そして今回、Ayame互換のプロトコルを持つWebRTC Signaling Server "ayu" を開発した。 github.com 動機 Ayameはサーバー側も含めてオープンな実装があるのになぜ新しく互換サーバーを作ったのか。 大きく分けて2つの理由がある。 ステートレス カス
サーバーレスでclubhouse みたいなボイスチャットサービス「mixroom」を開発しました - y-ohgi's blog
TL;DR clubhouse のような複数人でのボイスチャットサービス「mixroom」をつくりました 主にSkyWay・Firebase・Next.js を使いました。 https://mixroom.fun 「mixroom」 とは mixroom は"目的ベース"でボイスチャットをする場所を提供するサービスです。 昨今は人と話す機会が減り、友好関係も自分から能動的に獲得しにいかないと減るばかりで「孤独感を感じる」みたいなことが増えてきました。 そんなとき、ふらっと立ち寄れるなんの気構えしなくて良い場所があればなと思い、このサービスを作ってみました。 ボイスチャットをするモチベーションを"特定の人"ではなく、ゲーム・実況・もくもく会などの"目的"にすることで良い意味で言い訳ができ、人とのつながりを感じることができるんじゃないかなと考えています。 気構えしなくてよい・カジュアルに参加で
OpenCVがWebカメラであなたの顔を画像として取得するまでの仕組み
全体像 全体としてはこんな感じです。レンズを通して顔の像を作るところは光学の世界、センサ面に結像された像を読み取る電子の世界。そして、センサと PC の橋渡しを USB で行う通信の世界、受け取ったフレームを処理するソフトウエアの世界、という流れで説明していきます。 物理（光学）の世界～一眼とWebカメラ（とスマホ）の違い～ 一番大きな違いは設計思想そのものです。レンズとセンサの大きさ、撮影設定などの柔軟性などに現れています。 一眼レフ：でっかいレンズ × でっかいセンサ ＝ つよい Web カメラ：写ってればいいでしょレベル～産業用レベル スマホ：目的ごとに複数のカメラモジュールを用意したりソフトで後処理したり。ともかく小さく薄く。 光学の世界で大事なことを一つだけ（機種選択の基準として） ピント合わせ の方式はどうなっているか？ マニュアルフォーカス → 自分でリング回す：ピント合わせ
ReactとWebRTCでZoomのようなビデオチャットアプリを作ってデータフローを図解してみた
はじめに こんにちは。 都内在住のフロントンドエンジニアです。 僕はとある会社にて約 1 年半ほど React と WebRTC を用いて映像配信のアプリケーション開発を行ってきました。 そこでは開発をスムーズに進める為に WebRTC の SDK を利用していて、 本来学習コストが高いとされている WebRTC をカジュアルに利用することができています。 しかし、より入り組んだ実装をしたり映像配信特有の問題（後述） を解決するとなると以下 3 つの WebAPI の理解は避けて通れません。 MediaStream RTCPeerConnection WebSocket 詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC 関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。
HDMI入力をRaspberry Piで駆使する
昨今の衰えることのない技術トレンドに追従すべく、映像配信とかやりたいなーと思っていた2019年。 めっきり時間がなく何もできず、気付けば2020年になっていました。 今年も時間がないだろうなぁと思っていたところ、連日の在宅勤務のおかげで通勤時間がゼロになり、余暇が生まれたので色々やってみることにしました。 お題はHDMI入力で遊ぶ、です。 目次 Open 目次 ビデオ転送プロトコル UVC (USB Video Class) MIPI CSI-2 (MIPI Camera Serial Interface 2) HDMI入力 キャプチャーボード HDMI to MIPI CSI-2 H2C-RPI-B01 HDMI映像入力をみてみる raspivid Gstreamer HDMI映像配信してみる RTMP WebRTC まとめ 参考リンク ビデオ転送プロトコル 早速ですがHDMIから一旦離
俺たちは雰囲気でgetUserMedia()をやっている
はじめまして Yuji Sugiura / @leader22 フロントエンド・エンジニア at PixelGrid Inc. 最近はWebRTC（ついに）、普段はReactとかMobXとか ブログもよろしく console.lealog(); 今日の発表の元ネタ記事もあります まずはおさらい 10.2 MediaDevices Interface Extensions | Media Capture and Streams partial interface MediaDevices { Promise<MediaStream> getUserMedia(optional MediaStreamConstraints constraints); }; ・使い方 navigator.mediaDevices.getUserMedia(constraints) .then(stream =>
raspberry pi 3B+でテレビ電話システムを構築する - フクロウ好きなエンジニアのブログ
はじめに この投稿ではサーバーの用意が必要なので、sapislabを使ったやり方を用意しました。 サーバー立てるの厳しい方はこちらをご覧ください。 システム概要 raspberry pi 3B+ によるテレビ電話システム ※記載内容に責任は持てません、全て自己責任でお願いします 概念図 背景 妻が夕食の準備中に子供の相手が大変である おばあちゃんが一人なので心配である 改善案 子供とおばあちゃんが気軽にテレビ電話が出来るようにする 要件 テレビ電話が出来ること 手軽に使えること（煩雑だと結局使われない） 費用は抑えること（常套句） 想定シナリオ 妻が子供たちを連れて帰宅 我が家からリモコンでスイッチオン 我が家とおばあちゃん家のテレビが自動でONになりテレビ電話を開始する 我が家からリモコンでスイッチオフ 我が家とおばあちゃん家のテレビが自動でOFFになりテレビ電話を切断する 前提条件 お
ティアフォーにおける自動運転車両の遠隔監視・操縦システムのご紹介 - TIER IV Tech Blog
はじめまして、ティアフォーで自動運転のWebプラットフォーム開発を行っている飯田です。 今回は、遠隔型レベル4自動運転を行う上で必須な遠隔監視・操縦システムについてご紹介します。 遠隔監視・操縦システム 遠隔型自動運転とは まず自動運転のレベルの枠組みから簡単にご紹介します。 国際的に自動運転のレベルは0~5の6段階に定義されています。 自動運転のレベル 基本的には、レベル4から運転者の役割がなくなり皆様が思い描くような運転から開放された乗車体験が実現されます。 しかし、運転者の役割が無くなることに伴い、全て自動運転システムが状況を判断し、走行する必要があります。 ただ、現実問題として自動運転システムが対応出来ない場面も想定されます。 自動運転システムが対応できない場面において、個人所有の車であれば搭乗者に操縦を任せることが可能ですが、タクシーやバスなどサービスとしてお客様に提供している場
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - livekit/livekit: End-to-end stack for WebRTC. SFU media server and SDKs.