HTML5の写真やカメラ機能を詳しく実践的に解説

最近、Chrome アプリのクラウド カメラ アプリケーションに取り組んでいます。このアプリケーションには、写真の撮影、ビデオの録画、写真やビデオの保存、ファイルのアップロードなどのコア機能が含まれており、メディア ストリーミングに関連する多くの HTML5 API が含まれています。この記事を書く目的は、まず知識ポイントを要約して整理すること、そして最も重要なことは、関連するニーズを持つ読者に何らかのガイダンスを提供することです。

注: この記事は実際の戦闘に基づいており、理論的な知識はあまり紹介しません。

HTML5 の getUserMedia API は、ハードウェア デバイス メディア (カメラ、ビデオ、オーディオ、地理的位置など) にアクセスするためのインターフェイスをユーザーに提供し、開発者はブラウザ プラグインに依存せずにハードウェア メディア デバイスにアクセスできます。

ブラウザの互換性は次のとおりです。

上の図からわかるように、主流のブラウザである Firefox、Chrome、Safari、Opera などが完全にサポートされています。

 <video id=video autoplay></video> -------------------------------------- ----------------------- const videoConstraints = { 幅: 1366, 高さ: 768 }; const videoNode = document.querySelector('#video'); stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); videoNode.play();

 // enumerateDevices はすべてのメディア デバイスを取得します const mediaDevices = await navigator.mediaDevices.enumerateDevices(); // デバイス インスタンスの king 属性を通じてカメラ デバイスを取得するフィルタ const videoDevices = mediaDevices.filter(item => item.kind ===) 'videoinput ') []; // フロントカメラを取得します const videoDeviceId = videoDevices[0].deviceId; videoConstraints = { deviceId: { strict: videoDeviceId }, width: 1366, height: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // 背面カメラを取得します const videoDeviceId = videoDevices[1].deviceId; const videoConstraints = { デバイス ID: { 正確: videoDeviceId }、幅: 1366、高さ: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });

 // Canvas を介してビデオ ストリームをキャプチャし、base64 形式の画像を生成します const Canvas = document.createElement('canvas'); const context = Canvas.getContext('2d'); Canvas.width = 1366; context.drawImage(videoNode, 0, 0, Canvas.width, Canvas.height); // 画像をダウンロードする関数 download (src) { if (!src) return; a.setAttribute('download', new Date()); 。クリック（）; }

 let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // 3 秒後にカメラをオフにする setTimeout(function () { stream.getTracks().forEach(track => track.stop( )) ; ストリーム = null }, 3000);

これで簡易カメラ撮影機能は完了です

写真撮影の基本的なプロセスは、ビデオ ストリームを記録し、オーディオ ファイルとビデオ ファイルとして保存することです。 HTML5 MediaRecorder オブジェクトは、マルチメディア記録およびビデオ記録機能を提供します。

ブラウザの互換性は次のとおりです。

上の図に示されているように、ブラウザの MediaRecorder との互換性は getUserMedia よりもはるかに劣っています。現時点では、MediaRecorder のサポートが優れているのは Chrome と Firefox だけです。

==注: カメラ プレビュー プレーヤーのビデオ タグはミュートに設定する必要があります (エコーによる耳障りなノイズを除去するため)==

 const videoConstraints = { width: 1366, height: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); let mediaRecorder = new MediaRecorder(stream); / レコード データ ストリーム mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) => { // Blob オブジェクトを通じてファイル バイナリ データ インスタンスを作成します。 letrecorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType }); mediaRecorderChunks = []; const file([this.recorderFile], (new Date).toISOString().replace(/:| /./g, '-') + '.mp4', { type: 'video/mp4' }); download(URL.createObjectURL(file)); // ビデオをダウンロードする関数 download (src) { if (!src) return; a.setAttribute('download', new Date() )); a.href = src; a.click() } }; // 録画を停止し、onstop イベントをトリガーします。

上記の実践的な演習を通じて、読者は写真の撮影、ビデオの録画、ファイルの保存などの基本的なカメラ機能を習得したと思います。アプリプロジェクトは個人プロジェクトではなく、ソースコードも公開されていないので、興味のある方は試してみると良いかもしれません。