คำอธิบายเชิงปฏิบัติโดยละเอียดของฟังก์ชันภาพถ่ายและกล้อง HTML5

เมื่อเร็วๆ นี้ ฉันกำลังทำงานกับแอปพลิเคชันกล้องบนคลาวด์สำหรับแอป Chrome แอปพลิเคชันนี้มีฟังก์ชันหลัก เช่น การถ่ายภาพ การบันทึกวิดีโอ การบันทึกรูปภาพและวิดีโอ การอัปโหลดไฟล์ ฯลฯ ซึ่งเกี่ยวข้องกับ HTML5 API จำนวนมากที่เกี่ยวข้องกับการสตรีมสื่อ วัตถุประสงค์ของการเขียนบทความนี้ ประการแรกเพื่อสรุปและจัดเรียงประเด็นความรู้ และที่สำคัญที่สุดคือเพื่อให้คำแนะนำแก่ผู้อ่านที่มีความต้องการที่เกี่ยวข้อง

หมายเหตุ: บทความนี้มีพื้นฐานมาจากการต่อสู้จริง และไม่มีความรู้ทางทฤษฎีมากเกินไป

getUserMedia API ของ HTML5 มอบอินเทอร์เฟซให้ผู้ใช้เข้าถึงสื่ออุปกรณ์ฮาร์ดแวร์ (กล้อง วิดีโอ เสียง ตำแหน่งทางภูมิศาสตร์ ฯลฯ) นักพัฒนาสามารถเข้าถึงอุปกรณ์สื่อฮาร์ดแวร์ได้โดยไม่ต้องอาศัยปลั๊กอินของเบราว์เซอร์ใดๆ โดยใช้อินเทอร์เฟซนี้

ความเข้ากันได้ของเบราว์เซอร์มีดังนี้:

ดังที่คุณเห็นจากภาพด้านบน เบราว์เซอร์กระแสหลักอย่าง Firefox, Chrome, Safari, Opera และอื่นๆ ได้รับการรองรับอย่างเต็มที่

 <video id=video autoplay></video> --------------------------------------- ----------------------- const videoConstraints = { width: 1366, height: 768 }; const videoNode = document.querySelector('#video'); สตรีม = รอ navigator.mediaDevices.getUserMedia ({ เสียง: จริง, วิดีโอ: videoConstraints }); videoNode.srcObject = สตรีม; videoNode.เล่น();

 // enumerateDevices รับอุปกรณ์สื่อทั้งหมด const mediaDevices = await navigator.mediaDevices.enumerateDevices(); // กรองเพื่อรับอุปกรณ์กล้องผ่านอินสแตนซ์ของอุปกรณ์ king แอตทริบิวต์ videoinput const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput ') ||. []; // รับกล้องด้านหน้า const videoDeviceId = videoDevices[0].deviceId; videoConstraints = { deviceId: { แน่นอน: videoDeviceId }, ความกว้าง: 1366, ความสูง: 768 }; ให้ stream = await navigator.mediaDevices.getUserMedia ({ audio: true, video: videoConstraints }); // รับกล้องด้านหลัง const videoDeviceId = videoDevices [1] .deviceId; const videoConstraints = { รหัสอุปกรณ์: { แน่นอน: videoDeviceId }, ความกว้าง: 1366, ความสูง: 768 }; ให้ stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });

 // จับภาพวิดีโอสตรีมผ่านแคนวาสและสร้างรูปภาพรูปแบบ base64 const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 1366; บริบท.drawImage(videoNode, 0, 0, canvas.width, canvas.height); ดาวน์โหลด(canvas.toDataURL('image/jpeg')); // ดาวน์โหลดฟังก์ชันรูปภาพ (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date()); .คลิก(); }

 ให้ stream = รอ navigator.mediaDevices.getUserMedia ({ audio: true, video: videoConstraints }); // ปิดกล้องหลังจาก 3 วินาที setTimeout(function () { stream.getTracks().forEach(track => track.stop( )) ; กระแส = null;

นี่เป็นการเติมเต็มฟังก์ชันการถ่ายภาพแบบง่ายๆ ของกล้อง

กระบวนการพื้นฐานของการถ่ายภาพคือการบันทึกวิดีโอสตรีมและบันทึกเป็นไฟล์เสียงและวิดีโอ วัตถุ HTML5 MediaRecorder ให้ฟังก์ชันการบันทึกมัลติมีเดียและการบันทึกวิดีโอ

ความเข้ากันได้ของเบราว์เซอร์มีดังนี้:

ดังแสดงในรูปด้านบน ความเข้ากันได้ของเบราว์เซอร์กับ MediaRecorder นั้นด้อยกว่า getUserMedia มาก ปัจจุบันมีเพียง Chrome และ Firefox เท่านั้นที่รองรับ MediaRecorder ได้ดีกว่า

==หมายเหตุ: แท็กวิดีโอของโปรแกรมเล่นตัวอย่างกล้องจะต้องตั้งค่าเป็นปิดเสียง (เพื่อกำจัดเสียงรบกวนที่รุนแรงที่เกิดจากเสียงสะท้อน)==

 const videoConstraints = { ความกว้าง: 1366, ความสูง: 768 }; ให้กระแส = รอ navigator.mediaDevices.getUserMedia ({ เสียง: จริง, วิดีโอ: videoConstraints }); / บันทึกสตรีมข้อมูล mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) => { // สร้างไฟล์อินสแตนซ์ข้อมูลไบนารี่ผ่านวัตถุ Blob ให้ recorderFile = new Blob ([this.recorderFile], (new Date).toISOString().replace(/:| /./g, '-') + '.mp4', { ประเภท: 'วิดีโอ/mp4' }); download(URL.createObjectURL(file)); // ดาวน์โหลดฟังก์ชันวิดีโอ (src) { if (!src) return; const a = document.createElement('a'); )); a.href = src; a.click(); } }; mediaRecorder.stop(); // หยุดการบันทึกและทริกเกอร์เหตุการณ์

จากแบบฝึกหัดภาคปฏิบัติข้างต้น ฉันเชื่อว่าผู้อ่านได้เรียนรู้ฟังก์ชั่นพื้นฐานของกล้อง เช่น การถ่ายภาพ การบันทึกวิดีโอ การบันทึกไฟล์ ฯลฯ เนื่องจากโครงการแอปพลิเคชันไม่ใช่โครงการส่วนบุคคลและซอร์สโค้ดไม่เปิดเผยต่อสาธารณะ ผู้ที่สนใจอาจต้องการทดลองใช้งาน