Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

ขอแนะนำองค์ประกอบ HTML <usermedia>

Mari Viana

Minh Le

Published: June 29, 2026

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

จากการจัดการสิทธิ์เป็นการควบคุมความสามารถ

องค์ประกอบ <usermedia> เป็นการควบคุมเฉพาะทางรายการถัดไปที่จะเปิดตัวใน ชุดองค์ประกอบความสามารถ หลังจากที่ <geolocation>เปิดตัวไปแล้วอย่างประสบความสำเร็จ การเปลี่ยนจากข้อเสนอ <permission> เดิมและทั่วไป ซึ่งเป็นส่วนหนึ่งของความคิดริเริ่ม PEPC จะช่วยให้เบราว์เซอร์จัดการความซับซ้อน และลักษณะการทำงานที่ไม่เหมือนใครของความสามารถของฮาร์ดแวร์ต่างๆ ได้อย่างมีประสิทธิภาพมากขึ้น แม้ว่าข้อเสนอเริ่มต้นจะมุ่งเน้นไปที่การจัดการสถานะสิทธิ์เป็นหลัก เช่น อนุญาตเทียบกับปฏิเสธ แต่องค์ประกอบความสามารถจะทำหน้าที่เป็นตัวกลางข้อมูล

องค์ประกอบ <geolocation> จะมอบออบเจ็กต์ตำแหน่งให้กับเว็บไซต์ และ <usermedia> จะจัดการโฟลว์ทั้งหมดสำหรับการเข้าถึงกล้องและไมโครโฟน โดยจะบันทึกความตั้งใจของผู้ใช้ จัดการข้อความแจ้งของเบราว์เซอร์ และส่งออบเจ็กต์ MediaStream ไปยังแอปพลิเคชัน การเปลี่ยนแปลงนี้ช่วยลดความจำเป็นในการเรียก getUserMedia() แยกต่างหาก ทำให้การติดตั้งใช้งานง่ายขึ้น และช่วยให้เบราว์เซอร์มีสัญญาณที่เชื่อถือได้เกี่ยวกับความตั้งใจของผู้ใช้

การตรวจสอบแนวคิด

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

Cisco สังเกตว่าผู้ใช้ที่ปฏิเสธสิทธิ์ในตอนแรกมีแนวโน้มที่จะให้สิทธิ์สำเร็จโดยใช้ข้อความแจ้งเดิมเพียงประมาณ 10% เท่านั้น แต่อัตราดังกล่าวเพิ่มขึ้นเป็นมากกว่า 65% เมื่อใช้องค์ประกอบใหม่
Zoom รายงานว่าข้อผิดพลาดในการบันทึกกล้องหรือไมโครโฟน เช่น ตัวบล็อกระดับระบบ ลดลง 46.9% โดยใช้องค์ประกอบเพื่อแนะนำผู้ใช้ตลอดกระบวนการกู้คืน
Google Meet พบว่าความคิดเห็น "ไมโครโฟนไม่ทำงาน" ลดลง 17% และการกู้คืนสิทธิ์สำเร็จสำหรับผู้ใช้ที่ปฏิเสธการเข้าถึงในตอนแรกเพิ่มขึ้น 131%

เหตุผลที่ควรใช้ `<usermedia>`

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

องค์ประกอบ <usermedia> ช่วยแก้ปัญหาเหล่านี้โดยมีสิ่งต่อไปนี้

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

ฟีเจอร์	`getUserMedia()` JS API	องค์ประกอบ `<usermedia>` ของ HTML
เหตุการณ์ที่ทริกเกอร์ข้อความแจ้งสิทธิ์	การดำเนินการสคริปต์ที่จำเป็น (`getUserMedia`)	ผู้ใช้คลิกองค์ประกอบที่เบราว์เซอร์ควบคุม
บทบาทของเบราว์เซอร์	ตัดสินใจแสดงข้อความแจ้งตามสถานะและการคาดคะเน	ทำหน้าที่เป็นตัวกลางข้อมูล (จัดการความยินยอมและการส่งสตรีม)
ความรับผิดชอบของสถานที่ตั้ง	เรียก JavaScript API ด้วยตนเอง จัดการการเรียกกลับ และจัดการข้อผิดพลาด	ฟังเหตุการณ์ `stream` และเข้าถึงพร็อพเพอร์ตี้ `stream`
เป้าหมายหลัก	การเข้าถึงกล้องและไมโครโฟนขั้นพื้นฐาน	การเข้าถึงสตรีม การจัดการสิทธิ์ และการกู้คืนโดยมีอุปสรรคน้อยลง

การใช้งาน

การผสานรวมองค์ประกอบนี้ต้องใช้โค้ดมาตรฐานน้อยกว่า JavaScript API เดิมอย่างมาก คุณสามารถเพิ่มแท็ก <usermedia> ลงใน HTML และกำหนดค่าข้อกำหนดของฮาร์ดแวร์ด้วยเมธอด setConstraints() ตามรูปแบบการประกาศที่กำหนดโดยองค์ประกอบ <geolocation>

<usermedia id="media-ctrl">
  <button>Enable camera and microphone</button>
</usermedia>

const el = document.getElementById('media-ctrl');

// Specify hardware preferences before user interaction:
el.setConstraints({
    video: { width: 1280, height: 720 },
    audio: { echoCancellation: true }
});

// Handle successful stream acquisition:
el.addEventListener('stream', () => {
  videoPreview.srcObject = el.stream;
});

// Handle stream acquisition failure:
el.addEventListener('error', () => {
  console.error(`Access failed: ${el.error?.name}`);
});

// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
  console.log('Permission prompt was dismissed by the user.');
});

แอตทริบิวต์และพร็อพเพอร์ตี้หลัก

stream: พร็อพเพอร์ตี้แบบอ่านอย่างเดียวที่ให้ออบเจ็กต์ MediaStream เมื่อผู้ใช้ให้สิทธิ์เข้าถึงเรียบร้อยแล้ว
setConstraints(): เมธอดที่ช่วยให้นักพัฒนาซอฟต์แวร์อัปเดตค่ากำหนดของฮาร์ดแวร์ เช่น deviceId หรือความละเอียด ก่อนที่ผู้ใช้จะโต้ตอบ
error: พร็อพเพอร์ตี้แบบอ่านอย่างเดียวที่แสดงผล DOMException (เช่น NotAllowedError) หากคำขอไม่สำเร็จหรือถูกยกเลิก
onstream: ตัวจัดการเหตุการณ์ที่จะเริ่มทำงานทันทีเมื่อได้รับแทร็กสื่อ
onerror: ตัวจัดการเหตุการณ์ที่จะเริ่มทำงานเมื่อการพยายามรับสตรีมไม่สำเร็จ
oncancel: ตัวจัดการเหตุการณ์ที่จะเริ่มทำงานเมื่อผู้ใช้ยกเลิกหรือปิดข้อความแจ้งสิทธิ์ระหว่างการรับ

ข้อจำกัดด้านการจัดรูปแบบ

องค์ประกอบ <usermedia> ใช้ข้อจำกัดด้านการจัดรูปแบบที่เข้มงวดแบบเดียวกับองค์ประกอบความสามารถ อื่นๆ เพื่อรักษาความไว้วางใจจากผู้ใช้และป้องกันรูปแบบการออกแบบที่หลอกลวง

ความชัดเจน: เบราว์เซอร์จะตรวจสอบสีข้อความและสีพื้นหลังเพื่อดูว่ามีความคมชัดเพียงพอ (อย่างน้อย 3:1) หรือไม่ เพื่อให้คำขออ่านได้เสมอ คุณต้องตั้งค่าช่องอัลฟ่า (opacity) เป็น 1 เพื่อป้องกันไม่ให้องค์ประกอบโปร่งใสอย่างหลอกลวง
การปรับขนาดและการเว้นระยะห่าง: เบราว์เซอร์จะบังคับใช้ขอบเขตต่ำสุดและสูงสุดสำหรับ width, height และ font-size และจะปิดใช้ระยะขอบติดลบหรือการชดเชยเส้นขอบเพื่อป้องกันไม่ให้องค์ประกอบถูกบดบัง
ความสมบูรณ์ของภาพ: เบราว์เซอร์จะจำกัดเอฟเฟกต์การบิดเบือน เช่น transform รองรับเฉพาะการแปล 2 มิติและการปรับขนาดตามสัดส่วน
คลาสเทียม CSS: องค์ประกอบนี้รองรับการจัดรูปแบบตามสถานะ เช่น :granted (ซึ่งจะทำงานเมื่อสิทธิ์ใช้งานอยู่และได้รับสตรีม) รวมถึงสถานะการโต้ตอบมาตรฐาน เช่น :hover และ :active

กลยุทธ์การเพิ่มประสิทธิภาพแบบต่อเนื่องและการย้ายข้อมูล

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

รูปแบบการทำงานสำรองที่กำหนดเอง

ตรวจหาการรองรับองค์ประกอบ <usermedia> ใน JavaScript แบบเป็นโปรแกรม

if ('HTMLUserMediaElement' in window) {
  // Use modern <usermedia> element logic
} else {
  // Fallback to legacy getUserMedia() API
}

ใช้ตรรกะการตรวจหานี้เพื่อเพิ่มปุ่มมาตรฐานภายใน<usermedia> องค์ประกอบเพื่อทริกเกอร์getUserMedia() API เดิม:

<usermedia id="stream-handler">
    <button id="fallback-stream-handler">
        Enable Camera and Mic
    </button>
</usermedia>

// Function for handling video/audio streams:
function handleStream (event) {
  /* ... */
}

if ('HTMLUserMediaElement' in window) {
  // In this case, we have <usermedia> element support:
  const streamHandler = document.getElementById('stream-handler');

  streamHandler.addEventListener('stream', event => {
    handleStream(event);
  });
} else {
  // <usermedia> element support is missing, so fall back instead:
  const fallbackStreamHandler = document.getElementById('fallback-stream-handler');

  fallbackStreamHandler.addEventListener('click', event => {
    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
  });
}

การย้ายข้อมูลสำหรับผู้เข้าร่วมการทดลองใช้จากต้นทาง

สำหรับนักพัฒนาซอฟต์แวร์ที่ผสานรวมองค์ประกอบแบบทดลองและทั่วไป<permission> ในระหว่างการทดลองใช้จากต้นทาง การเปลี่ยนไปใช้<usermedia>ได้รับการออกแบบมาให้มีการเปลี่ยนแปลงน้อยที่สุด

การอัปเดตแท็ก: แทนที่ <permission type="camera microphone"> ด้วย <usermedia> เพื่อให้มั่นใจว่าตัวเลือกทั้งหมดที่กำหนดเป้าหมายองค์ประกอบ <permission> ก่อนหน้านี้จะได้รับการอัปเดตให้ใช้องค์ประกอบ <usermedia> แทน
การตรวจหาฟีเจอร์: อัปเดตการตรวจสอบจาก HTMLPermissionElement เป็น HTMLUserMediaElement

แผนงานในอนาคต

แม้ว่าองค์ประกอบ <usermedia> จะจัดการคำขอเสียงและวิดีโอรวมกัน แต่ แผนงานสำหรับองค์ประกอบความสามารถในอนาคตมีดังนี้

<camera>: มุ่งเน้นไปที่สถานการณ์วิดีโอเท่านั้นโดยเฉพาะ
<microphone>: มุ่งเน้นไปที่สถานการณ์เสียงเท่านั้นโดยเฉพาะ

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