HTML5で実現する写真・カメラ機能
<スパン オープニング
クロームアプリのクラウドカメラアプリを制作しています。写真撮影、動画撮影、写真保存、ファイルアップロードなど、コアとなる機能を含んでいます。メディアストリーミングに関連する多くのHTML5 APIを含んでおり、この記事を書く目的は、知識を要約して整理すること、そして最も重要なことは、関連するニーズを持つ読者に何らかの指針を提供することです。
注：この記事は、あまり理論的な知識ではなく、実際の実務に基づいたものです。
写真を撮る
HTML5 の getUserMedia API は、ハードウェア デバイスのメディア（カメラ、ビデオ、オーディオ、ジオロケーションなど）にアクセスするためのインターフェースをユーザーに提供し、これに基づいて開発者は、ブラウザ プラグインに依存せずにハードウェア メディア デバイスにアクセスすることができます。
ブラウザの互換性は以下の通りです。
上の画像からわかるように、主要なブラウザであるFirefox、Chrome、Safari、Operaなどを完全にサポートしています。
1. ビデオストリームを取得し、videoタグで再生する。
<video id="video" autoplay></video>
--------------------------------------------------------------
const videoConstraints = { width: 1366, height: 768 };
const videoNode = document.querySelector('#video');
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
videoNode.srcObject = stream;
videoNode.play();
2. 複数のカメラデバイス、切り替えはどうする？
// enumerateDevices to get all media devices
const mediaDevices = await navigator.mediaDevices.enumerateDevices();
// filter to get camera devices by device instanceking property videoinput
const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput') || [];
// Get the front camera
const videoDeviceId = videoDevices[0].deviceId;
const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
// Get the rear camera
const videoDeviceId = videoDevices[1].deviceId;
const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 };
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
// In this order...
3. 写真を撮って保存する
// Capture the video stream via canvas and generate a base64 image
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 1366;
canvas.height = 768;
context.drawImage(videoNode, 0, 0, canvas.width, canvas.height);
download(canvas.toDataURL('image/jpeg'));
// Download the image
function download (src) {
if (!src) return;
const a = document.createElement('a');
a.setAttribute('download', new Date());
a.href = src;
a.click();
}
4. カメラデバイスをオフにする
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
// turn off the camera after 3s
setTimeout(function () {
stream.getTracks().forEach(track => track.stop());
stream = null;
}, 3000);
これで簡易カメラ写真機能は完成です
カメラ
ビデオ撮影の基本的なプロセスは、ビデオストリームを記録し、オーディオ/ビデオファイルとして保存することです。HTML5 MediaRecorderオブジェクトは、マルチメディアの記録とビデオ撮影の機能を提供します。
ブラウザの互換性は以下の通りです。
上の画像が示すように、ブラウザは getUserMedia よりも MediaRecorder の方がはるかに互換性が低く、現在 Chrome と Firefox だけが MediaRecorder をよりよくサポートしています。
==注意：カメラプレビュープレーヤーのビデオタグはミュートにしてください（エコーによるきついノイズを除去するため）。
const videoConstraints = { width: 1366, height: 768 };
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });
let mediaRecorder = new MediaRecorder(stream);
let mediaRecorderChunks = []; // record data streams
mediaRecorder.ondataavailable = (e) => {
mediaRecorderChunks.push(e.data);
};
mediaRecorder.onstop = (e) => {
// Create an instance of the file binary data via a Blob object.
let recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType });
mediaRecorderChunks = [];
const file = new File([this.recordFile], (new Date).toISOString().replace(/:|\. /g, '-') + '.mp4', {
type: 'video/mp4'
});
download(URL.createObjectURL(file));
// Download the video
function download (src) {
if (!src) return;
const a = document.createElement('a');
a.setAttribute('download', new Date());
a.href = src;
a.click();
}
};
mediaRecorder.stop(); // stop recording, trigger onstop event
概要
以上のハンズオンで、読者の皆さんは、写真を撮る、ビデオを撮る、ファイルを保存する、といったカメラの基本機能をマスターされたと思います。このアプリケーションは個人制作ではないので、ソースコードは公開されていませんので、興味のある方は一度試してみてはいかがでしょうか。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン