แชร์แท็บได้ดีขึ้นด้วยแคปเจอร์แฮนเดิล

François Beaufort
François Beaufort
GitHub
Elad Alon

การรองรับเบราว์เซอร์

  • Chrome: 102
  • Edge: 102
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

ตอนนี้แพลตฟอร์มเว็บมาพร้อมกับแฮนเดิลการจับภาพ ซึ่งเป็นกลไกที่ช่วยในการทำงานร่วมกันระหว่างการจับภาพกับเว็บแอปที่จับภาพไว้ แฮนเดิลการจับภาพช่วยให้เว็บแอปที่จับภาพระบุเว็บแอปที่จับภาพได้อย่างมั่นใจและเหมาะกับการใช้งาน (หากเว็บแอปที่จับภาพเลือกใช้)

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงประโยชน์

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

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

ภาพแสดงผลของห้องกระจก

เกี่ยวกับแฮนเดิลการจับภาพ

แฮนเดิลการจับภาพประกอบด้วย 2 ส่วนซึ่งส่งเสริมกัน ดังนี้

  • เว็บแอปที่บันทึกไว้สามารถเลือกรับการแสดงข้อมูลบางอย่างต่อต้นทางบางแห่งได้โดยใช้ navigator.mediaDevices.setCaptureHandleConfig()
  • จากนั้นเว็บแอปที่บันทึกจะอ่านข้อมูลดังกล่าวได้ด้วย getCaptureHandle() ในออบเจ็กต์ MediaStreamTrack

ด้านที่จับภาพ

เว็บแอปสามารถเปิดเผยข้อมูลต่อเว็บแอปที่อาจบันทึกข้อมูลได้ โดยเรียกใช้ navigator.mediaDevices.setCaptureHandleConfig() ด้วยออบเจ็กต์ที่ไม่บังคับซึ่งประกอบด้วยสมาชิกต่อไปนี้

  • handle: อาจเป็นสตริงใดก็ได้สูงสุด 1,024 อักขระ..
  • exposeOrigin: หากเป็น true แหล่งที่มาของเว็บแอปที่บันทึกไว้อาจแสดงในเว็บแอปที่บันทึกไว้
  • permittedOrigins: ค่าที่ใช้ได้คือ (1) อาร์เรย์ว่าง (2) อาร์เรย์ที่มีรายการเดียว "*" หรือ (3) อาร์เรย์ของต้นทาง หาก permittedOrigins ประกอบด้วยรายการเดียว "*" เว็บแอปที่บันทึกทั้งหมดจะสังเกต CaptureHandle ได้ มิเช่นนั้น ผู้ใช้จะดูได้เฉพาะในเว็บแอปที่บันทึกไว้ซึ่งต้นทางอยู่ใน permittedOrigins

ตัวอย่างต่อไปนี้แสดงวิธีแสดง UUID ที่สร้างขึ้นแบบสุ่มเป็นแฮนเดิลและต้นทางสําหรับเว็บแอปที่บันทึก

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

โปรดทราบว่าเว็บแอปที่บันทึกไว้จะไม่ทราบว่ามีการบันทึกอยู่หรือไม่ เว้นแต่ว่าเว็บแอปที่บันทึกจะใช้ข้อมูล CaptureHandle เพื่อสร้างการสื่อสารกับเว็บแอปที่บันทึก (เช่น การใช้การรับส่งข้อความผ่านเวิร์กเกอร์หรือโครงสร้างพื้นฐานระบบคลาวด์ที่แชร์)

ฝั่งที่จับภาพ

เว็บแอปที่ใช้จับภาพจะเก็บวิดีโอ MediaStreamTrack และอ่านข้อมูลแฮนเดิลการจับภาพได้โดยเรียก getCaptureHandle() ใน MediaStreamTrack นั้น การเรียกใช้นี้จะแสดงผลเป็น null หากไม่มีแฮนเดิลการจับภาพ หรือหากเว็บแอปที่จับภาพไม่ได้รับอนุญาตให้อ่านแฮนเดิล หากแฮนเดิลการบันทึกพร้อมใช้งานและเพิ่มเว็บแอปที่บันทึกไปยัง permittedOrigins แล้ว การเรียกนี้จะแสดงผลออบเจ็กต์ที่มีสมาชิกดังต่อไปนี้

  • handle: ค่าสตริงที่เว็บแอปที่บันทึกไว้ตั้งค่าด้วย navigator.mediaDevices.setCaptureHandleConfig()
  • origin: ต้นทางของเว็บแอปที่บันทึกไว้หากตั้งค่า exposeOrigin เป็น true มิเช่นนั้น ระบบจะไม่กำหนด

ตัวอย่างต่อไปนี้แสดงวิธีอ่านข้อมูลแฮนเดิลการจับภาพจากแทร็กวิดีโอ

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

ตรวจสอบการเปลี่ยนแปลง CaptureHandle โดยการฟังเหตุการณ์ "capturehandlechange" บนออบเจ็กต์ MediaStreamTrack การเปลี่ยนแปลงจะเกิดขึ้นในกรณีต่อไปนี้

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

ความปลอดภัยและความเป็นส่วนตัว

การทำงานร่วมกันระหว่างการจับภาพกับเว็บแอปที่จับภาพไว้นั้นเป็นไปได้ในทางทฤษฎีในปัจจุบัน โดยการฝัง "พิกเซลวิเศษ" ในเว็บแอปที่จับภาพไว้ หรือฝังคิวอาร์โค้ดในสตรีมวิดีโอ เป็นต้น แฮนเดิลการจับภาพมีกลไกที่ง่ายขึ้น เชื่อถือได้มากขึ้น และปลอดภัยยิ่งขึ้น นอกจากนี้ ยังช่วยให้เว็บแอปที่บันทึกไว้สามารถเลือกกลุ่มเป้าหมายได้ ไม่ว่าจะเป็นต้นทางที่เลือกหรือทั้งเว็บ

โปรดทราบว่า navigator.mediaDevices.setCaptureHandleConfig() ใช้ได้กับเฟรมหลักระดับบนสุดในบริบทการท่องเว็บที่ปลอดภัย (HTTPS เท่านั้น) เท่านั้น

ตัวอย่าง

คุณเล่นกับแฮนเดิลการจับภาพได้โดยเรียกใช้ตัวอย่างใน Glitch อย่าลืมตรวจสอบซอร์สโค้ด

เดโม

ดูตัวอย่างบางส่วนได้ที่

การตรวจหาองค์ประกอบ

หากต้องการตรวจสอบว่าระบบรองรับ getCaptureHandle() หรือไม่ ให้ใช้

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

หากต้องการตรวจสอบว่าระบบรองรับ navigator.mediaDevices.setCaptureHandleConfig() หรือไม่ ให้ใช้

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

ขั้นตอนถัดไป

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

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

ความคิดเห็น

ทีม Chrome และชุมชนมาตรฐานเว็บอยากทราบความคิดเห็นของคุณเกี่ยวกับแฮนเดิลการจับภาพ

บอกเราเกี่ยวกับการออกแบบ

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

  • แจ้งปัญหาเกี่ยวกับข้อกำหนดใน GitHub repo หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

พบปัญหาในการติดตั้งใช้งานใช่ไหม

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งานแตกต่างจากข้อมูลจำเพาะหรือไม่

  • รายงานข้อบกพร่องที่ https://new.crbug.com โปรดระบุรายละเอียดให้มากที่สุดและวิธีการจำลองข้อบกพร่อง Glitch เหมาะอย่างยิ่งสำหรับการแชร์การจำลองข้อบกพร่องที่รวดเร็วและง่ายดาย

แสดงการสนับสนุน

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

โปรดทวีตถึง @ChromiumDev และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

ขอขอบคุณ

ขอขอบคุณ Joe Medley ที่ตรวจสอบบทความนี้