カメラ・マイクへのアクセス
getUserMedia MediaStream enumerateDevices
WebRTCの基盤となるMedia Streams APIを使い、カメラ・マイクにアクセスします。HTTPS環境が必要です。
デモ：カメラ・マイクアクセス
コード例
js
// カメラとマイクへのアクセス（許可ダイアログが表示）
const stream = await navigator.mediaDevices.getUserMedia({
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
facingMode: 'user', // 'user'=前カメラ, 'environment'=後カメラ
},
audio: {
echoCancellation: true, // エコーキャンセル
noiseSuppression: true, // ノイズ除去
sampleRate: 44100,
},
});
// videoタグに表示
videoEl.srcObject = stream;
await videoEl.play();
// トラックの操作
stream.getVideoTracks(); // ビデオトラック配列
stream.getAudioTracks(); // オーディオトラック配列
stream.getTracks().forEach(track => track.stop()); // 停止（カメラランプ消灯）
// デバイス一覧の取得（許可後のみラベル取得可）
const devices = await navigator.mediaDevices.enumerateDevices();
devices.filter(d => d.kind === 'videoinput'); // カメラ一覧
// デバイス変更の監視
navigator.mediaDevices.addEventListener('devicechange', async () => {
const updated = await navigator.mediaDevices.enumerateDevices();
updateDeviceList(updated);
});
// スクリーン共有
const screenStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true, // システム音声（対応ブラウザのみ）
});NEWgetDisplayMedia の新オプション & preferCurrentTab
js
// スクリーン共有の改善（Chrome 94+）
const stream = await navigator.mediaDevices.getDisplayMedia({
video: {
displaySurface: 'browser', // 'browser' | 'window' | 'monitor'
frameRate: 60,
},
audio: {
suppressLocalAudioPlayback: false, // 自分の音声も含む
},
// Chrome 122+: 現在のタブを優先表示
preferCurrentTab: true,
// Chrome 107+: セルフブラウジングのサーフェスを除外
selfBrowserSurface: 'exclude',
// タブのシステム音声もキャプチャ
systemAudio: 'include',
});
// MediaRecorder でストリームを録画
const recorder = new MediaRecorder(stream);
const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
downloadFile(blob, 'recording.webm');
};
recorder.start();
setTimeout(() => recorder.stop(), 10000); // 10秒録画🤖 AIプロンプトテンプレート
以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。 - getUserMediaを使ったカメラ・マイクへのアクセスのサンプルを示す - カメラ映像をvideo要素にリアルタイム表示する例を含める - マイク音声の録音（MediaRecorder API）のサンプルを含める - デバイスの権限リクエストとエラーハンドリングの例を示す - 複数カメラ・マイクデバイスの一覧取得と切り替えのサンプルを含める - コメントは日本語で記述する
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。