คุณสามารถใช้ Screen Capture API เพื่อจับภาพทั้งแท็บปัจจุบันได้ Element Capture API ช่วยให้คุณจับภาพและบันทึกองค์ประกอบ HTML ที่เฉพาะเจาะจงได้ โดยจะเปลี่ยนการบันทึกทั้งแท็บเป็นการบันทึกซับทรี DOM ที่เฉพาะเจาะจง โดยบันทึกเฉพาะองค์ประกอบสืบทอดโดยตรงขององค์ประกอบเป้าหมาย กล่าวคือ ระบบครอบตัดและนําเนื้อหาที่บังและเนื้อหาที่บังออก
เหตุใดจึงควรใช้การจับภาพองค์ประกอบ
การพิจารณาข้อกำหนดของแอปพลิเคชันการประชุมทางวิดีโอจะช่วยให้คุณเข้าใจว่าการจับภาพองค์ประกอบมีประโยชน์ในส่วนใด หากคุณมีแอปพลิเคชันการประชุมทางวิดีโอที่ให้คุณฝังแอปพลิเคชันของบุคคลที่สามใน iframe ได้ บางครั้งคุณอาจต้องการจับภาพ iframe นั้นเป็นวิดีโอและส่งไปยังผู้เข้าร่วมจากระยะไกล
![ภาพหน้าจอของการประชุมทางวิดีโอใน Chrome](https://developer.chrome.com/static/docs/web-platform/element-capture/image/1.png?authuser=6&hl=th)
การเรียกใช้ getDisplayMedia()
และให้ผู้ใช้เลือกแท็บปัจจุบันจะเป็นการส่งแท็บปัจจุบันทั้งแท็บ เนื้อหาดังกล่าวมีแนวโน้มที่จะส่งวิดีโอของผู้ใช้กลับไปให้บุคคลเหล่านั้น คุณสามารถครอบตัดภาพนี้ออกได้โดยใช้การจับภาพภูมิภาค
อย่างไรก็ตาม หากผู้นำเสนอมีส่วนร่วมกับแอปพลิเคชันการประชุมทางวิดีโอและมีเนื้อหาบางอย่าง เช่น รายการแบบเลื่อนลง จะต้องวาดทับเนื้อหาที่ต้องการบันทึก
![ภาพหน้าจอของรายการแบบเลื่อนลงซึ่งครอบคลุมเนื้อหาที่ตั้งใจจะจับภาพ](https://developer.chrome.com/static/docs/web-platform/element-capture/image/2.png?authuser=6&hl=th)
การจับภาพภูมิภาคไม่น่าจะช่วยคุณในเรื่องนี้ได้ รายการแบบเลื่อนลงบางส่วนอาจปรากฏในหน้าจอของผู้เข้าร่วมจากระยะไกล
![ภาพหน้าจอของรายการแบบเลื่อนลงที่บันทึกแล้ว](https://developer.chrome.com/static/docs/web-platform/element-capture/image/3.png?authuser=6&hl=th)
การที่ Region Capture จับภาพส่วนต่างๆ ขององค์ประกอบในลักษณะนี้ (ซึ่งเรียกว่าการปิดกั้นเนื้อหา) จะก่อให้เกิดปัญหาหลายประการดังต่อไปนี้
- เนื้อหาที่ซ้อนอยู่อาจกีดขวางการดูเนื้อหาที่ผู้ใช้ต้องการแชร์
- เนื้อหาที่ซ้อนกันอาจเป็นข้อมูลส่วนตัว (เช่น การแจ้งเตือนของแชท)
- การซ้อนทับเนื้อหาอาจทำให้สับสน (ตัวอย่างเช่น การปรับรูปแบบแอปพลิเคชันใหม่อาจทำให้วิดีโอของผู้เข้าร่วมจากระยะไกลทำให้วิดีโอของตนเองหลุดไปยังเป้าหมายที่จับภาพไว้เป็นเวลาสั้นๆ)
Element Capture API จะช่วยแก้ปัญหาเหล่านี้ทั้งหมด โดยให้คุณกำหนดเป้าหมายองค์ประกอบที่คุณต้องการแชร์
![ภาพหน้าจอขององค์ประกอบเป้าหมายที่ไม่มีรายการแบบเลื่อนลงในมุมมอง](https://developer.chrome.com/static/docs/web-platform/element-capture/image/4.png?authuser=6&hl=th)
ฉันจะใช้การจับภาพองค์ประกอบได้อย่างไร
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)
![ภาพหน้าจอของผลลัพธ์ของเป้าหมายการจับภาพแบบโปร่งใสที่ไม่ใช่สี่เหลี่ยมผืนผ้า](https://developer.chrome.com/static/docs/web-platform/element-capture/image/transparency.png?authuser=6&hl=th)
เป้าหมายการจับภาพที่ไม่มีสิทธิ์
คุณเริ่มจำกัดแทร็กให้เข้าถึงเป้าหมายการจับภาพที่ถูกต้องได้เสมอ อย่างไรก็ตาม เฟรมจะไม่ผลิตภายใต้เงื่อนไขบางอย่าง เช่น หากองค์ประกอบหรือระดับบนคือ 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