การแชร์แท็บที่ดียิ่งขึ้นด้วย 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 จะไม่มีผล ระบบจะจับภาพพิกเซลที่บดบังเป้าหมาย ระบบจะไม่จับภาพส่วนที่บดบังของเป้าหมาย

การดำเนินการนี้เป็นผลสืบเนื่องมาจากการจับภาพเฉพาะพื้นที่ที่เลือกซึ่งโดยพื้นฐานแล้วคือการครอบตัด ทางเลือกหนึ่งซึ่งจะเป็น 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 ที่ตรวจสอบบทความนี้