Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

François Beaufort

Elad Alon

Browser Support

ตอนนี้แพลตฟอร์มเว็บมาพร้อมกับ Capture Handle ซึ่งเป็นกลไกที่ช่วยให้การทำงานร่วมกันระหว่างเว็บแอปที่จับภาพและเว็บแอปที่ถูกจับภาพ 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เพื่อสร้างการสื่อสารกับเว็บแอปที่จับภาพ (เช่น ใช้การรับส่งข้อความผ่าน Worker หรือโครงสร้างพื้นฐานของระบบคลาวด์ที่ใช้ร่วมกัน)

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

เว็บแอปที่บันทึกมีวิดีโอ 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...
});

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

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

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

ตัวอย่าง

คุณลองใช้ Capture Handle ได้โดยเรียกใช้ตัวอย่าง

การสาธิต

คุณดูการสาธิตบางอย่างได้ที่

การตรวจหาฟีเจอร์

หากต้องการตรวจสอบว่าระบบรองรับ 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 โปรดระบุรายละเอียดให้มากที่สุดเท่าที่จะเป็นไปได้ รวมถึงวิธีการง่ายๆ ในการจำลองปัญหาซ้ำ

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

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

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

ลิงก์ที่มีประโยชน์

การรับทราบ

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