ความคิดเห็น: ถ่ายภาพที่ HTML5 ก่อนอื่นมาดูโครงสร้างรหัส HTML แน่นอนว่าส่วนหนึ่งของเนื้อหา DOM ควรโหลดแบบไดนามิกหลังจากผู้ใช้อนุญาตให้ใช้เหตุการณ์กล้องของพวกเขา เพื่อนที่สนใจสามารถเรียนรู้ได้
ที่อยู่ตัวอย่าง: การสาธิตภาพถ่าย HTML5ก่อนอื่นมาดูโครงสร้างรหัส HTML แน่นอนว่าส่วนหนึ่งของเนื้อหา DOM นี้ควรได้รับการโหลดแบบไดนามิกหลังจากผู้ใช้อนุญาตให้ใช้เหตุการณ์กล้องเริ่มต้น
หมายเหตุ: เราใช้ความละเอียด 640x480 หากคุณใช้ JS Dynamic Generation คุณสามารถควบคุมความละเอียดได้อย่างยืดหยุ่น
-
คำสั่ง: DIV นี้ควรสร้างแบบไดนามิกหลังจากอนุญาตเว็บแคมเว็บแคม
ความกว้างและความสูง: 640 * 480 แน่นอนมันสามารถควบคุมได้แบบไดนามิก!
-
-
องค์ประกอบเหล่านี้ไม่ได้สร้างขึ้นจนกว่าจะได้รับการยืนยันว่า
ไคลเอนต์รองรับวิดีโอ/กล้อง แต่เพื่อประโยชน์ในการแสดง
องค์ประกอบที่เกี่ยวข้องพวกเขาถูกสร้างขึ้นด้วยมาร์กอัป (ไม่ใช่ JavaScript)
-
<วิดีโอ Autoplay> </วิดีโอ>
<button> SNAP Photo </ Button>
<Canvas> </sanvas>
จาวาสคริปต์
ตราบใดที่องค์ประกอบ HTML ด้านบนถูกสร้างขึ้นส่วน JavaScript จะง่ายกว่าที่คุณคิด:
// ตั้งค่าการฟังเหตุการณ์เนื้อหา DOM จะถูกโหลดซึ่งคล้ายกับเอฟเฟกต์ $ .Ready () ของ jQuery
window.addeventListener ("domcontentloaded", function () {
// องค์ประกอบ Canvas จะใช้สำหรับการจับภาพ
var canvas = document.getElementById ("Canvas")
บริบท = canvas.getContext ("2d")
// องค์ประกอบวิดีโอเพื่อรับและเล่นกระแสข้อมูลของกล้อง
video = document.getElementById ("วิดีโอ")
VideaObj = {"วิดีโอ": จริง}
// ฟังก์ชั่นการโทรกลับข้อผิดพลาดพิมพ์ข้อความแสดงข้อผิดพลาดบนคอนโซล
errback = function (ข้อผิดพลาด) {
if ("object" === typeof window.console) {
console.log ("ข้อผิดพลาดในการจับภาพวิดีโอ:", Error.Code);
-
-
// ใส่ผู้ฟังวิดีโอเข้าที่
// สำหรับเบราว์เซอร์มาตรฐาน
if (navigator.getusermedia) {// มาตรฐาน
Navigator.getUserMedia (VideaObj, ฟังก์ชั่น (สตรีม) {
video.src = สตรีม;
video.play ();
}, errback);
} อื่นถ้า (navigator.webkitgetUserMedia) {// webkit-prefixed
Navigator.webkitgetUsermedia (Videoobj, ฟังก์ชั่น (สตรีม) {
video.src = window.webkiturl.createObjecturl (สตรีม);
video.play ();
}, errback);
-
// ฟังเหตุการณ์ของปุ่มรูปภาพ
document.getElementById ("snap"). addeventListener ("คลิก" ฟังก์ชัน () {
// วาดบนผืนผ้าใบ
บริบท DRAWIMAGE (วิดีโอ, 0, 0, 640, 480);
-
}, เท็จ);
สุดท้ายอย่าลืมวางหน้าเว็บของคุณไว้ใต้เว็บเซิร์ฟเวอร์และเข้าถึงผ่านโปรโตคอล HTTP
นอกจากนี้เวอร์ชันเบราว์เซอร์จะต้องใหม่กว่าและรองรับคุณสมบัติที่เกี่ยวข้องกับ HTML5 ใหม่
นักแปลไม่มีคุณสมบัติและไม่ได้แปลตามข้อความต้นฉบับ เบราว์เซอร์ที่ใช้คือ Chrome 28
ในที่สุดโพสต์รหัสที่สมบูรณ์ซึ่งเข้มงวดกว่า
<! doctype html>
<html>
<head>
<title> เบราว์เซอร์เว็บแคมเมara </title>
<meta content = "editPlus">
<meta content = "[email protected]">
<meta content = "ซื้อสินค้าโดย:">
<script>
// ตั้งค่าการฟังเหตุการณ์เนื้อหา DOM จะถูกโหลดซึ่งคล้ายกับเอฟเฟกต์ $ .Ready () ของ jQuery
window.addeventListener ("domcontentloaded", function () {
// องค์ประกอบ Canvas จะใช้สำหรับการจับภาพ
var canvas = document.getElementById ("Canvas")
บริบท = canvas.getContext ("2d")
// องค์ประกอบวิดีโอเพื่อรับและเล่นกระแสข้อมูลของกล้อง
video = document.getElementById ("วิดีโอ")
VideaObj = {"วิดีโอ": จริง}
// ฟังก์ชั่นการโทรกลับข้อผิดพลาดพิมพ์ข้อความแสดงข้อผิดพลาดบนคอนโซล
errback = function (ข้อผิดพลาด) {
if ("object" === typeof window.console) {
console.log ("ข้อผิดพลาดในการจับภาพวิดีโอ:", Error.Code);
-
-
// ใส่ผู้ฟังวิดีโอเข้าที่
// สำหรับเบราว์เซอร์มาตรฐาน
if (navigator.getusermedia) {// มาตรฐาน
Navigator.getUserMedia (VideaObj, ฟังก์ชั่น (สตรีม) {
video.src = สตรีม;
video.play ();
}, errback);
} อื่นถ้า (navigator.webkitgetUserMedia) {// webkit-prefixed
Navigator.webkitgetUsermedia (Videoobj, ฟังก์ชั่น (สตรีม) {
video.src = window.webkiturl.createObjecturl (สตรีม);
video.play ();
}, errback);
-
// ฟังเหตุการณ์ของปุ่มรูปภาพ
document.getElementById ("snap"). addeventListener ("คลิก" ฟังก์ชัน () {
// วาดบนผืนผ้าใบ
บริบท DRAWIMAGE (วิดีโอ, 0, 0, 640, 480);
-
}, เท็จ);
</script>
</head>
<body>
<div>
-
คำสั่ง: DIV นี้ควรสร้างแบบไดนามิกหลังจากอนุญาตเว็บแคมเว็บแคม
ความกว้างและความสูง: 640 * 480 แน่นอนมันสามารถควบคุมได้แบบไดนามิก!
-
-
องค์ประกอบเหล่านี้ไม่ได้สร้างขึ้นจนกว่าจะได้รับการยืนยันว่า
ไคลเอนต์รองรับวิดีโอ/กล้อง แต่เพื่อประโยชน์ในการแสดง
องค์ประกอบที่เกี่ยวข้องพวกเขาถูกสร้างขึ้นด้วยมาร์กอัป (ไม่ใช่ JavaScript)
-
<วิดีโอ Autoplay> </วิดีโอ>
<button> SNAP Photo </ Button>
<Canvas> </sanvas>
</div>
</body>
</html>