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

François Beaufort

Elad Alon

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

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

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

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

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

เรามาลองใช้การจับภาพเฉพาะพื้นที่กัน มี 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.

Et voilà เท่านี้ก็เรียบร้อย

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

การตรวจหาองค์ประกอบ

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

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

การสร้าง CropTarget

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

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

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

การครอบตัด

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

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

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

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

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

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

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

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

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

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

สาธิต

คุณเล่นกับฟีเจอร์การจับภาพพื้นที่ทำงานได้โดยเรียกใช้เดโมใน Glitch อย่าลืมตรวจสอบซอร์สโค้ด

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

การจับภาพพื้นที่ทำงานพร้อมใช้งานใน Chrome 104 บนเดสก์ท็อปเท่านั้น

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

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

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

ความคิดเห็น

ทีม Chrome และชุมชนมาตรฐานเว็บอยากทราบความคิดเห็นของคุณเกี่ยวกับฟีเจอร์การจับภาพพื้นที่

บอกเราเกี่ยวกับการออกแบบ

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

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

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

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

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

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

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

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

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

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

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

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