การแสดงภาพซ้อนภาพอัตโนมัติสำหรับเว็บแอป

François Beaufort

การเปิดตัว Document Picture-in-Picture API เมื่อเร็วๆ นี้ (และแม้แต่ก่อนหน้านี้) ทำให้นักพัฒนาเว็บสนใจที่จะเปิดหน้าต่างภาพซ้อนภาพโดยอัตโนมัติเมื่อผู้ใช้เปลี่ยนโฟกัสจากแท็บปัจจุบันมากขึ้น ซึ่งจะมีประโยชน์อย่างยิ่งสำหรับเว็บแอปการประชุมทางวิดีโอ เนื่องจากช่วยให้ผู้นำเสนอเห็นและโต้ตอบกับผู้เข้าร่วมแบบเรียลไทม์ขณะนำเสนอเอกสารหรือใช้แท็บหรือหน้าต่างอื่นๆ

เข้าสู่การแสดงภาพซ้อนภาพโดยอัตโนมัติ

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

• มีการลงทะเบียนตัวแฮนเดิลการดำเนินการของเซสชันสื่อสําหรับการดําเนินการ "enterpictureinpicture"

• มีการจับภาพจากกล้องหรือไมโครโฟนผ่าน getUserMedia

• ผู้ใช้อนุญาต "การแสดงภาพซ้อนภาพอัตโนมัติ" ผ่านการตั้งค่าเบราว์เซอร์ที่เปิดใช้โดยค่าเริ่มต้น

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

นักพัฒนาเว็บสามารถใช้ Picture-in-Picture API สำหรับ <video> เพื่อเปิดหน้าต่างภาพซ้อนภาพจากองค์ประกอบ <video> ของ HTML หรือ Document Picture-in-Picture API เพื่อเปิดหน้าต่างที่แสดงอยู่ด้านบนเสมอเพื่อแสดงเนื้อหา HTML ที่กำหนดเอง หน้าต่างภาพซ้อนภาพจะไม่ได้รับการโฟกัสเมื่อเปิดขึ้น และจะปิดโดยอัตโนมัติเมื่อหน้าเว็บปรากฏขึ้นอีกครั้ง

ตัวอย่างต่อไปนี้แสดงวิธีขอสิทธิ์เข้าถึงกล้องของผู้ใช้ จากนั้นลงทะเบียนตัวแฮนเดิลการดำเนินการของเซสชันสื่อสําหรับการดําเนินการ "enterpictureinpicture" อย่างปลอดภัยด้วยฟังก์ชันการเรียกกลับที่เปิดหน้าต่างภาพซ้อนภาพ หน้าต่างนี้มีสตรีมวิดีโอจากกล้องของผู้ใช้ที่มี Picture-in-Picture API สำหรับ <video>

const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
  video.srcObject = stream;
});

try {
  // Request video to automatically enter picture-in-picture when eligible.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
    video.requestPictureInPicture();
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

ลองใช้ตัวอย่างเซสชันสื่อการประชุมทางวิดีโอ

เข้าสู่โหมดภาพซ้อนภาพจากการควบคุมสื่อของเบราว์เซอร์

นอกจากนี้ การดำเนินการของเซสชันสื่อ "enterpictureinpicture" ยังมีประโยชน์เมื่อผู้ใช้ต้องการเข้าสู่โหมดภาพซ้อนภาพโดยใช้ตัวควบคุมสื่อใน UI ของเบราว์เซอร์ Chrome ด้วย

เมื่อไม่มีองค์ประกอบ HTML <video> ที่เล่นอยู่ แต่มีเฉพาะเสียง การลงทะเบียนตัวแฮนเดิลการดำเนินการของเซสชันสื่อสำหรับ "enterpictureinpicture" จะบอกเบราว์เซอร์ว่าเว็บแอปทราบวิธีจัดการและจะดูแลการเปิดหน้าต่างภาพในภาพเอง

นอกจากนี้ ยังมีประโยชน์เมื่อเว็บแอปต้องการใช้ Document Picture-in-Picture API เพื่อเปิดหน้าต่างภาพในภาพแทนที่จะให้เบราว์เซอร์จัดการด้วย Picture-in-Picture API สำหรับ <video>

ตัวอย่างต่อไปนี้แสดงวิธีลงทะเบียนตัวแฮนเดิลการดำเนินการของเซสชันสื่ออย่างปลอดภัยสําหรับการดําเนินการ "enterpictureinpicture" ฟังก์ชันการเรียกกลับจะเปิดหน้าต่างภาพซ้อนภาพด้วย Document Picture-in-Picture API เมื่อผู้ใช้เข้าสู่โหมดภาพซ้อนภาพโดยใช้ตัวควบคุมสื่อใน UI ของเบราว์เซอร์ Chrome

try {
  // Use the Document Picture-in-Picture API when entering
  // picture-in-picture from browser media control.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
    const pipWindow = await documentPictureInPicture.requestWindow();
    // Populate HTML content and handle closing window...
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

ลองใช้การสาธิตโปรแกรมเล่น VideoJS สำหรับ Document Picture-in-Picture API หรือตัวอย่างเซสชันสื่อวิดีโอ

มีส่วนร่วมและแชร์ความคิดเห็น

หากมีความคิดเห็นหรือพบปัญหาใดๆ โปรดแชร์กับเราที่ crbug.com

แหล่งข้อมูล

• การเปลี่ยนแปลงข้อมูลจำเพาะ
• รายการ ChromeStatus
• Intent to Ship

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

ขอขอบคุณ Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato และ Rachel Andrew สำหรับรีวิว