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

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 หรือเพิ่มความเห็นเกี่ยวกับปัญหาที่มีอยู่

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

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

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

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

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

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

ขอขอบคุณ

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