การสนับสนุนเบราว์เซอร์
- 102
- 102
- x
- x
ปัจจุบันแพลตฟอร์มเว็บมี Capture Handle แล้ว ซึ่งเป็นกลไกที่ช่วยให้ทำงานร่วมกันระหว่างการจับภาพและจับเว็บแอปไว้ แคปเจอร์แฮนเดิลช่วยให้เว็บแอปที่ใช้จับภาพสามารถระบุเว็บแอปที่จับภาพได้อย่างมั่นใจและเป็นไปตามหลักสรีรศาสตร์ (หากเลือกใช้เว็บแอปที่บันทึกไว้)
มีตัวอย่างบางส่วนที่แสดงให้เห็นถึงประโยชน์ที่จะได้รับ
ตัวอย่างที่ 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 การเปลี่ยนแปลงจะเกิดขึ้นเมื่อ
- เว็บแอปที่บันทึกไว้เรียกใช้
navigator.mediaDevices.setCaptureHandleConfig() - การนำทางข้ามเอกสารเกิดขึ้นในเว็บแอปที่บันทึกไว้
videoTrack.addEventListener('capturehandlechange', event => {
captureHandle = event.target.getCaptureHandle();
// Consume new capture handle...
});
ความปลอดภัยและความเป็นส่วนตัว
ในทางทฤษฎี การทำงานร่วมกันระหว่างการบันทึกและเว็บแอปที่บันทึกนั้นเป็นไปได้ด้วยการฝัง "พิกเซลวิเศษ" ลงในเว็บแอปที่บันทึก หรือฝังโค้ด QR ลงในสตรีมวิดีโอ เป็นต้น แคปเจอร์แฮนเดิลมีกลไกที่ง่าย เชื่อถือได้ และปลอดภัยมากยิ่งขึ้น นอกจากนี้ยังช่วยให้เว็บแอปที่บันทึกไว้เลือกกลุ่มเป้าหมายได้ โดยจะเลือกต้นทางหรือทั้งเว็บก็ได้
โปรดทราบว่า 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 และชุมชนมาตรฐานเว็บต้องการทราบข้อมูลเกี่ยวกับประสบการณ์ในการใช้งาน Capture Handle
บอกให้เราทราบเกี่ยวกับการออกแบบ
มีบางอย่างเกี่ยวกับแคปเจอร์แฮนเดิลที่ทำงานผิดปกติไหม หรือมีเมธอดหรือคุณสมบัติที่คุณจำเป็นต้องใช้ในการนำแนวคิดของคุณไปปฏิบัติจริงหรือไม่ หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลการรักษาความปลอดภัย
- ยื่นปัญหาด้านข้อมูลจำเพาะในที่เก็บของ GitHub หรือเพิ่มความคิดของคุณเกี่ยวกับปัญหาที่มีอยู่
มีปัญหาเกี่ยวกับการติดตั้งใช้งานใช่ไหม
คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่ หรือการใช้งานแตกต่างจากข้อกำหนดหรือไม่
- รายงานข้อบกพร่องที่ https://new.crbug.com และอย่าลืมใส่รายละเอียดให้มากที่สุด รวมถึงวิธีการง่ายๆ ในการผลิตซ้ำ Glitch เหมาะสำหรับการแชร์คำแนะนำที่ทำซ้ำได้ง่ายและรวดเร็ว
แสดงการสนับสนุน
คุณกำลังวางแผนที่จะใช้แฮนเดิลการจับภาพใช่ไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนนั้นสำคัญเพียงใด
ส่งทวีตไปที่ @ChromiumDev และบอกเราว่าคุณใช้งานฟีเจอร์นี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
กิตติกรรมประกาศ
ขอขอบคุณ Joe Medley ที่อ่านบทความนี้