HTML5 を使用して写真を撮るサンプル コード_html5 チュートリアルのヒント

デモのアドレス: HTML5 写真撮影デモ
まず、HTML コード構造を見てみましょう。 もちろん、DOM コンテンツのこの部分は、ユーザーが使用を許可した後に動的にロードされ、生成される必要があります。彼らのカメライベント。
注: 解像度は 640X480 を使用します。JS を使用して動的に生成すると、解像度を柔軟に制御できます。

コードをコピー

コードは次のとおりです:

写真を撮る



上記の HTML 要素である限りが作成されると、JavaScript 部分は単純になります。思ったよりも簡単です。

コードをコピーします

コードは次のとおりです:

/ / イベントリスニングを設定し、DOM コンテンツの読み込みが完了し、その効果は jQuery の $.ready() と似ています。

window.addEventListener("DOMContentLoaded", function() {

// Canvas 要素は、
var Canvas = document.getElementById("canvas")、
context = Canvas をキャプチャするために使用されます。 getContext( "2d"),
// カメラのデータ ストリームの受信と再生に使用される video 要素
video = document.getElementById("video"),
videoObj = { "video" : true },
// エラー コールバック関数。コンソールにエラー情報を出力します。
errBack = function(error) {
if("object" === typeof window.console){
console.log ("ビデオ キャプチャ エラー: ", error.code);
}
}
// ビデオ リスナーを配置します
// 標準ブラウザの場合
if(navigator. getUserMedia ) { // 標準
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
},
} else if(navigator.webkitGetUserMedia) { // WebKit プレフィックス付き
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play( ) ;
}, errBack);
}
// 写真ボタンのイベント監視
document.getElementById("snap").addEventListener("click", function() {
/ / キャンバスに描画します
context.drawImage(video, 0, 0, 640, 480)
}, false);


最後に覚えておいてくださいWeb ページを Web サーバーの下に置き、http プロトコルを通じてアクセスします。
さらに、ブラウザのバージョンが新しくなり、HTML5 の新機能をサポートする必要があります。
原文に従って翻訳していないため、翻訳者には資格がありません。使用ブラウザはchrome28です。

最後に、完全なコードを貼り付けますが、かなり退屈です。





コードをコピーします

コードは次のとおりです:

<script> <br>// Set event listening, DOM content is loaded, and the effect is similar to jQuery's $.ready(). <br>window.addEventListener("DOMContentLoaded", function() { <br>// The canvas element will be used for capturing <br>var canvas = document.getElementById("canvas"), <br>context = canvas.getContext( "2d"), <br>// video element, which will be used to receive and play the camera's data stream <br>video = document.getElementById("video"), <br>videoObj = { "video": true }, <br>// An error callback function, prints error information on the console <br>errBack = function(error) { <br>if("object" === typeof window.console){ <br>console.log ("Video capture error: ", error.code); <br>} <br>}; <br>// Put video listeners into place <br>// For standard browsers<br>if(navigator.getUserMedia ) { // Standard <br>navigator.getUserMedia(videoObj, function(stream) { <br>video.src = stream; <br>video.play(); <br>}, errBack); <br>} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed <br>navigator.webkitGetUserMedia(videoObj, function(stream){ <br>video.src = window.webkitURL.createObjectURL(stream); <br>video.play() ; <br>}, errBack); <br>} <br>// Event monitoring for the photo button<br>document.getElementById("snap").addEventListener("click", function() { <br>/ / Draw to canvas <br>context.drawImage(video, 0, 0, 640, 480); <br>}); <br>}, false); <br></script>
< /head>