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

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

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

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

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

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

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

การจับภาพระดับภูมิภาคจะจับองค์ประกอบต่างๆ ขององค์ประกอบด้วยวิธีนี้ (หรือที่เรียกว่าการปิดกั้นเนื้อหา) ทำให้เกิดปัญหาหลายประการดังนี้

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

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

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

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

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

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

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

// 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 เป็นอินพุต เมื่อแก้ไขสัญญาล่าสุดแล้ว เฟรมต่อๆ มาทั้งหมดจะถูกจำกัด

// 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 แตกต่างจาก Element ตรงที่อนุกรมได้ เช่น ระบบจะส่งต่อไปยังเอกสารอื่นโดยใช้ 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 การแยกโดยตั้งค่าเป็น isolate ได้เพื่อให้เป็นไปตามนี้

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

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

การเปิดใช้งานการบันทึกองค์ประกอบ

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

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

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

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

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

การสาธิต

คุณเล่นกับการบันทึกองค์ประกอบได้โดยเรียกใช้การสาธิตใน Glitch โปรดดูซอร์สโค้ด

ความคิดเห็น

ทีม Chrome และชุมชนมาตรฐานเว็บต้องการทราบข้อมูลเกี่ยวกับประสบการณ์ที่คุณได้รับจากการบันทึกองค์ประกอบ

บอกให้เราทราบเกี่ยวกับการออกแบบ

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

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

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

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

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

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

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

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

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