แพลตฟอร์มเว็บอนุญาตให้เว็บแอปบันทึกแทร็กวิดีโอของแท็บปัจจุบันอยู่แล้ว ตอนนี้โมเดลจะจัดส่งพร้อมกับ Region Capture ซึ่งเป็นกลไกในการครอบตัดแทร็กวิดีโอเหล่านี้ เว็บแอปจะกำหนดส่วนหนึ่งของแท็บปัจจุบันเป็นพื้นที่ที่สนใจ และเบราว์เซอร์จะครอบตัดพิกเซลทั้งหมดนอกพื้นที่ดังกล่าว
ก่อนหน้านี้เว็บแอปสามารถครอบตัดแทร็กวิดีโอ "ด้วยตนเอง" กล่าวคือ เว็บแอปสามารถจัดการแต่ละเฟรมได้โดยตรง ก็ไม่มีประสิทธิภาพและไม่มีประสิทธิภาพ Region Cat จะช่วยแก้ไขปัญหาข้อบกพร่องเหล่านี้ ตอนนี้เว็บแอปสามารถสั่งให้เบราว์เซอร์ทำงานในนามของแอปได้แล้ว
เกี่ยวกับการจับภาพภูมิภาค
คุณได้สร้างเว็บไซต์ด้วย Dynamic ContentTM ซึ่งเป็นเว็บแอปที่ดีที่สุด และผู้คนก็มักจะหยุดใช้แอปนี้ไม่ได้ ขั้นตอนถัดไปที่ทำได้คือการฝังความสามารถในการประชุมออนไลน์ คุณเลยตัดสินใจไป คุณทำงานร่วมกับผู้ให้บริการการประชุมทางวิดีโอที่มีอยู่ โดยฝังเว็บแอปเป็น 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.
}
การได้รับ 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 (องค์ประกอบที่ generateTarget)
หากทำสำเร็จ วิดีโอ Promise จะได้รับการแก้ไขเมื่อสามารถรับประกันได้ว่าเฟรมวิดีโอที่ตามมาทั้งหมดจะมีพิกเซลที่อยู่ในกรอบล้อมรอบของ mainContentArea
หากไม่สำเร็จ Promise จะถูกปฏิเสธ ซึ่งจะเกิดขึ้นในกรณีต่อไปนี้
- มีการสร้าง
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 ดังกล่าวมีชุดข้อกำหนดด้านความปลอดภัยและความเป็นส่วนตัวที่ต่างจากการครอบตัดแบบง่าย
ความปลอดภัยและความเป็นส่วนตัว
การจับภาพภูมิภาคช่วยให้เว็บแอปที่สังเกตพิกเซลทั้งหมดในแท็บอยู่แล้วนำพิกเซลเหล่านั้นบางส่วนออกตามความสมัครใจ มีความปลอดภัยตามสิทธิบัตร เนื่องจากไม่มีข้อมูลใหม่
สามารถใช้การจับภาพภูมิภาคเพื่อจำกัดข้อมูลที่จะส่งไปยังผู้เข้าร่วมระยะไกล ตัวอย่างเช่น คุณอาจต้องการแชร์สไลด์บางส่วน แต่ไม่แชร์บันทึกของผู้บรรยาย
การแชร์โน้ตจากระยะไกลเป็นเรื่องไม่พึงประสงค์อย่างมาก จับภาพภูมิภาคคิว
โปรดทราบว่า Region Cat ไม่ได้เพิ่มการรับประกันความปลอดภัยใดๆ ไว้ในตัว เมื่อส่งต่อแทร็กไปยังเอกสารอื่น เอกสารฝั่งผู้รับจะยังยกเลิกการครอบตัดแทร็กและรับสิทธิ์เข้าถึงพิกเซลแท็บที่จับภาพไว้ได้ทั้งหมด
Chrome จะวาดขอบสีน้ำเงินรอบขอบของแท็บที่จับภาพไว้ เมื่อทำการครอบตัด โดยทั่วไปแล้ว Chrome จะวาดขอบสีน้ำเงินรอบเป้าหมายที่ครอบตัด
การสาธิต
คุณเล่น Region Capture ได้โดยเรียกใช้การสาธิตใน Glitch อย่าลืมตรวจสอบซอร์สโค้ด
การสนับสนุนเบราว์เซอร์
การสนับสนุนเบราว์เซอร์
- 104
- 104
- x
- x
การจับภาพภูมิภาคใช้งานได้จาก Chrome 104 ในเดสก์ท็อปเท่านั้น
ขั้นตอนถัดไป
ต่อไปนี้เป็นตัวอย่างสิ่งที่จะเกิดขึ้นในอนาคตอันใกล้ซึ่งจะช่วยปรับปรุงการแชร์หน้าจอบนเว็บ
- การจับภาพภูมิภาคจะสนับสนุนการจับภาพของแท็บอื่นๆ
- การโฟกัสแบบมีเงื่อนไขจะอนุญาตให้เว็บแอปจับภาพสั่งเบราว์เซอร์ให้เปลี่ยนโฟกัสไปยังพื้นผิวจอแสดงผลที่จับภาพ หรือเพื่อหลีกเลี่ยงการเปลี่ยนโฟกัสดังกล่าว
- อาจให้ Capture API ระดับองค์ประกอบ
ความคิดเห็น
ทีม Chrome และชุมชนมาตรฐานเว็บต้องการทราบข้อมูลเกี่ยวกับประสบการณ์ในการใช้งาน Region Capture ของคุณ
บอกให้เราทราบเกี่ยวกับการออกแบบ
มีบางอย่างเกี่ยวกับการจับภาพตามภูมิภาคที่ทำงานไม่ได้ตามที่คาดไว้ไหม หรือมีเมธอดหรือคุณสมบัติที่คุณจำเป็นต้องใช้ในการนำแนวคิดของคุณไปปฏิบัติจริงหรือไม่ หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลการรักษาความปลอดภัย
- ยื่นปัญหาด้านข้อมูลจำเพาะในที่เก็บของ GitHub หรือเพิ่มความคิดของคุณเกี่ยวกับปัญหาที่มีอยู่
มีปัญหาเกี่ยวกับการติดตั้งใช้งานใช่ไหม
คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่ หรือการใช้งานแตกต่างจากข้อกำหนดหรือไม่
- รายงานข้อบกพร่องที่ https://new.crbug.com และอย่าลืมใส่รายละเอียดให้มากที่สุด รวมถึงวิธีการง่ายๆ ในการผลิตซ้ำ Glitch เหมาะสำหรับการแชร์คำแนะนำที่ทำซ้ำได้ง่ายและรวดเร็ว
แสดงการสนับสนุน
คุณวางแผนที่จะใช้การจับภาพภูมิภาคไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนนั้นสำคัญเพียงใด
ส่งทวีตไปที่ @ChromiumDev และบอกเราว่าคุณใช้งานฟีเจอร์นี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
กิตติกรรมประกาศ
ขอขอบคุณ Joe Medley ที่อ่านบทความนี้