วิธีเข้าถึงกล้องใน PWA

ก่อนหน้านี้ในบทความของเราที่มีรายละเอียดเกี่ยวกับความสามารถด้านฮาร์ดแวร์ของ PWA การเข้าถึงกล้องเป็นหนึ่งในคุณสมบัติที่โดดเด่นกว่าที่เราเห็นกันมากขึ้นเรื่อยๆ แต่การที่จะรวมความสามารถนี้เข้ากับ PWA ของคุณอย่างเหมาะสมก็ไม่ใช่เรื่องง่าย ด้วยเหตุนี้ในบทความของเราในวันนี้ เราจะพยายามแนะนำคุณตลอดกระบวนการทั้งหมดนี้:

ข้อกำหนดเบื้องต้น

• PWA พื้นฐานที่สามารถสร้างได้ง่ายๆ โดยใช้ ReactJS และคู่มือที่เป็นลายลักษณ์อักษรของเรา
• ความเข้าใจอย่างถ่องแท้ของ HTML และ JavaScript

วิธีเข้าถึงกล้องใน PWA

พื้นฐาน

ขอแนะนำ getUserMedia() — API ของ webRTC

ในการเข้าถึงกล้องและ/หรือไมโครโฟนโดยตรง เว็บใช้ API ที่เรียกว่า getUserMedia() ซึ่งได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่เกือบทั้งหมด API นี้ พร้อมด้วย RTCPeerConnection และ RTCDataChannel เป็นส่วนหนึ่งของ WebRTC ซึ่งเป็นเฟรมเวิร์กที่สร้างขึ้นในเบราว์เซอร์ที่ช่วยให้สามารถสื่อสารแบบเรียลไทม์ได้

โดยทั่วไป สิ่งที่ API ( navigator.mediaDevices.getUserMedia(constraints) ) ทำคือแจ้งให้ผู้ใช้ขออนุญาตในการเข้าถึงอินพุตเสียงและวิดีโอของโทรศัพท์ (เช่น ไมโครโฟน เว็บแคม กล้อง ฯลฯ) การใช้สิทธิ์ใด API จะสร้างวัตถุ MediaStream JavaScript ที่เรียกว่า โลคัล ซึ่งสามารถจัดการเพิ่มเติมได้

ตัวอย่าง

สมมติว่าเรามีปุ่ม:

 <button>แสดงใบหน้าของฉัน</button>

และคลิกที่ปุ่มใดเรียกเมธอด navigator.mediaDevices.getUserMedia() (ไม่มีอินพุตเสียง):

 navigator.mediaDevices.getUserMedia ({
 วิดีโอ: จริง
})

เฮ็คเราสามารถไปกับข้อ จำกัด ได้เช่นกัน:

 navigator.mediaDevices.getUserMedia ({
  วิดีโอ: {
    อัตราส่วนภาพขั้นต่ำ: 1.333,
    minFrameRate: 30,
    ความกว้าง: 1280,
    ความสูง: 720
  }
})

นอกจากนี้ เราสามารถระบุคุณสมบัติ facingMode ในวัตถุวิดีโอ ซึ่งบอกเบราว์เซอร์ว่ากล้องของอุปกรณ์ใดที่จะใช้:

 {
  วิดีโอ: {
    ...
    โหมดเผชิญหน้า: {
//ใช้กล้องหลัง
      ที่แน่นอน: 'สิ่งแวดล้อม'
    }
  }
}

หรือ

 {
 วิดีโอ : {
  …
//ใช้กล้องหน้า
  facingMode: 'ผู้ใช้'
 }
}

หมายเหตุ :

• API พร้อมใช้งานบนต้นทางที่ปลอดภัย (HTTPS) เท่านั้น

• หากต้องการรับรายการข้อจำกัดที่รองรับในอุปกรณ์ปัจจุบัน ให้เรียกใช้:

 navigator.mediaDevices.getSupportedConstraints()

ส่วนที่ซับซ้อน

ตอนนี้เรามีความเข้าใจพื้นฐานที่ดีแล้ว มาต่อกันที่ส่วนขั้นสูงกัน ในส่วนนี้ เราจะพยายามสร้างปุ่มใน PWA ของเรา และเมื่อคลิก ปุ่มนั้นจะเปิดกล้องของเราและให้เราทำงานต่อไปได้

การสร้างปุ่ม [Get access to camera]

ก่อนอื่น เริ่มต้นด้วย <button> ใน index.html ของเรา:

 <button>เข้าถึงกล้อง</button>
<เล่นวิดีโออัตโนมัติ></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

หมายเหตุ :

• การเล่นอัตโนมัติอยู่ที่นั่นเพื่อบอกให้สตรีมสื่อเล่นอัตโนมัติและไม่หยุดในเฟรมแรก
• adapter-latest.js เป็นตัวป้องกันแอปจากการเปลี่ยนแปลงข้อมูลจำเพาะและความแตกต่างของคำนำหน้า

สตรีมวิดีโอแบบเรียลไทม์โดยคลิกที่ปุ่ม

ในการสตรีมวิดีโอแบบเรียลไทม์เมื่อคลิกที่ปุ่ม เราจำเป็นต้องเพิ่ม EventListener ซึ่งจะถูกเรียกเมื่อมีการออกเหตุการณ์การ click :

 document.querySelector('#get-access').addEventListener('click', async function init(e) {
  ลอง {
 }
จับ (ผิดพลาด) {
 }
})

หลังจากนั้นจะเรียก navigator.mediaDevices.getUserMedia() และขอสตรีมวิดีโอโดยใช้เว็บแคมของอุปกรณ์:

 document.querySelector('#get-access').addEventListener('click', async function init(e) {
  ลอง {
    สตรีม const = รอ navigator.mediaDevices.getUserMedia ({
      เสียง: เท็จ,
      วิดีโอ: จริง
    })
    const videoTracks = stream.getVideoTracks()
    แทร็กคอนสตรัค = videoTracks[0]
    alert(`กำลังรับวิดีโอจาก: ${track.label}`)
    document.querySelector('video').srcObject = stream
    document.querySelector('#get-access').setAttribute('hidden', จริง)
//การสตรีมวิดีโอหยุดโดย track.stop() หลังจากเล่นไป 3 วินาที
    setTimeout(() => { track.stop() }, 3 * 1,000)
  } จับ (ผิดพลาด) {
    alert(`${error.name}`)
    console.error (ข้อผิดพลาด)
  }
})

นอกจากนี้ ตามที่ระบุไว้ข้างต้นในส่วน พื้นฐาน คุณยังสามารถระบุข้อกำหนดเพิ่มเติมสำหรับสตรีมวิดีโอ:

 navigator.mediaDevices.getUserMedia ({
  วิดีโอ: {
    บังคับ: { minAspectRatio: 1.333, maxAspectRatio: 1.334, facingMode: 'user'},
    ไม่จำเป็น: [
      { minFrameRate: 60 },
      { ความกว้างสูงสุด: 640 },
      { ความสูงสูงสุด: 480 }
    ]
  }
}, successCallback, errorCallback);

การสร้างผืนผ้าใบ

ด้วยองค์ประกอบ <video> รวมกับ <canvas> คุณสามารถประมวลผลสตรีมวิดีโอแบบเรียลไทม์ของเราต่อไปได้ ซึ่งรวมถึงความสามารถในการแสดงเอฟเฟกต์ต่างๆ เช่น การใช้ฟิลเตอร์แบบกำหนดเอง การจัดคีย์ด้วยสี (หรือที่เรียกว่า “เอฟเฟกต์หน้าจอสีเขียว”) ทั้งหมดนี้ทำได้โดยใช้โค้ด JavaScript

ในกรณีที่คุณต้องการอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ Mozilla ได้เขียนคำแนะนำโดยละเอียดเกี่ยวกับการจัดการวิดีโอโดยใช้ผ้าใบ ดังนั้นอย่าลืมลองดู!

จับภาพผืนผ้าใบโดยใช้ takePhoto() และ grabFrame()

สามารถใช้ takePhoto และ grabFrame ใหม่ของ getUserMedia API เพื่อจับภาพสแนปชอตของวิดีโอสตรีมมิ่งในปัจจุบันได้ ยังคงมีความแตกต่างที่สำคัญระหว่างสองวิธี:

โดยพื้นฐานแล้ว สิ่งที่ grabFrame ทำคือเพียงแค่คว้าเฟรมวิดีโอถัดไป ซึ่งเป็นวิธีการจับภาพที่เรียบง่ายและไม่มีประสิทธิภาพ ในทางกลับกัน วิธี takePhoto ใช้วิธีจับภาพเฟรมที่ดีกว่า ซึ่งก็คือการขัดจังหวะการสตรีมวิดีโอปัจจุบัน เพื่อใช้ "ความละเอียดของกล้องถ่ายภาพสูงสุดที่มี" ของกล้องเพื่อจับภาพ Blob

ในตัวอย่างด้านล่าง เราจะวาดเฟรมที่จับภาพลงในองค์ประกอบ canvas โดยใช้วิธี grabFrame :

 var grabFrameButton = document.querySelector('button#grabFrame');
var canvas = document.querySelector('canvas');

grabFrameButton.onclick = grabFrame;

ฟังก์ชัน grabFrame() {
  อิมเมจCapture.grabFrame()
  .then (ฟังก์ชัน (imageBitmap) {
    console.log('Grabbed frame:', imageBitmap);
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(รูปภาพบิตแมป, 0, 0);
    canvas.classList.remove('ซ่อน');
  })
  .catch (ฟังก์ชัน (ข้อผิดพลาด) {
    console.log('grabFrame() ข้อผิดพลาด: ', ข้อผิดพลาด);
  });
}

และในตัวอย่างนี้ เราใช้ takePhoto() :

 var takePhotoButton = document.querySelector('button#takePhoto');
var canvas = document.querySelector('canvas');

takePhotoButton.onclick = ถ่ายรูป;

// รับ Blob จากแหล่งกล้องที่เลือกในปัจจุบันและ
// แสดงสิ่งนี้ด้วยองค์ประกอบ img
ฟังก์ชัน takePhoto() {
  imageCapture.takePhoto (). แล้ว (ฟังก์ชั่น (หยด) {
    console.log('ถ่ายรูป:', หยด);
    img.classList.remove('ซ่อน');
    img.src = URL.createObjectURL (หยด);
  }).catch(ฟังก์ชัน(ข้อผิดพลาด) {
    console.log('takePhoto() error: ', ข้อผิดพลาด);
  });
}

เพื่อให้ได้แนวคิดว่าวิธีการข้างต้นมีหน้าตาเป็นอย่างไร เราขอแนะนำ Simple Image Capture; และอีกทางหนึ่ง PWA Media Capture ก็เป็นตัวอย่างที่ดีของคุณลักษณะการดักจับสื่อพื้นฐานใน กปภ.

บทสรุป

ในบทช่วยสอนนี้ เราได้แนะนำคุณเกี่ยวกับพื้นฐานและเคล็ดลับขั้นสูงบางประการในการปรับใช้ฟีเจอร์กล้องใน PWA ของคุณ ที่เหลือขึ้นอยู่กับจินตนาการของคุณเท่านั้นที่จะทำให้ฟีเจอร์นี้ดีที่สุด

สำหรับผู้ค้า Magento ที่ต้องการพัฒนาร้านค้าที่ขับเคลื่อนด้วย PWA แห่งอนาคต ที่นี่ใน SimiCart เรามีโซลูชัน PWA ที่สมบูรณ์ซึ่งปรับให้เหมาะกับความต้องการของคุณ