จับภาพสตรีมวิดีโอจากองค์ประกอบใดก็ได้

François Beaufort

Elad Alon

Screen Capture API ช่วยให้คุณจับภาพทั้งแท็บปัจจุบันได้ Element Capture API ช่วยให้คุณจับภาพและบันทึกองค์ประกอบ HTML ที่เฉพาะเจาะจงได้ ซึ่งจะเปลี่ยนการจับภาพทั้งแท็บเป็นการจับภาพซับต้นไม้ DOM ที่เฉพาะเจาะจง โดยจับภาพเฉพาะรายการที่สืบทอดโดยตรงจากองค์ประกอบเป้าหมาย กล่าวคือ ฟีเจอร์นี้จะครอบตัดและนำทั้งเนื้อหาที่บดบังและถูกบดบังออก

เหตุผลที่ควรใช้การจับองค์ประกอบ

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

Elad ใช้แอปพลิเคชันของบุคคลที่สามในการโทรผ่านวิดีโอคอนเฟอเรนซ์กับ François

การเรียกใช้ getDisplayMedia() และอนุญาตให้ผู้ใช้เลือกแท็บปัจจุบันจะเป็นการส่งแท็บปัจจุบันทั้งหมด เนื้อหาดังกล่าวมีแนวโน้มที่จะส่งวิดีโอของผู้ใช้กลับไปให้บุคคลเหล่านั้น คุณตัดส่วนนี้ออกได้โดยใช้การจับภาพเฉพาะพื้นที่

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

รายการแบบเลื่อนลงจะปรากฏที่ด้านบนของเนื้อหาที่ต้องการจับภาพ

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

รายการแบบเลื่อนลงของ Elad จะปรากฏที่ด้านบนของเนื้อหาที่ François ได้รับ

การที่ Region Capture จับภาพส่วนต่างๆ ขององค์ประกอบในลักษณะนี้ (หรือที่เรียกว่าการปิดกั้นเนื้อหา) จะก่อให้เกิดปัญหาหลายประการดังต่อไปนี้

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

Element Capture API ช่วยแก้ปัญหาเหล่านี้ทั้งหมดโดยให้คุณกําหนดเป้าหมายองค์ประกอบที่ต้องการแชร์

François ไม่เห็นรายการแบบเลื่อนลงจาก Elad

ฉันจะใช้การจับภาพองค์ประกอบได้อย่างไร

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

หาก captureTarget เปลี่ยนขนาด รูปร่าง หรือตำแหน่ง แทร็กวิดีโอจะเปลี่ยนตามไปด้วยโดยไม่จำเป็นต้องมีการป้อนข้อมูลเพิ่มเติมจากเว็บแอปใดแอปหนึ่ง การบดบังเนื้อหาที่ปรากฏ หายไป หรือเคลื่อนไหวไปรอบๆ ก็ไม่จำเป็นต้องมีการจัดการพิเศษเช่นกัน

โปรดตรวจสอบขั้นตอนเหล่านี้อีกครั้ง

เริ่มต้นด้วยการอนุญาตให้ผู้ใช้จับภาพแท็บปัจจุบัน

// Ask the user for permission to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
 preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

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

// Associate captureTarget with a new RestrictionTarget
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

จากนั้นเรียก restrictTo() ในแทร็กวิดีโอโดยใช้ RestrictionTarget เป็นอินพุต เมื่อ Promise สุดท้ายได้รับการแก้ไขแล้ว เฟรมทั้งหมดที่ตามมาจะถูกจํากัด

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

// Enjoy! Transmit remotely.

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

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

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

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

ดึงข้อมูล RestrictionTarget

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

const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

ออบเจ็กต์ RestrictionTarget จัดเรียงได้ ซึ่งแตกต่างจากองค์ประกอบ เช่น คุณสามารถส่งไปยังเอกสารอื่นได้โดยใช้ Window.postMessage()

จำกัด

เมื่อบันทึกแท็บ แทร็กวิดีโอจะแสดง restrictTo() เมื่อจับภาพแท็บปัจจุบัน จะเรียกใช้ restrictTo() ด้วย null หรือ RestrictionTarget ใดๆ ที่ได้มาจากองค์ประกอบภายในแท็บปัจจุบันได้

การเรียกใช้ restrictTo(restrictionTarget) จะเปลี่ยนแทร็กวิดีโอเป็นการจับภาพ captureTarget ราวกับว่ามีการวาดขึ้นมาเองโดยแยกจาก DOM ที่เหลือ องค์ประกอบสืบทอดของ captureTarget ก็จะถูกจับภาพด้วย พี่น้องของ captureTarget จะถูกลบออกจากการจับภาพ ผลที่ได้คือเฟรมที่ส่งในแทร็กจะปรากฏราวกับว่าถูกครอบตัดตามรูปทรงของ captureTarget และระบบจะนำเนื้อหาที่บดบังและถูกบดบังออก

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

การเรียกใช้ restrictTo(null) จะเปลี่ยนแทร็กกลับเป็นสถานะเดิม

// Stop restricting.
await track.restrictTo(null);

หากการเรียก restrictTo() สำเร็จ ระบบจะแก้ไข Promise ที่แสดงผลเมื่อรับประกันได้ว่าเฟรมวิดีโอทั้งหมดที่ตามมาจะถูกจำกัดไว้ที่ captureTarget

หากไม่สำเร็จ ระบบจะปฏิเสธ Promise การเรียกใช้ restrictTo() ไม่สำเร็จอาจเกิดจากสาเหตุข้อใดข้อหนึ่งต่อไปนี้

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

ข้อควรพิจารณาเกี่ยวกับการจับภาพด้วยตนเอง

เมื่อแอปเรียก getDisplayMedia() และผู้ใช้เลือกจับภาพแท็บของแอปเอง เราจะเรียกการดำเนินการนี้ว่า "การจับภาพด้วยตนเอง"

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

ความโปร่งใส

เฟรมวิดีโอที่แอปได้รับผ่าน getDisplayMedia() จะไม่มีช่องอัลฟ่า หากแอปตั้งค่าเป้าหมายการจับภาพแบบโปร่งแสงบางส่วน การแยกช่องอัลฟ่าอาจก่อให้เกิดผลลัพธ์บางอย่างดังนี้

• สีอาจเปลี่ยนแปลง องค์ประกอบเป้าหมายที่มีความโปร่งใสบางส่วนซึ่งวาดบนพื้นหลังสีอ่อนอาจดูเข้มขึ้นเมื่อนำแชแนลอัลฟ่าออก และองค์ประกอบที่วาดบนพื้นหลังสีเข้มอาจดูอ่อนลง
• สีที่ผู้ใช้มองไม่เห็นหรือมองไม่ออกเมื่อตั้งค่าแชแนลอัลฟาเป็นค่าสูงสุดจะปรากฏขึ้นเมื่อนำแชแนลอัลฟาออก ตัวอย่างเช่น การดำเนินการนี้อาจทําให้เฟรมที่จับภาพมีบริเวณสีดําที่ไม่คาดคิด หากส่วนที่เป็นพื้นโปร่งใสมีรหัส RGBA rgba(0, 0, 0, 0)

สตรีมวิดีโอเป้าหมายการจับภาพแบบโปร่งใสที่ไม่ใช่สี่เหลี่ยมผืนผ้า (ขวา) คือสี่เหลี่ยมผืนผ้าพื้นหลังสีดําที่มีวงกลมสีน้ําเงินทึบ

เป้าหมายการบันทึกที่ไม่มีสิทธิ์

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

สิ่งสําคัญอย่างหนึ่งที่ควรพิจารณาเพื่อให้แน่ใจว่าองค์ประกอบมีสิทธิ์ได้รับการจํากัดคือองค์ประกอบต้องสร้างบริบทการซ้อนของตนเอง คุณสามารถระบุพร็อพเพอร์ตี้ CSS isolation เพื่อตรวจสอบว่าเป็นไปตามข้อกำหนดนี้ โดยตั้งค่าเป็น isolate

<div id="captureTarget" style="isolation: isolate;"></iframe>

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

การเปิดใช้การจับภาพองค์ประกอบ

Element Capture API พร้อมใช้งานใน Chrome บนเดสก์ท็อปหลัง Flag Element Capture และเปิดใช้ได้ที่ chrome://flags/#element-capture

ฟีเจอร์นี้ยังเข้าสู่ช่วงทดลองใช้ต้นทางจาก Chrome 121 บนเดสก์ท็อปด้วย ซึ่งช่วยให้นักพัฒนาแอปเปิดใช้ฟีเจอร์นี้ให้ผู้เข้าชมเว็บไซต์ของตนเพื่อรวบรวมข้อมูลจากผู้ใช้จริงได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับช่วงทดลองใช้ต้นทางได้ที่เริ่มต้นใช้งานช่วงทดลองใช้ต้นทาง

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

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

เบราว์เซอร์ Chrome จะวาดเส้นขอบสีน้ำเงินรอบขอบของแท็บที่บันทึกไว้

สาธิต

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

ความคิดเห็น

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

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

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

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

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

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

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

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

• ข้อกำหนด
• คำอธิบาย
• ความตั้งใจที่จะทดสอบ
• รายการ ChromeStatus.com

บริการรับรองคำให้การ

รูปภาพโดย Paul Skorupskas ใน Unsplash