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

François Beaufort
François Beaufort
GitHub
Elad Alon

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

  • 102
  • 102
  • x
  • x

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

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

ตัวอย่างที่ 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...
});

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

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

โปรดทราบว่า 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 ที่อ่านบทความนี้