ความคิดเห็น: API ของลูกค้าบนอุปกรณ์มือถือและคอมพิวเตอร์เดสก์ท็อปไม่ได้ซิงโครไนซ์ในตอนแรก เริ่มแรกมีคุณสมบัติบางอย่างและ APIs ที่สอดคล้องกันบนอุปกรณ์มือถือก่อน แต่ช้า API เหล่านี้จะปรากฏบนคอมพิวเตอร์เดสก์ท็อป หนึ่งในเทคโนโลยีอินเทอร์เฟซแอปพลิเคชันคือ Getusermedia API ซึ่งช่วยให้นักพัฒนาแอปพลิเคชันเข้าถึงกล้องของผู้ใช้หรือกล้องในตัว
API ของลูกค้าบนอุปกรณ์มือถือและคอมพิวเตอร์เดสก์ท็อปไม่ได้ซิงโครไนซ์ในตอนแรก เริ่มแรกมีคุณสมบัติบางอย่างและ APIs ที่สอดคล้องกันบนอุปกรณ์มือถือก่อน แต่ช้า API เหล่านี้จะปรากฏบนคอมพิวเตอร์เดสก์ท็อป หนึ่งในเทคโนโลยีอินเทอร์เฟซแอปพลิเคชันคือ Getusermedia API ซึ่งช่วยให้นักพัฒนาแอปพลิเคชันเข้าถึงกล้องของผู้ใช้หรือกล้องในตัว ให้ฉันแสดงวิธีการเข้าถึงกล้องของคุณผ่านเบราว์เซอร์และแยกภาพหน้าจอ
รหัส HTML
ฉันได้เขียนความคิดเห็นบางอย่างในรหัสต่อไปนี้โปรดอ่าน:
-
เป็นการดีก่อนที่เราควรพิจารณาว่าอุปกรณ์ของคุณเปิดอยู่ก่อน
มีกล้องหรือกล้อง แต่เพื่อความเรียบง่ายเราอยู่ที่นี่โดยตรง
เขียนแท็ก HTML แทนการใช้ JavaScript เพื่อตัดสินก่อน
จากนั้นสร้างแท็กเหล่านี้แบบไดนามิก
-
<วิดีโอ Autoplay> </วิดีโอ>
<button> SNAP Photo </ Button>
<Canvas> </sanvas>
ก่อนที่จะเขียนแท็กข้างต้นคุณควรพิจารณาว่าไคลเอนต์ของผู้ใช้มีการรองรับกล้องหรือไม่ อย่างไรก็ตามเพื่อไม่ให้ลำบากมากแท็ก HTML เหล่านี้จะถูกเขียนโดยตรงที่นี่ ควรสังเกตว่าความยาวและความกว้างที่เราใช้ที่นี่คือ 640 × 480
รหัส JavaScript
เนื่องจากเราเขียน HTML ด้วยมือรหัส JS ต่อไปนี้จะง่ายกว่าที่คุณคิด
// ใส่ผู้ฟังเหตุการณ์เข้าที่
window.addeventListener ("domcontentloaded", function () {
// คว้าองค์ประกอบสร้างการตั้งค่า ฯลฯ
var canvas = document.getElementById ("Canvas")
บริบท = canvas.getContext ("2d")
video = document.getElementById ("วิดีโอ")
VideaObj = {"วิดีโอ": จริง}
errback = function (ข้อผิดพลาด) {
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);
-
อื่นถ้า (navigator.mozgetusermedia) {// firefox-prefixed
Navigator.mozgetUsermedia (VideaObj, ฟังก์ชั่น (สตรีม) {
video.src = window.url.createObjecturl (สตรีม);
video.play ();
}, errback);
-
}, เท็จ);
เมื่อมีการพิจารณาแล้วว่าเบราว์เซอร์ของผู้ใช้รองรับ getusermedia ต่อไปนี้ง่ายมาก คุณจะต้องตั้งค่า SRC ขององค์ประกอบวิดีโอนั้นให้เข้ากับการเชื่อมต่อวิดีโอถ่ายวิดีโอของผู้ใช้ นั่นคือทุกสิ่งที่คุณต้องทำเพื่อเข้าถึงกล้องของคุณด้วยเบราว์เซอร์!
ฟังก์ชั่นของการถ่ายภาพสามารถกล่าวได้ว่ามีความซับซ้อนมากขึ้นเล็กน้อย เราเพิ่มจอภาพลงในปุ่มเพื่อวาดวิดีโอบนผืนผ้าใบ
// ทริกเกอร์การกระทำของภาพถ่าย
document.getElementById ("snap")
.AdDeventListener ("คลิก" ฟังก์ชัน () {
บริบท DRAWIMAGE (วิดีโอ, 0, 0, 640, 480);
-
แน่นอนคุณสามารถเพิ่มเอฟเฟกต์ตัวกรองบางอย่างลงในรูปภาพ ...
ในอดีตเราจำเป็นต้องใช้ปลั๊กอินของบุคคลที่สามเพื่อเข้าถึงกล้องของผู้ใช้จากเบราว์เซอร์ซึ่งค่อนข้างซับซ้อน ตอนนี้เราต้องการเทคโนโลยี HTML5 Canvas และ JavaScript เพื่อใช้งานกล้องของผู้ใช้อย่างง่ายดายและรวดเร็ว มันไม่ได้เกี่ยวกับการเข้าถึงกล้องเท่านั้น แต่ยังเป็นเพราะเทคโนโลยีผืนผ้าใบของ HTML5 นั้นทรงพลังมากจนเราสามารถเพิ่มเอฟเฟกต์ตัวกรองที่น่าสนใจต่าง ๆ ให้กับรูปภาพ ตอนนี้ใช้กล้องของคุณเองเพื่อถ่ายรูปตัวเองในเบราว์เซอร์ของคุณ!