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

François Beaufort

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

หน้าต่างภาพซ้อนภาพเปิดและปิดโดยอัตโนมัติเมื่อผู้ใช้เปลี่ยนแท็บ

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

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

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

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

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

การตั้งค่าการแสดงภาพซ้อนภาพอัตโนมัติในแผงข้อมูลเว็บไซต์ของเบราว์เซอร์ Chrome

เมื่อเว็บแอปมีสิทธิ์ ฟังก์ชัน Callback ของตัวแฮนเดิลเซสชันสื่อสำหรับการดำเนินการ "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 ด้วย

การควบคุมสื่อในเบราว์เซอร์ 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 สำหรับรีวิว