Hatena Blog Tags
はてなブログ トップ
getUserMedia
このタグでブログを書く

getUserMedia

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
タケユー・ウェブ日報•2年前

Chromeでビデオ/音声入力する機能開発の時にオーディオ入力として任意のWAVファイルを使う方法

タケユー・ウェブ株式会社ではWebRTCを利用したブラウザベースのライブ配信サービスの開発運営を行っています。 お客様から、「ステレオ音声配信を行いたい」というご依頼があり、この機能開発を行う必要がありましたが、弊社にはステレオマイクはありません。 適当なステレオ音源をマイク入力の代わりに使いたいところです。 そんなときにはChromeのフェイクデバイス機能を使います。 録音を行うChromeの起動オプションとして --use-fake-device-for-media-stream と --use-file-for-fake-audio-capture=file.wav を渡します。 私の環…

#getUserMedia#webrtc

ネットで話題

もっと見る
34ブックマーク[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログblog.o24.me
19ブックマークレガシーなWebブラウザにもgetUserMediaを·getUserMedia.js MOONGIFTwww.moongift.jp
18ブックマークgetUserMedia()で指定できるMediaTrackConstraintsのよもやま - console.lealog();lealog.hateblo.jp
14ブックマークWebRTC getUserMediaとWeb AudioでWAVファイルを作ってみた | GCgate エンジニアブログこんにちは、開発チームのttです。 プログラムを書くのは楽しいのですが、文章を書くのは面倒ですね。 ということで、前回のブログフォーマットを最大限に活用していってみます。 お題 WebRTC getUserMediaとWeb AudioでJavaScriptだけでWAVファイルを作ってみる 基本設計 getUserMediaでマイクの音声を取り込み、ローパ...www.gcgate.jp
13ブックマークGitHub - auduno/headtrackr: Javascript library for headtracking via webcam and WebRTC/getUserMediagithub.com
13ブックマーク「Google Chrome 21」安定版公開、WebRTCの「getUserMedia API」に対応　internet.watch.impress.co.jp
13ブックマークCross-browser camera capture with getUserMedia/WebRTC – Mozilla Hacks - the Web developer bloghacks.mozilla.org
12ブックマークMediaDevices.getUserMedia() - Web API | MDNdeveloper.mozilla.org
12ブックマーク【備忘録】[getUserMedia] ChromeとElectron(とFirefox)でスクリーンキャプチャーおよびChromeとElectronで(システムまたはタブ)オーディオのキャプチャー - Qiitaqiita.com

関連ブログ

await wakeUp();•20日前

WebRTCを使ったアプリケーション開発時に使えるReactコンポーネントライブラリを作った

はじめに GWの成果物として、Reactのコンポーネントライブラリを作って公開しました。github.com私はWebRTCを使ったWebアプリケーションを時々作るのですが、デバイス選択機能を毎回自作しており、コンポーネントとしてまとめておけば、いつでも手軽に使えて嬉しいのでは?と思い、作ってみました。 音声の入力・出力、映像の入力のデバイス選択機能と、映像のプレビュー表示機能を実装しました。 vitest、Playwrightを使ったテストや、GitHub Actionsでのリリース作業の自動化などもやったので、得られた知見を記事としてまとめておこうと思います。

備忘録•1ヶ月前

別ブラウザを開き，カメラを起動させる

別ブラウザを開く部分に関しては，以下を参考ください challenge-think.hatenablog.com htmlに関しては，上の記事と似たものを使用します． <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> </head> <body> <p>サンプルページです。</p> <!-- video part --> <div id="videoBox"> <video id="videoMain"></video> <div id="captionMain">支援者</di…

みかづきブログ・カスタム•4ヶ月前

OpenCV.jsでスマートフォンのカメラを使った動体検知を実装する 📷

かつて、 OpenCV.jsを使ってフレーム差分のみを表示するDEMO をつくりました。blog.kimizuka.orgしかし、若干複雑かつ、取り回しにくいコードになってしまっていたため、今回はフレーム差分を検知した際にコールバックイベントを実行するだけのシンプルめなコードを書いてみました。 方針 new MotionDetection({ video: document.querySelector('video'), // 監視するvideo要素 onMove: () => console.log('MOVE'), // フレーム差分が発生した際のコールバック関数 onStop = () …

cvl-robot's diary•4ヶ月前

メモ：お手軽にWebRTCでVideoChatをしたいので、Janus-gatewayをAWS EC2やRaspberry Pi4上に立てたときのメモ

(まだ書きかけ） 今、ネットワーク越しに動画データを送りたいと考えたときに、どうしてもWEBRTCがその候補に挙がってきます。WEBRTCのライブラリやサービスは山のようにあるのですが、進歩が速いことを理由に行き届かないことが多くて、どれもこれも中途半端で問題だらけです。 まずWEBRTCが何なのかを把握するために、次の4つぐらいの区別が付くようにしとく必要が有ります。 ・WEBRTC(P2P)： １対１で繋ぐとき。（もともとの設計。簡単。） ・WEBRTC SFUサーバー： サーバーを中心の媒介として複数間をつなぐとき (･WEBRTC MCUサーバー)： サーバーを中心の媒介として処理をさ…

Skyway Walkers•5ヶ月前

続：Google Chrome + Google Meet 使用時にマイク音量が勝手に下がる現象について

表題の現象について、以前ブログに現象についての記事を書きましたが、対策方法が分かりましたので、それについて書き残したいと思います。 現象 Google Chromeでマイク入力の音量が勝手に下がる現象についてGoogle Meetで検証。色付きバーがマイク入力（音の大きさ）を表してて、大きい音でマイク入力のレベル値が減少していく事が確認できます。※ちなみにマイクの種類やドライバによっては、この現象は発生しない（発生しにくい）様子 pic.twitter.com/6PevjH95X0 — Iwatendo (@iwatendo) 2023年1月2日 対策方法 以下のChromeの拡張機能で、マイ…

みかづきブログ・カスタム•5ヶ月前

Express + socket.ioでiPhoneのカメラが捉えている映像をPCでリアルタイムプレビューするウェブサイトをつくる 🎥

前提 自前で証明書を発行済みでhttpsでlocalhostにアクセスできる iPhoneとPCは同一WiFiにつながっている iPhoneは1台、PCも1台 iPhoneは直接見れない位置にある という条件で、iPhoneのカメラが捉えている映像を確認したく、PCでプレビューできるようにしてみました。 仕組み 本当はWebRTCとかで、サーバを介さずに、iPhoneとPCがやりとりできるのがベストだと思うのですが、今回は手っ取り早く実装するために、socket.ioを使って通信します。 iPhone側のウェブサイト 👉 カメラが捉えている映像をbase64に変換したものをサーバに送り続ける …

ABEJA Tech Blog•5ヶ月前

100行で作る2D空間ボイチャツール＆入ったら誰も居ない悲しみの解決！

こんにちは、メリークリスマス。株式会社ABEJAのラボチームで日々もがいてる藤本（@peisuke）です。本記事はABEJAアドベントカレンダー2022の25日目の記事です。 仕事では機械学習をやっていますが、機械学習で何かの問題を解いているだけでは中々インパクトがでないなぁ思います。機械学習だけではなく、何かしらのサービスと組み合わせることで価値が出ると思います。そんなこともあり、たまにはサービス開発するための技術も磨いております。今回は、2D空間でのボイチャツールを作ってみているので紹介していきます。 まず最小に作ってみた奴のスクショを貼ります。 作ったツールのキャプチャ Chrome E…

みかづきブログ・カスタム•5ヶ月前

OpenCV.jsを使って、グリーンバック撮影用のカメラをウェブページ上で実装する 🟩

はじめに 今回つくったもの 動作原理 ソースコード index.html index.js index.css 実装時のあれこれ RGBからHSVへの変換 赤の取得 マスク画像との差分の取り方 video要素の消し方 今回使用した色見本 おわりに はじめに この記事は OpenCV Advent Calendar 2022 の19日目の記事です。こんにちは。フリーランスのウェブフロントエンドエンジニア、@ki_230 です。先日、カメラで撮影した映像に対し、リアルタイムでグリーンバックを使ったクロマキー合成を行う機会がありました。 OpenCVを使えば余裕でできるだろうなとは思ったのですが、シ…

mrk21::blog {}•6ヶ月前

Docker container からホストでListenしているポートにアクセスする

Docker Desktop ではコンテナから host.docker.internal を使って、ホストにアクセスすることができる。 index.js: const express = require("express"); const app = express(); const port = 3000; app.get("/", (req, res) => { res.send("OK\n"); }); app.listen(port, () => { console.log("Start"); }); $ node index.js $ docker run -it --rm ngin…

みかづきブログ・カスタム•7ヶ月前

OpenCV.jsを使ってカメラで撮影した映像のフレーム差分を算出し、動いているもののみを表示する 📷

まだ、完璧ではないのですが、カメラの映像の中から動いているものだけを表示するスクリプトを書きました。全部で9個canvasがありますが、役割は下記の通りです。9個の小さなCanvasを左上からA、B、C、つまり、 A B C D E F G H Iと呼んだとき、A. 現在（カラー） B. 1フレーム前（カラー） C. 2フレーム前（カラー） D. 現在（白黒） E. 1フレーム前（白黒） F. 2フレーム前（白黒） G. DとEの差分 H. EとFの差分 I. GとHの論理積を白黒反転させたものをレンダリングしています。そして、大きなCanvasには、BとIを合成したものをレンダリングしていま…

みかづきブログ・カスタム•7ヶ月前

OpenCV.jsを使ってカメラで撮影した映像を二極化する 📷

blog.kimizuka.org前回は、OpenCV.jsを使ってカメラで撮影した映像をモノクロにしました。 今回は、前回作成したモノクロ画像を更に二極化してみます。 ソースコード JavaScript const Module = { onRuntimeInitialized() { const medias = { audio: false, video: { facingMode: 'user' } }; const promise = navigator.mediaDevices.getUserMedia(medias); promise.then(successCallback).…

みかづきブログ・カスタム•7ヶ月前

OpenCV.jsを使ってカメラで撮影した映像をモノクロにする 📷

opencv.orgカメラで撮影した映像をモノクロにするだけであれば、ピクセルデータを編集したり、CanvasRenderingContext2D.filterを使ったりすれば良いのですが、OpenCV.jsを試してみたかったので、今回はOpenCV.jsで実装します。blog.kimizuka.org blog.kimizuka.org OpenCV.jsとは OpenCV.js は、Web プラットフォーム用の OpenCV 関数の選択されたサブセットの JavaScript バインディングです。これにより、マルチメディア処理を備えた新しい Web アプリケーションが、OpenCV で利用…

EGO-LOG•8ヶ月前

Laravel投稿サイト構築.91 -音声キャスト機能実装 1.録音機能確認-

今回から音声による読みあげ機能（キャストと呼ぶ）を実装していく。 仕様はこんな感じ。 テーマのタイトル、テーマの内容、返信の内容について音声を読み上げる。 投稿した本人はキャストできない。 複数のユーザがキャスト投稿できる（いずれ承認制にする予定）。 bladeファイルの修正 ----- //録音ボタン <form action="{{route('thread.store')}}" method="POST"> @csrf <div class="d-flex align-items-left"> <div id="rec_thread_title{{$thread->thread_id}}…

TBD•9ヶ月前

httpでgetUserMediaを使う

題の通り、httpでgetUserMediaを使う（確認する）方法について覚書。 なぜ？？ 会社のオンプレ環境にgitlabを用意してくれてあり、pagesが使えたりする。 本家gitlabのpagesでは、Let's Encryptでhttps化してくれるのだが、（弊社）オンプレgitlabではhttpだった。 また、mediapipeを使ったページを作りオンプレgitlabのpagesへデプロイしてみたのだが動かなかった。 原因は、getUserMedia()がhttpで動作しないため。なかなか気づかなかった。。。 あまり遭遇しない環境かもしれないが、httpへカメラやマイクにアクセスする…

虎の穴開発室ブログ•1年前

位置情報 AR にスマホのブラウザだけでチャレンジ

虎の穴ラボおっくんです。暑い夏、いかがお過ごしでしょうか？ この記事は、虎の穴ラボ 夏のアドベントカレンダーの14日目の記事です。 今回のアドベントカレンダーも引き続き「見た目でわかるビジュアルネタ5連発」の第4弾となります。 13日目は、A.M.さんによる「【Go言語】アスキーアートでダンジョンから脱出するゲームを作ってみた」が投稿されました。 15日目は、Mさんによるビジュアルネタ「🔴サーバーにエラーが起きた時にVSCodeを真っ赤にしよう🔴」が公開されますこちらも御覧ください。 発端 去る 2022 年 5 月 11 日 Google I/O で、Geospatial API という位置…