การบันทึกวิดีโอจากผู้ใช้

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

เริ่มต้นแบบง่ายและค่อยเป็นค่อยไป

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

<input type="file" accept="video/*" capture />

วิธีการนี้ใช้ได้กับทุกแพลตฟอร์ม บนเดสก์ท็อป ระบบจะแจ้งให้ผู้ใช้อัปโหลดไฟล์จากระบบไฟล์ (ไม่สนใจแอตทริบิวต์ capture) ใน Safari บน iOS ระบบจะเปิดแอปกล้อง ซึ่งจะช่วยให้คุณบันทึกวิดีโอและส่งกลับไปยังหน้าเว็บได้ ส่วนใน Android ระบบจะให้ผู้ใช้เลือกแอปที่จะใช้บันทึกวิดีโอก่อนที่จะส่งกลับไปยังหน้าเว็บ

อุปกรณ์เคลื่อนที่จำนวนมากมีกล้องมากกว่า 1 ตัว หากต้องการตั้งค่ากำหนด ให้ตั้งค่าแอตทริบิวต์ capture เป็น user หากต้องการให้กล้องหันเข้าหาผู้ใช้ หรือ environment หากต้องการให้กล้องหันออก

<input type="file" accept="video/*" capture="user" />
<input type="file" accept="video/*" capture="environment" />

โปรดทราบว่านี่เป็นเพียงคำแนะนำเท่านั้น หากเบราว์เซอร์ไม่รองรับตัวเลือกดังกล่าว หรือกล้องประเภทที่คุณขอไม่พร้อมใช้งาน เบราว์เซอร์อาจเลือกกล้องอื่น

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

<input type="file" accept="video/*" capture="camera" id="recorder" />
<video id="player" controls></video>
<script>
  var recorder = document.getElementById('recorder');
  var player = document.getElementById('player');

  recorder.addEventListener('change', function (e) {
    var file = e.target.files[0];
    // Do something with the video file.
    player.src = URL.createObjectURL(file);
  });
</script>

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

• แนบกับองค์ประกอบ <video> โดยตรงเพื่อให้เล่นได้
• ดาวน์โหลดลงในอุปกรณ์ของผู้ใช้
• อัปโหลดไปยังเซิร์ฟเวอร์โดยแนบไปกับ XMLHttpRequest
• วาดเฟรมลงในผืนผ้าใบและใช้ฟิลเตอร์กับเฟรม

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

เข้าถึงกล้องแบบอินเทอร์แอกทีฟ

เบราว์เซอร์สมัยใหม่สามารถเข้าถึงกล้องได้โดยตรง ซึ่งช่วยให้เราสร้างประสบการณ์การใช้งานที่ผสานรวมกับหน้าเว็บอย่างสมบูรณ์และผู้ใช้ไม่ต้องออกจากเบราว์เซอร์

รับสิทธิ์เข้าถึงกล้อง

เราเข้าถึงกล้องได้โดยตรงโดยใช้ API ในข้อกำหนด WebRTC ที่ชื่อ getUserMedia() getUserMedia() จะแจ้งให้ผู้ใช้อนุญาตให้เข้าถึงไมโครโฟนและกล้องที่เชื่อมต่อ

หากดำเนินการสำเร็จ API จะแสดงผล Stream ที่มีข้อมูลจากกล้องหรือไมโครโฟน จากนั้นเราจะแนบ Stream นั้นกับองค์ประกอบ <video>, แนบกับสตรีม WebRTC หรือบันทึกโดยใช้ MediaRecorder API ก็ได้

ในการรับข้อมูลจากกล้อง เราเพิ่งตั้งค่า video: true ในออบเจ็กต์ข้อจำกัดที่ส่งไปยัง API ของ getUserMedia()

<video id="player" controls></video>
<script>
  var player = document.getElementById('player');

  var handleSuccess = function (stream) {
    player.srcObject = stream;
  };

  navigator.mediaDevices
    .getUserMedia({audio: true, video: true})
    .then(handleSuccess);
</script>

หากต้องการเลือกกล้องที่ต้องการ ให้แสดงรายการกล้องที่ใช้ได้ก่อน

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices = devices.filter((d) => d.kind === 'videoinput');
});

จากนั้นคุณจะส่งรหัสอุปกรณ์ที่ต้องการใช้เมื่อโทรหา getUserMedia ได้

navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    deviceId: devices[0].deviceId,
  },
});

การดำเนินการนี้เพียงอย่างเดียวนั้นไม่ค่อยมีประโยชน์ สิ่งที่เราทำได้คือนำข้อมูลวิดีโอไปเล่น

เข้าถึงข้อมูลดิบจากกล้อง

หากต้องการเข้าถึงข้อมูลวิดีโอดิบจากกล้อง คุณสามารถวาดแต่ละเฟรมลงใน <canvas> และประมวลผลพิกเซลได้โดยตรง

สําหรับผืนผ้าใบ 2 มิติ คุณสามารถใช้เมธอด drawImage ของบริบทเพื่อวาดเฟรมปัจจุบันขององค์ประกอบ <video> ลงในผืนผ้าใบ

context.drawImage(myVideoElement, 0, 0);

คุณสามารถใช้องค์ประกอบ <video> เป็นแหล่งที่มาของพื้นผิวด้วย Canvas ของ WebGL

gl.texImage2D(
  gl.TEXTURE_2D,
  0,
  gl.RGBA,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  myVideoElement,
);

โปรดทราบว่าไม่ว่าจะเลือกตัวเลือกใด ฟีเจอร์นี้จะใช้เฟรมปัจจุบันของวิดีโอที่เล่นอยู่ หากต้องการประมวลผลเฟรมหลายเฟรม คุณต้องวาดวิดีโอลงในผืนผ้าใบใหม่ทุกครั้ง

ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในบทความเกี่ยวกับการใช้เอฟเฟกต์แบบเรียลไทม์กับรูปภาพและวิดีโอ

บันทึกข้อมูลจากกล้อง

วิธีที่ง่ายที่สุดในการบันทึกข้อมูลจากกล้องคือการใช้ MediaRecorder API

MediaRecorder API จะนำสตรีมที่ getUserMedia สร้างขึ้น แล้วบันทึกข้อมูลจากสตรีมไปยังปลายทางที่ต้องการทีละรายการ

<a id="download">Download</a>
<button id="stop">Stop</button>
<script>
  let shouldStop = false;
  let stopped = false;
  const downloadLink = document.getElementById('download');
  const stopButton = document.getElementById('stop');

  stopButton.addEventListener('click', function() {
    shouldStop = true;
  })

  var handleSuccess = function(stream) {
    const options = {mimeType: 'video/webm'};
    const recordedChunks = [];
    const mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.addEventListener('dataavailable', function(e) {
      if (e.data.size > 0) {
        recordedChunks.push(e.data);
      }

      if(shouldStop === true && stopped === false) {
        mediaRecorder.stop();
        stopped = true;
      }
    });

    mediaRecorder.addEventListener('stop', function() {
      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
      downloadLink.download = 'acetest.webm';
    });

    mediaRecorder.start();
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: true })
      .then(handleSuccess);
</script>

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

ขอสิทธิ์ใช้กล้องอย่างมีความรับผิดชอบ

หากก่อนหน้านี้ผู้ใช้ไม่ได้ให้สิทธิ์เข้าถึงกล้องแก่เว็บไซต์ของคุณ ทันทีที่คุณเรียกใช้ getUserMedia เบราว์เซอร์จะแจ้งให้ผู้ใช้ให้สิทธิ์เข้าถึงกล้องแก่เว็บไซต์

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

ใช้ Permissions API เพื่อตรวจสอบว่าคุณมีสิทธิ์เข้าถึงแล้วหรือยัง

getUserMedia API ช่วยให้คุณทราบว่าคุณเข้าถึงกล้องได้แล้วหรือไม่ ซึ่งก็จะแสดงปัญหา แต่ในการมอบ UI ที่ดีเพื่อให้ผู้ใช้มอบสิทธิ์ให้คุณเข้าถึงกล้องได้ คุณจะต้องขอสิทธิ์เข้าถึงกล้อง

ปัญหานี้แก้ไขได้ในบางเบราว์เซอร์โดยใช้ Permission API navigator.permission API ช่วยให้คุณสามารถค้นหาสถานะความสามารถในการเข้าถึง API ที่เฉพาะเจาะจงได้โดยไม่ต้องแจ้งให้ทราบอีกครั้ง

หากต้องการสอบถามว่าคุณมีสิทธิ์เข้าถึงกล้องของผู้ใช้หรือไม่ ให้ส่ง{name: 'camera'}ไปยังเมธอดการค้นหา แล้วระบบจะแสดงผลลัพธ์อย่างใดอย่างหนึ่งต่อไปนี้

• granted — ผู้ใช้เคยให้สิทธิ์เข้าถึงกล้องแก่คุณ
• prompt — ผู้ใช้ไม่ได้ให้สิทธิ์เข้าถึงแก่คุณและระบบจะแสดงข้อความแจ้งเมื่อคุณโทรหา getUserMedia
• denied — ระบบหรือผู้ใช้บล็อกการเข้าถึงกล้องอย่างชัดเจนและคุณจะเข้าถึงกล้องไม่ได้

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

navigator.permissions.query({name: 'camera'}).then(function (result) {
  if (result.state == 'granted') {
  } else if (result.state == 'prompt') {
  } else if (result.state == 'denied') {
  }
  result.onchange = function () {};
});

ความคิดเห็น