HTMLでカメラを読み込む方法

効果図: 全体的な効果:

ビデオ読み込み中:

写真：

ステップ1: HTML要素を作成する

まず、HTML5 ドキュメントを作成する必要があります。

<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>無題のドキュメント</title>
</head>

<本文>
</本文>
</html>

次に、 <body></body>内に次のコードを挿入します。

<video id="video" width="640" height="480" 自動再生></video>
<button id="snap">スクリーンショット</button>
<キャンバスid="キャンバス" 幅="640" 高さ="480"></キャンバス>

ステップ2: JavaScriptを作成する

まず、 <head></head>に JavaScript を作成します。

<スクリプト言語="javascript">
	// 要素を取得し、設定を作成するなど。
var ビデオ = document.getElementById('ビデオ');

// カメラにアクセスします!
navigator.mediaDevices の場合:
    // 今はビデオだけが必要なので、`{ audio: true }` を追加しません
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = window.URL.createObjectURL(ストリーム);
        ビデオ.srcObject = ストリーム;
        ビデオを再生します。
    });
}
/* 以下はレガシーコード: getUserMedia 
else if(navigator.getUserMedia) { // 標準
    ナビゲーター.getUserMedia({ビデオ: true}, 関数(ストリーム) {
        video.src = ストリーム;
        ビデオを再生します。
    }, エラーバック);
} else if (navigator.webkitGetUserMedia) { // WebKitプレフィックス付き
    navigator.webkitGetUserMedia({ビデオ: true},関数(ストリーム){
        ビデオストリームを window.webkitURL.createObjectURL に格納します。
        ビデオを再生します。
    }, エラーバック);
} else if (navigator.mozGetUserMedia) { // Mozillaプレフィックス付き
    navigator.mozGetUserMedia({ video: true }, function(stream){
        ビデオ.srcObject = ストリーム;
        ビデオを再生します。
    }, エラーバック);
}
*/
</スクリプト>

次に、作成したHTML要素の後に次のコードを挿入します。

<スクリプト言語="javascript">
	// スナップショットを撮るための要素
var キャンバス = document.getElementById('キャンバス');
var コンテキスト = canvas.getContext('2d');
var ビデオ = document.getElementById('ビデオ');

// 写真撮影をトリガーする
document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(ビデオ, 0, 0, 640, 480);
});
</スクリプト>

これで、この HTML でカメラを開いて写真を撮る機能が完成しました。

これで、HTML でカメラをロードする方法に関するこの記事は終了です。HTML でカメラをロードする関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 文字列の GBK および GB2312 エンコードとデコードのフロントエンド実装 (概要)

>>: CSS を解析して画像のテーマカラー機能を抽出する (ヒント)