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

getUserMedia

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

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
14ブックマークCross-browser camera capture with getUserMedia/WebRTC – Mozilla Hacks - the Web developer bloghacks.mozilla.org
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
12ブックマークMediaDevices.getUserMedia() - Web API | MDNdeveloper.mozilla.org
12ブックマーク【備忘録】[getUserMedia] ChromeとElectron(とFirefox)でスクリーンキャプチャーおよびChromeとElectronで(システムまたはタブ)オーディオのキャプチャー - Qiitaqiita.com

関連ブログ

無精・短気・傲慢•9 日前

ブラウザでQRコードを読み取る

ブラウザでQRコードを読み取る ブラウザからカメラを起動してQRコードを読み込めるようにするJavaScriptライブラリjsQRを使用しQRコードを読み込む。 https://github.com/cozmo/jsQR 参照：1分でできるjsQRによるブラウザのQRコード読み込みアクセス ソース サンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="none"> <meta name="viewport" content="width=device-wi…

はやし雑記•2 か月前

顔検出 (CenterFace) をブラウザのWASMで動かした

前回の続きです。 blog.hayashikun.com この記事では、前回の記事で実装したCenterFaceをwasmで動くようにして、それをブラウザで動かしたことについて書きます。 以下のように、Webカメラの映像から顔を検出して、顔の上に緑の四角を描画するというのをやりました。 今回実装したものは、こちらにデプロイしているので、PCやスマホから試すことができます。 wasbi 試してみるとわかると思いますが、結構軽快に動作しています。 リポジトリは前回と同じです。 wasmとして動かしているのが web-wasm です。前回同様にRustで書いています。 github.com web …

やってみたらなんとかなる•5 か月前

[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる 番外編#2 ~別ブラウザにも対応させる~

概要 WebRTCとReactを使ったビデオ電話アプリ制作の番外編第2回です。今回はブラウザの対応範囲を増やしたいと思います。 これまでのコードは基本的にChrome向けのコードだったのでMacユーザーの方はもしかしたら途中で意味不明エラー(これは関数じゃないよ的な)が出ていたと思います。(かくゆう私もMacユーザーですが) それをバシッと今回解決します。 そもそもなんでそんなことが起こるのか ここでWebRTCの関数などについて調べるとわかるのですが、どうやらブラウザごとに対応バージョンが違うらしく、Chromeが一番最新まで対応しているということみたいです。(WebRTCもChromeもG…

サーバレス練習帳•5 か月前

SkyWayが面白そうだ！

なんか、SkyWayが5年前よりも成長しているっぽいぞ。 example.webrtc.ecl.ntt.comwebrtc.ecl.ntt.comnote.comskywayではないが、ブラウザのgetUserMedia関数で音声だけ扱う事例もある。 www.codegrid.net

やってみたらなんとかなる•5 か月前

[React] WebRTC x React でP2Pビデオ通話アプリを作ってみる #1

概要 最近見つけたWebRTCという技術と最近勉強したかったReactを使ってP2Pビデオ通話アプリを作ってみたいと思います。 今回すること そもそもWebRTCって何？ どんなものを作るのか？ ここらへんをはっきりさせておきたいと思います。 そもそもWebRTCって何？ WebRTC (Web Real-Time Communications、ウェブリアルタイムコミュニケーション) は、ウェブアプリケーションやウェブサイトにて、仲介を必要とせずにブラウザー間で直接、任意のデータの交換や、キャプチャしたオーディオ／ビデオストリームの送受信を可能にする技術です。 WebRTC に関する一連の標準…

10yroの開発日記•6 か月前

【Angular】ブラウザでカメラを利用する

Angular アプリケーションでデバイスのカメラを利用する方法を記載します。 Angular でのカメラ利用は Navigator.mediaDevices を利用すれば実現できます。 各ブラウザの対応状況については以下を参照下さい。 https://developer.mozilla.org/ja/docs/Web/API/Navigator/mediaDevices 1. <video>を用意する。 まずはHTML側に<video> を配置します。 そして、それぞれのElementをViewChildとして定義しておきます。 HTML <video id="camera" #camera…

RareJob Tech Blog•7 か月前

getDisplayMediaを使って画面共有をやってみる

フロントエンドエンジニアの田原です。 今年も残り僅かとなり、年末感が強くなってきたように感じます。 街中に流れる音楽や急にくる寒さなど色んなとところで年末感を感じられるとは思いますが、皆さんはどういったところで感じられるでしょうか？ 私は「これはたくさん入ってるので年末までは保つなぁー」という思いで買ったみかん箱が 4 日ぐらいでなくなり、手が黄色くなっている事で年末感を感じることができました。（みかん美味しいよね ♪） 本日は Lesson Room における画面共有機能を開発しておりますので、それについての内容を説明したいと思います。 ※尚、以下コードは処理の流れを簡易的に説明したものとな…

audiovisualcoding•7 か月前

Web Audio API 前知識：音声処理のために知っておくべき仕組みと用語

Webページ上で音声処理 (サウンドエンジニアリング) をするには、Web Audio APIというJavaScript APIを利用することになる。 この記事では、Web Audio APIを使ったサウンドエンジニアリングを行うにあたって知っておくべき仕組みや用語をまとめておきたい。 音の表現方法 時間領域表現 周波数領域表現 サンプリングレート (サンプリング周波数、サンプルレート) チャンネル モノ / モノラル (Mono) ステレオ (Stereo) クアッド (Quad) 5.1 音声ノード (audio node) 音源を定義するノード OscillatorNode AudioB…

audiovisualcoding•7 か月前

Webページ上で画像や映像をトリミングしたいとき

【実践したいこと】 何を：画像または映像を読み込み、その一部分だけを切り取る(トリミングする)まで (今回は、Webカメラから取得した映像(以下の記事を参照)を使う) 。 どこで：Webページ上 audiovisualcoding.hatenablog.com 【前提知識】 HTML属性とDOMプロパティ 【ソース】 ▾index.html <!DOCTYPE html> <html> <body> <div id="canvasWrap"></div> <script src="main.js"></script> </body> </html> ▾main.js // 「Webページ上でW…

audiovisualcoding•7 か月前

Webページ上でWebカメラの映像を使いたいとき

【実践したいこと】 何を：ユーザのWebカメラやマイクから、映像・音声(今回は映像のみ)を取得して再生するまで どこで：Webページ上 【前提知識】 HTML属性とDOMプロパティ Promise 【ソース】 ▾index.html <!DOCTYPE html> <html> <body> <div id="videoWrap"></div> <script src="main.js"></script> </body> </html> ▾main.js // 1-i HTMLVideoElementオブジェクトを作成する const video = document.createEleme…

雑記帳•8 か月前

P77～P83 第3章 APIでネイティブアプリ並の機能を実装する

カメラを使って写真を撮る Media Capture and Streams APIのMediaDevices.getUserMedia メソッドを使用すれば実現可能 (実装コードは誌面に記載あるが割愛) QRコードを読み込む Shape Detection APIという、ブラウザで顔・バーコード・テキストの検出が可能となるAPI 2021年10月時点では、Google Chromeと一部のブラウザしかまだ対応していない 使用するには、GoogleChromeのアドレスバーで「chrome://flags」と入力して表示される設定画面で、「Experimental Web Platform f…

バスキュール技術ブログ•8 か月前

ARきぼう予報を作って宇宙飛行士に手を振った話

エンジニアの勝田です。こんにちは。 弊社で開発・運営している「#きぼうを見よう - 国際宇宙ステーションが見える予測日時をお知らせ」というサイトに新しく「ARきぼう予報」というWebAR機能を追加しました。 ARきぼう予報 | #きぼうを見よう - 国際宇宙ステーションが見える予測日時をお知らせ 国際宇宙ステーション（ISS）がどんな軌道を通るか、リアルタイムでどこにいるのかがわかるサービスです。 今日はそのAR機能についてお話したいと思います。 ISS観測について 上空付近をISSが通過するときにいくつかの条件がそろうと肉眼で観測することができます。 詳しくはこちらをご覧ください。 look…

いろいろ備忘録日記•9 か月前

Goメモ-162 (crypto/tls/generate_cert.go を使ってオレオレ証明書作成)

概要 cert.pemとkey.pemを生成 httpsサーバを起動 サンプルのHTML 起動 参考資料 概要 知らなかったので、忘れないうちにメモメモ。 Goの標準ライブラリの中に crypto/tls/generate_cert.go というファイルがあります。 これを go run で起動してやると、https サーバに必要な pem ファイルを生成してくれます。 当然、正規の証明書ではないので、ブラウザで開くと警告出るのですが、画面は表示できます。 WebRTCとかの開発をやっていたり、スマホ側でPC側のWebアプリを開いたりする際に https じゃないと見れない状況とかがあるので、…