2021年7月27日 DMM meetup #31 での発表内容です
WebRTC配信システムをAWSからオンプレミスに切り替えている話
2021年7月27日 DMM meetup #31 での発表内容です
OpenCVがWebカメラであなたの顔を画像として取得するまでの仕組み
全体像 全体としてはこんな感じです。レンズを通して顔の像を作るところは光学の世界、センサ面に結像された像を読み取る電子の世界。そして、センサと PC の橋渡しを USB で行う通信の世界、受け取ったフレームを処理するソフトウエアの世界、という流れで説明していきます。 物理（光学）の世界～一眼とWebカメラ（とスマホ）の違い～ 一番大きな違いは設計思想そのものです。レンズとセンサの大きさ、撮影設定などの柔軟性などに現れています。 一眼レフ：でっかいレンズ × でっかいセンサ ＝ つよい Web カメラ：写ってればいいでしょレベル～産業用レベル スマホ：目的ごとに複数のカメラモジュールを用意したりソフトで後処理したり。ともかく小さく薄く。 光学の世界で大事なことを一つだけ（機種選択の基準として） ピント合わせ の方式はどうなっているか？ マニュアルフォーカス → 自分でリング回す：ピント合わせ
【Web NFC】JavaScriptでNFCタグのデータを読み書きしてみた - aptpod Tech Blog
Webチームの蔵下です。Chrome 81でWeb NFCが試験的に導入されました！ ちょっと変わり種なのでネット上ではあまり話題にならなかったのですが、個人的にはビッグニュースでした。 Web NFCを使うと、下記のTweetのような実在するカードとWebサイトを組み合わせたゲームなどが実装できます！ すごい！ 🏷️ Web NFC reaches a key milestone - it is coming soon! Check out https://t.co/wC4Sx6Rpu8 pic.twitter.com/MmsIDHGNjy— Chrome for Developers (@ChromiumDev) 2019年12月17日 勢いのままにWeb NFCを触ってみたので、ソースコードを交えて使い方を紹介します。 Web NFCとは？ Web NFCとは、JavaScript
OSSなWeb会議アプリ(SkyWay Conf)に文字起こし機能を実装してみた - Qiita
SkyWay ConferenceはSkyWayを利用したのブラウザ上で動作するWeb会議デモアプリです。OSSとして公開されています。 今回はSkyWay Confを改造して文字起こし機能をつけてみました！ Web会議アプリに文字起こし機能がついてると、出先でイヤホンを忘れてもなんとかなるかもしれません。 議事録も自動で出来て素晴らしいですね。 左上の窓で文字起こし関連の操作が出来て、画面中央下部に書き起こされた文字が表示されるようにしました。 できたもの まずデモアプリはこちら。Chromeで開いてください！ 文字起こし機能つきSkyWay Confのデモページ https://shinyoshiaki.github.io/skyway-conf ソースコードなど 文字起こし機能つきSkyWay Confのソースコード https://github.com/shinyoshiaki/s
THETA プラグイン と WebRTC P2P で撮影アプリを作ってみた - Qiita
はじめに こんにちは、リコーの @shrhdk_ です。 今回は WebRTC という技術を利用して、RICOH THETA V の 360° 映像を遠隔からリアルタイムに確認しつつ、THETA V のシャッターを切れるプラグインを作ってみましたのでご紹介します。 THETA 標準アプリの撮影機能を WebRTC を使って Web ブラウザだけで実現してみたという話です。 ソースコード: https://github.com/ricohapi/theta-plugin-webrtc-sample RICOH THETA プラグインパートナープログラムについて THETAプラグインをご存じない方は こちら をご覧ください。 興味を持たれた方は Twitter のフォローと THETAプラグイン開発コミュニティ (Slack) への参加もよろしくお願いします｡ WebRTC とは? まず We
Amazon SumerianとWebRTC(SkyWay)で簡単な全天球カメラビデオチャット(1:1)を作ってみる - Qiita
Amazon SumerianでWebRTC(SkyWay)を使って簡単な全天球カメラビデオチャットを作ってみたので作成手順をメモしておく。 実行すると自分のpeer idが表示されるので相手に知らせて入力欄に入れてもらいconnectボタンを押すとビデオチャットが行える。 お互い全天球カメラをWebカメラとして接続していれば相手に球面に貼り付けた状態で表示される（通常のWebカメラだと球面に貼り付けられて歪む）。 作成手順 Amazon Sumerianで簡単な全天球画像ビューワーを作ってみる - Qiita と同じ手順を実施して以下のようにHTMLとスクリプトを変更する。 HTML <input id="peerid" readonly="readonly" type="text"><br /> <input type="text" id="ctnpeerid"><input type
WebRTCなコードをE2Eテストする - console.lealog();
という試みをやってみたのでその学びをメモ。 もちろん全てのケースをカバーできたわけではなく、無限に気になることはあるけど、まあきっかけといことで。 環境はmacOSです。CIで動かすのは続編としてまたいつかブログに書きます。 何を使うか いわゆるE2E（URLでページ開いてボタン押したらどうでこうで）をやりたい場合、フロントエンド的な観測範囲だと現時点ではこの2択になるのかなーと思う。 Selenium TestCafe 他にオススメあれば知りたいです。 Selenium https://github.com/webrtc/samples/tree/gh-pages/test とかでも使われてる例があって身近ではあるけど、正直使いたくない・・。 https://github.com/webdriverio/webdriverio とかあわせていれれば多少のシンタックスはマシになるけど、もう
WebRTC スタック Python 実装の紹介
このライブラリはとてもシンプルに書かれており、 WebRTC がどのように機能しているのかを理解したい人にぴったりです。 また Python のエコシステムに乗っかっているので Python から気軽に利用できます。なにより libwebrtc を使っていないのは負荷をとても下げています。libwebrtc は闇しかありません。 このライブラリの素晴らしい点はいくつもあるのですが、何よりコードがとてもキレイです。そして丁寧に書かれています。 また、MediaChannel 向けに libvpx や libopus をラップしてくれており、現時点では音声の配信までできるようです。 DataChannel は双方向でやりとりまでできるところまで作られています。SCTP は自前です、偉い。 ちなみに DTLS (openssl)や SRTP (libsrtp)は外部ライブラリを使っておりますが、
WebRTC を利用した配信の現実
超低遅延、高画質な配信を実現するための選択肢の一つとして WebRTC があります。 ただ WebRTC はもともと少人数で双方向の配信を前提としているため、スケールしないというのが一般的な認識です。 せっかくなので WebRTC サーバを開発・販売している立場から WebRTC を利用した配信の現実がどの程度なのかを書いていこうと思います。 P2P モデルまずは WebRTC といえば P2P なので、WebRTC の P2P 利用についてお話する必要があります。 WebRTC の P2P 利用は、配信者が視聴者分の変換を行うという負担があることから、最大でも 10 名程度までしか配信できません。 さらに、何より配信者の PC 負荷がとても高くなるため、採用は趣味のページまででしょう。 ビジネスで P2P を配信に利用するのはとても現実的ではありません。 配信の場合は P2P で Web
Discord の採用している技術
Discord はゲーマー向けのボイスチャットサービス。テキストチャットもできるし最近ではビデオチャットや画面共有もできるようになった。 UI はかなり Slack に似ている、モダンなデザインということなんだろう。 WebRTC 技術を利用しているということで、とても気にはなっていたが使うタイミングがなかったことからあまり追いかけていなかったが、先日ビデオチャットと画面共有が追加されたということで色々調べてみることにした。 ElectronWindows/Mac/Linux 向けのデスクトップクライアントには Electron を採用している。かなり早い段階から採用しているイメージ。Electron は Chromium ベースなので WebRTC が利用できる。WebSocket もバリバリ使ってる模様。 Electron を使うことでブラウザとほぼ変わらぬ動き、UI を再現している。
WebRTCハンズオン資料 INDEX - Qiita
はじめに この資料は、 WebRTC Beginners Tokyo が開催する、WebRTCハンズオン勉強会用の資料のINDEXです。 作者紹介 がねこまさし（@massie_g） 仕事: インフォコム(株)の調査研究チーム Webの新しい技術担当 WebRTC, WebGL, WebVR とか コミュニティ WebRTC Meetup Tokyo 主催 WebRTC Beginners Tokyo 主催 HTML5Experts.jp コントリビューター @tnoho 仕事: しがない通信会社の社員 WebRTCを使った大規模会議システムを作ってます コミュニティ Tech Night @ Shiodome 主催 なかゆうすけ（@yusuke84） 仕事: WebRTC Platform SkyWay Developer Relations & Technical Solutions
WebRTC: the future of web games - Getkey
At some point in JumpSuit’s development I realized it was impossible to create the game we envisioned: WebSockets are just too slow, because they sit on top of TCP. While it is possible to write moderately fast-paced games with them, such as the enormously successful Agar.io and Slither.io, if you need low-latency, WebSockets won’t cut it. So I started looking for alternatives. WebRTC is currently
EasyRTCのデモをMacでサクッと試してみる - Qiita
EasyRTCのデモをMacで動かした時のメモ EasyRTCはオープンソースのWebRTCツールキットです。 デモには、ビデオチャット、ボイスチャットなどがあります。 Node.jsをインストール https://nodejs.org/ja/ githubからソースを落としてくる https://github.com/priologic/easyrtc/tree/master EasyRTCのディレクトリに移動して、Node.jsのパッケージをインストール cd EasyRTCのディレクトリ npm install サンプルのディレクトリに移動して、Node.jsのパッケージをインストール cd server_example npm install デモサーバ起動 node server.js サーバにアクセスする http://localhost:8080/
Node.js with WebRTC DataChannel
2. 自己紹介 • 所属 – インフォコム（株）の調査研究チーム Web担当 • Node学園の過去の発表 – 東京Node学園祭2014 • Nodeで操るKurentoメディアサーバー • http://www.slideshare.net/mganeko/nodekurento – 東京Node学園祭2013 • WebRTCを始めよう • http://www.slideshare.net/mganeko/2013-web-rtcnode • Web記事 – HTML5Experts.jp WebRTC入門2016 • https://html5experts.jp/series/webrtc2016/ 3. WebRTCとは • Web Real-Time Communication の略 • Webブラウザ上のリアルタイム通信の規格 – ビデオ/オーディオ … MediaStr
Web RTC Conference資料
Web RTC Conference資料 1. WebRTC Conference Japan ~スマホチャットアプリにおける WebRTC通話アプリ開発事例~ WebRTC Conference Japan ~スマホチャットアプリにおける WebRTC通話アプリ開発事例~ 2. 自己紹介 -Introduction- 2 / 29 ● 名前 : 山中夏樹 natsuki-yamanaka@trifort.jp ● 所属 : TriFort Inc. ● 肩書 : ネイティブアプリ(iOS・Android)エンジニア ● 業務内容： 自社開発にて主にチャットアプリやリアルタイムギルドバトルなどを担当 Node.jsによるサーバーサイドやiOS・Androidアプリの開発を手掛けてきた 3. ● 知見 / ノウハウの共有 ○ 自社で扱った通話アプリ開発の事例紹介 ○ 開発する上で苦労した点な
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 - jsmouret/grpc-over-webrtc: gRPC over WebRTC
Making Things P2P With WebRTC
WebRTC 資料まとめ
WebRTC Reborn - Cloud Expo / WebRTC Summit
