การแชร์แท็บที่ดียิ่งขึ้นด้วย Region Capture

François Beaufort

Elad Alon

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

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

เกี่ยวกับการจับภาพภูมิภาค

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

วันที่

พื้นที่เนื้อหาหลักเป็นสีน้ำเงินและ iframe แบบข้ามต้นทางเป็นสีแดง

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

คราวนี้ให้ใช้ Region Capture มี Element ในหน้าเว็บของคุณ อาจเป็น <div> ที่มีเนื้อหาหลัก ตั้งชื่อว่า mainContentArea คุณต้องการให้เว็บแอปการประชุมทางวิดีโอบันทึกและแชร์พื้นที่ซึ่งกำหนดโดยกรอบล้อมรอบขององค์ประกอบนี้จากระยะไกลได้ ดังนั้นคุณได้รับ CropTarget จาก mainContentArea คุณส่งCropTargetนี้ไปยังเว็บแอปการประชุมทางวิดีโอ หลังจากครอบตัดแทร็กวิดีโอโดยใช้ CropTarget นี้ เฟรมในแทร็กนั้นจะมีเพียงพิกเซลที่อยู่ภายในกรอบล้อมรอบของ mainContentArea หาก mainContentArea เปลี่ยนขนาด รูปร่าง หรือสถานที่ แทร็กวิดีโอก็จะแสดงตามนั้นโดยไม่ต้องป้อนข้อมูลเพิ่มเติมจากเว็บแอป

มาดูขั้นตอนเหล่านี้กันอีกครั้ง

คุณกําหนด CropTarget ในเว็บแอปได้โดยการเรียก CropTarget.fromElement() ที่มีองค์ประกอบที่คุณเลือกเป็นอินพุต

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

คุณส่ง CropTarget ไปยังเว็บแอปการประชุมทางวิดีโอ

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

เว็บแอปการประชุมทางวิดีโอขอให้เบราว์เซอร์ครอบตัดแทร็กไปยังพื้นที่ที่ CropTarget กําหนด โดยการเรียกใช้ cropTo() ในแทร็กวิดีโอจับภาพตนเองที่มีเป้าหมายการครอบตัดที่ได้รับจากเว็บแอปหลัก

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

เรียบร้อย! เท่านี้ก็เรียบร้อย

ข้อมูลเจาะลึก

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

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

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

การค้นหาเป้าหมายการครอบตัด

เรามาโฟกัสที่เอลิเมนต์ชื่อ mainContentArea กัน หากต้องการดึงข้อมูล CropTarget จากหน้านี้ ให้โทรหา CropTarget.fromElement(mainContentArea) Promise ที่แสดงผลไว้จะได้รับการแก้ไขด้วยออบเจ็กต์ CropTarget ใหม่หากทำสำเร็จ มิฉะนั้น ระบบจะปฏิเสธหากคุณสร้างออบเจ็กต์ CropTarget จำนวนที่ไม่สมเหตุผล

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

ออบเจ็กต์ CropTarget เป็นแบบซีเรียลได้ ซึ่งต่างจาก Element แต่จะส่งผ่านไปยังเอกสารอื่นโดยใช้ Window.postMessage() ได้ เป็นต้น

หมายเหตุ: ก่อนที่จะใช้ Chrome 106 CropTarget.fromElement(mainContentArea) จะปฏิเสธหากประเภทของ mainContentArea ไม่ใช่ <div> หรือ iframe

การครอบตัด

เมื่อจับภาพแท็บ แทร็กวิดีโอจะสร้างเป็น BrowserCaptureMediaStreamTrack ซึ่งเป็นคลาสย่อยของ MediaStreamTrack คลาสย่อยดังกล่าวจะแสดง cropTo() เรียกใช้ track.cropTo(cropTarget) เพื่อเริ่มครอบตัดให้เป็นเส้นโครงร่างของ mainContentArea (องค์ประกอบที่มีการดึงครอบตัดเป้าหมาย)

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

หากไม่สำเร็จ คำสัญญาจะถูกปฏิเสธ ซึ่งจะเกิดขึ้นในกรณีต่อไปนี้

• มีการสร้าง CropTarget ในอีกแท็บหนึ่ง (สำหรับตอนนี้ โปรดอดใจรอ)
• CropTarget ได้มาจากองค์ประกอบที่ไม่มีอยู่แล้ว
• แทร็กมีการโคลน (ดูปัญหา 1509418)
• แทร็กปัจจุบันไม่ใช่แทร็กวิดีโอที่จับภาพตัวเอง โปรดดูด้านล่าง

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

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

หากต้องการเปลี่ยนเป็นสถานะที่ไม่ผ่านการครอบตัด โปรดโทรหา cropTo() ด้วยหมายเลข null

// Stop cropping.
await track.cropTo(null);

เนื้อหาที่ซ้อนทับและบัง

สำหรับการจับภาพระดับภูมิภาค จะมีเพียงตำแหน่งและขนาดของเป้าหมายเท่านั้นที่ไม่สำคัญ z-index ระบบจะบันทึกพิกเซลที่บังเป้าหมายไว้ ระบบจะไม่บันทึกส่วนที่ซ้อนทับของเป้าหมาย

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

วันที่

ลักษณะการทำงานของ Region Capture ที่ปิดกั้นเนื้อหา

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

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

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

วันที่

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

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

Chrome วาดเส้นขอบสีน้ำเงินรอบขอบของแท็บที่จับภาพแล้ว เมื่อครอบตัด โดยทั่วไป Chrome จะวาดเส้นขอบสีน้ำเงินรอบเป้าหมายที่ครอบตัด

สาธิต

คุณสามารถเล่นกับการจับภาพภูมิภาคได้โดยเรียกใช้การสาธิตใน Glitch เป็น อย่าลืมดูซอร์สโค้ด

การสนับสนุนเบราว์เซอร์

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

• 104
• 104
• เท่า
• เท่า

การจับภาพภูมิภาคใช้งานได้ใน Chrome 104 บนเดสก์ท็อปเท่านั้น

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

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

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

ความคิดเห็น

ทีม Chrome และชุมชนมาตรฐานเว็บต้องการทราบประสบการณ์ของคุณในการใช้งาน Region Capture

บอกให้เราทราบเกี่ยวกับการออกแบบ

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

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

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

คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือการติดตั้งใช้งานแตกต่างจากข้อกําหนดหรือไม่

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

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

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

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

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

• ข้อกำหนด
• คำอธิบาย
• ตรวจสอบ TAG
• ข้อบกพร่อง Chromium
• รายการ ChromeStatus.com

กิตติกรรมประกาศ

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