コメント：HTML5で写真を撮ってください。まず、HTMLコード構造を見てみましょう。もちろん、ユーザーがカメライベントの使用を許可した後、DOMコンテンツのこの部分は動的にロードされる必要があります。興味のある友達はそれについて学ぶことができます。
デモアドレス：HTML5写真のデモンストレーションまず、HTMLコード構造を見てみましょう。もちろん、ユーザーがカメライベントを使用して開始した後、DOMコンテンツのこの部分を動的にロードする必要があります。
注：640x480の解像度を使用します。 JS Dynamic Generationを使用する場合、解像度を柔軟に制御できます。
<！ -
ステートメント：このdivは、ウェブカメラ、ウェブカメラを許可した後に動的に生成する必要があります
幅と高さ：640 * 480もちろん、動的に制御できます！
- >
<！ -
理想的には、これらの要素は、
クライアントはビデオ/カメラをサポートしていますが、
関係する要素、それらはマークアップで作成されます（JavaScriptではなく）
- >
<ビデオオートプレイ> </video>
<ボタン>スナップ写真</button>
<canvas> </canvas>
JavaScript
上記のHTML要素が作成されている限り、JavaScriptの部分はあなたが思っているよりも簡単になります。
//イベントリスニングを設定すると、domコンテンツがロードされます。これはjqueryの$ .ready（）効果に似ています。
window.addeventlistener（ "domcontentloaded"、function（）{
//キャンバス要素はキャプチャに使用されます
var canvas = document.getElementById（ "Canvas"）、
Context = canvas.getContext（ "2d"）、
//ビデオ要素、カメラのデータストリームを受信して再生する
ビデオ= document.getElementById（ "ビデオ"）、
videobj = {"video"：true}、
//エラーコールバック関数コンソールにエラーメッセージを印刷する
errback = function（error）{
if（ "object" === typeof window.console）{
console.log（ "ビデオキャプチャエラー："、error.code）;
}
};
//ビデオリスナーを配置します
//標準のブラウザの場合
if（navigator.getusermedia）{//標準
navigator.getusermedia（videobj、function（stream）{
video.src = stream;
video.play（）;
}、errback）;
} else if（navigator.webkitgetusermedia）{// webkit-prefixed
navigator.webkitgetusermedia（videobj、function（stream）{
video.src = window.webkiturl.createobjecturl（stream）;
video.play（）;
}、errback）;
}
//写真ボタンのイベントを聞いてください
document.getElementById（ "snap"）。addeventlistener（ "click"、function（）{
//キャンバスを描きます
context.drawimage（ビデオ、0、0、640、480）;
}）;
}、 間違い）;
最後に、WebページをWebサーバーの下に配置し、HTTPプロトコルを介してアクセスすることを忘れないでください。
さらに、ブラウザバージョンはより新しいものである必要があり、新しいHTML5関連機能をサポートしています。
翻訳者は資格がなく、元のテキストに従って翻訳されていません。使用されるブラウザはChrome 28です。
最後に、より厳格な完全なコードを投稿します。
<！doctype html>
<html>
<head>
<title> browser webcamera </title>
<メタコンテンツ= "editplus">
<Meta content = "[email protected]">
<Meta content = "inveted by：">
<スクリプト>
//イベントリスニングを設定すると、domコンテンツがロードされます。これはjqueryの$ .ready（）効果に似ています。
window.addeventlistener（ "domcontentloaded"、function（）{
//キャンバス要素はキャプチャに使用されます
var canvas = document.getElementById（ "Canvas"）、
Context = canvas.getContext（ "2d"）、
//ビデオ要素、カメラのデータストリームを受信して再生する
ビデオ= document.getElementById（ "ビデオ"）、
videobj = {"video"：true}、
//エラーコールバック関数コンソールにエラーメッセージを印刷する
errback = function（error）{
if（ "object" === typeof window.console）{
console.log（ "ビデオキャプチャエラー："、error.code）;
}
};
//ビデオリスナーを配置します
//標準のブラウザの場合
if（navigator.getusermedia）{//標準
navigator.getusermedia（videobj、function（stream）{
video.src = stream;
video.play（）;
}、errback）;
} else if（navigator.webkitgetusermedia）{// webkit-prefixed
navigator.webkitgetusermedia（videobj、function（stream）{
video.src = window.webkiturl.createobjecturl（stream）;
video.play（）;
}、errback）;
}
//写真ボタンのイベントを聞いてください
document.getElementById（ "snap"）。addeventlistener（ "click"、function（）{
//キャンバスを描きます
context.drawimage（ビデオ、0、0、640、480）;
}）;
}、 間違い）;
</script>
</head>
<body>
<div>
<！ -
ステートメント：このdivは、ウェブカメラ、ウェブカメラを許可した後に動的に生成する必要があります
幅と高さ：640 * 480もちろん、動的に制御できます！
- >
<！ -
理想的には、これらの要素は、
クライアントはビデオ/カメラをサポートしていますが、
関係する要素、それらはマークアップで作成されます（JavaScriptではなく）
- >
<ビデオオートプレイ> </video>
<ボタン>スナップ写真</button>
<canvas> </canvas>
</div>
</body>
</html>