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

François Beaufort
François Beaufort
GitHub
Elad Alon

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

เหตุใดจึงควรใช้การจับภาพองค์ประกอบ

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

วันที่ ภาพหน้าจอของการประชุมทางวิดีโอใน Chrome
Elad ใช้แอปพลิเคชันของบุคคลที่สามในการประชุมทางวิดีโอกับ François

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

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

วันที่ ภาพหน้าจอของรายการแบบเลื่อนลงซึ่งครอบคลุมเนื้อหาที่ตั้งใจจะจับภาพ
รายการแบบเลื่อนลงจะแสดงด้านบนของเนื้อหาที่มีไว้เพื่อรวบรวมข้อมูล

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

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

// 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() สำเร็จ ระบบจะแก้ไข "คำสัญญา" ที่ส่งกลับมาเมื่อรับประกันได้ว่าเฟรมของวิดีโอที่ตามมาทั้งหมดจะจำกัดอยู่ที่ captureTarget

หากไม่สำเร็จ คำสัญญาจะถูกปฏิเสธ การโทรหา restrictTo() ไม่สำเร็จเนื่องจากเหตุผลข้อใดข้อหนึ่งต่อไปนี้

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

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

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

เมธอด restrictTo() จะแสดงในแทร็กวิดีโอจับภาพแท็บ ไม่ใช่เพียงสำหรับการจับภาพด้วยตัวเองเท่านั้น แต่ขณะนี้เปิดการจับภาพองค์ประกอบได้สำหรับการจับภาพด้วยตนเองเท่านั้น ดังนั้น ขอแนะนำให้ตรวจสอบว่าผู้ใช้เลือกแท็บปัจจุบันหรือไม่ ก่อนที่จะพยายามจำกัดแทร็ก ซึ่งทำได้โดยใช้ Capture Handle หรืออาจขอให้เบราว์เซอร์กระตุ้นผู้ใช้ให้จับภาพตัวเองโดยใช้ 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 บนเดสก์ท็อปโดยมีแฟล็ก Element Capture อยู่และเปิดใช้ได้ที่ chrome://flags/#element-capture

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

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

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

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

สาธิต

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

ความคิดเห็น

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

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

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

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

หากมีปัญหาในการติดตั้งใช้งาน

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

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

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

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