แพลตฟอร์มเว็บอนุญาตให้เว็บแอปจับภาพแทร็กวิดีโอของแท็บปัจจุบันอยู่แล้ว โดยขณะนี้ได้มาพร้อมกับ Region Capture ซึ่งเป็นกลไกในการครอบตัดแทร็กวิดีโอเหล่านี้ เว็บแอปจะกำหนดส่วนหนึ่งของแท็บปัจจุบันเป็นพื้นที่ที่สนใจ และเบราว์เซอร์จะครอบตัดพิกเซลทั้งหมดนอกพื้นที่ดังกล่าว
ก่อนหน้านี้เว็บแอปสามารถครอบตัดแทร็กวิดีโอ "ด้วยตนเอง" กล่าวคือ เว็บแอปสามารถจัดการแต่ละเฟรมได้โดยตรง วิธีนี้ทั้งไม่ได้มีประสิทธิภาพและไม่ได้มีประสิทธิภาพ การจับภาพภูมิภาคช่วยแก้ไขข้อบกพร่องเหล่านี้ได้ ตอนนี้เว็บแอปสามารถสั่งให้เบราว์เซอร์ทำงานแทนแล้ว
เกี่ยวกับการจับภาพภูมิภาค
คุณจึงสร้างเว็บไซต์ด้วย Dynamic ContentTM จึงเป็นแอปพลิเคชันเว็บที่ดีที่สุดเท่าที่เคยมีมา และผู้คนก็ไม่สามารถหยุดใช้ได้ โดยมักจะทำงานร่วมกัน ขั้นตอนถัดไปที่เป็นไปได้คือการฝังความสามารถในการประชุมออนไลน์ คุณจึงตัดสินใจใช้ คุณร่วมทีมกับผู้ให้บริการการประชุมทางวิดีโอที่มีอยู่เดิม โดยฝังเว็บแอปเป็น iframe แบบข้ามต้นทาง เว็บแอปการประชุมทางวิดีโอจะบันทึกแท็บปัจจุบันเป็นแทร็กวิดีโอและส่งไปยังผู้เข้าร่วมจากระยะไกล
![ภาพหน้าจอของหน้าต่างเบราว์เซอร์ที่แสดงเว็บแอปซึ่งไฮไลต์พื้นที่เนื้อหาหลักและ iframe แบบข้ามต้นทาง](https://developer.chrome.com/static/docs/web-platform/region-capture/image/screenshot-a-browser-win-c64262eff51c8.png?authuser=5&hl=th)
คงไม่เร็วนัก... ตอนนี้คุณคงไม่อยากส่งวิดีโอของผู้ใช้กลับไปหาพวกเขาใช่ไหม ตัดส่วนนั้นออกไปให้ดีกว่าเดิม แต่เป็นไปได้ไง 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()
ได้ เป็นต้น
การครอบตัด
เมื่อจับภาพแท็บ แทร็กวิดีโอจะสร้างเป็น 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 ดังกล่าวมีชุดข้อกำหนดด้านความปลอดภัยและความเป็นส่วนตัวที่แตกต่างจากการครอบตัดแบบธรรมดา
![รูปภาพผลลัพธ์ที่แตกต่างกันสำหรับการจับภาพภูมิภาคและ API การจับภาพระดับองค์ประกอบ](https://developer.chrome.com/static/docs/web-platform/region-capture/image/picture-different-result-170ed40fb1317.png?authuser=5&hl=th)
ความปลอดภัยและความเป็นส่วนตัว
การจับภาพภูมิภาคช่วยให้เว็บแอปที่สังเกตพิกเซลทั้งหมดในแท็บอยู่แล้ว นำพิกเซลบางส่วนออกได้ตามความสมัครใจ ซึ่งมีความปลอดภัยอย่างรอบคอบเนื่องจากไม่สามารถหาข้อมูลใหม่ได้
การจับภาพภูมิภาคสามารถใช้เพื่อจำกัดข้อมูลที่จะส่งไปยังผู้เข้าร่วมจากระยะไกล เช่น คุณอาจต้องการแชร์สไลด์ แต่ไม่แชร์บันทึกของผู้บรรยาย
![ภาพหน้าจอของหน้าต่างเบราว์เซอร์ที่มีสไลด์และบันทึกของผู้บรรยาย](https://developer.chrome.com/static/docs/web-platform/region-capture/image/screenshot-a-browser-win-7930d88d1831e.png?authuser=5&hl=th)
การแชร์โน้ตจากระยะไกลเป็นการดำเนินการที่ไม่พึงประสงค์อย่างมาก การจับภาพภูมิภาค
โปรดทราบว่าการจับภาพภูมิภาคไม่ได้เพิ่มการรับประกันด้านความปลอดภัยใดๆ ในเครื่อง เมื่อส่งต่อแทร็กไปยังเอกสารอื่น เอกสารที่ได้รับจะยังคงยกเลิกการครอบตัดแทร็กและรับสิทธิ์เข้าถึงพิกเซลทั้งหมดของแท็บที่จับภาพไว้ได้
Chrome วาดเส้นขอบสีน้ำเงินรอบขอบของแท็บที่จับภาพแล้ว เมื่อครอบตัด โดยทั่วไป Chrome จะวาดเส้นขอบสีน้ำเงินรอบเป้าหมายที่ครอบตัด
สาธิต
คุณสามารถเล่นกับการจับภาพภูมิภาคได้โดยเรียกใช้การสาธิตใน Glitch เป็น อย่าลืมดูซอร์สโค้ด
การสนับสนุนเบราว์เซอร์
การรองรับเบราว์เซอร์
- 104
- 104
- x
- x
การจับภาพภูมิภาคใช้งานได้ใน Chrome 104 บนเดสก์ท็อปเท่านั้น
ขั้นตอนถัดไป
ตัวอย่างสิ่งที่จะเกิดขึ้นในอนาคตอันใกล้ซึ่งจะช่วยปรับปรุงการแชร์หน้าจอบนเว็บมีดังนี้
- การจับภาพภูมิภาคจะรองรับการจับภาพของแท็บอื่นๆ
- โฟกัสแบบมีเงื่อนไขจะอนุญาตให้เว็บแอปจับภาพสามารถสั่งให้เบราว์เซอร์เปลี่ยนโฟกัสไปยังพื้นผิวจอแสดงผลที่บันทึกไว้ หรือเพื่อหลีกเลี่ยงการเปลี่ยนโฟกัสดังกล่าว
- อาจมี API การจับภาพระดับองค์ประกอบ
ความคิดเห็น
ทีม Chrome และชุมชนมาตรฐานเว็บต้องการทราบประสบการณ์ของคุณในการใช้งาน Region Capture
บอกให้เราทราบเกี่ยวกับการออกแบบ
มีบางอย่างเกี่ยวกับการจับภาพภูมิภาคที่ไม่ทำงานตามที่คุณคาดหวังหรือไม่ หรือขาดวิธีการหรือคุณสมบัติที่จำเป็นซึ่งจำเป็นต่อการนำไอเดียของคุณไปปฏิบัติ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย
- ยื่นข้อมูลจำเพาะในที่เก็บของ GitHub หรือเพิ่มความเห็นเกี่ยวกับปัญหาที่มีอยู่
หากมีปัญหาในการติดตั้งใช้งาน
คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือการติดตั้งใช้งานแตกต่างจากข้อกําหนดหรือไม่
- รายงานข้อบกพร่องที่ https://new.crbug.com โปรดใส่รายละเอียดให้มากที่สุดเท่าที่ทำได้ และวิธีการง่ายๆ ในการทำให้เนื้อหาเกิดซ้ำ ภาพ Glitch เหมาะสำหรับการแชร์ซ้ำที่ง่ายและรวดเร็ว
แสดงการสนับสนุน
คุณวางแผนที่จะใช้การจับภาพภูมิภาคใช่ไหม การสนับสนุนสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ ทราบว่าการสนับสนุนนั้นสำคัญเพียงใด
ส่งทวีตไปที่ @ChromiumDev และแจ้งให้เราทราบว่าคุณใช้งานที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
กิตติกรรมประกาศ
ขอขอบคุณ Joe Medley ที่อ่านบทความนี้