Giới thiệu phần tử HTML <usermedia>

Mari Viana

Minh Le

Ngày xuất bản: 29 tháng 6 năm 2026

Sau khi ra mắt phần tử <geolocation> trong Chrome 144, phần tử điều khiển chức năng tiếp theo trong bộ phần tử khả năng là phần tử HTML <usermedia>. Có trong Chrome 151, phần tử này đánh dấu giai đoạn tiếp theo của quá trình chuyển đổi từ các yêu cầu cấp quyền chung sang các phần tử điều khiển có chức năng và được nhắm mục tiêu để truy cập vào luồng camera và micrô. Bằng cách chuyển từ lời nhắc do tập lệnh kích hoạt sang trải nghiệm khai báo và do người dùng kích hoạt, <usermedia> giúp giảm mã nguyên mẫu, cải thiện tính bảo mật và cung cấp đường dẫn khôi phục liền mạch cho những người dùng đã từ chối quyền truy cập trước đó, giải quyết hiệu quả vấn đề về quyền đã tồn tại từ lâu.

Từ quản lý quyền đến kiểm soát chức năng

Phần tử <usermedia> là phần tử điều khiển chuyên biệt tiếp theo sẽ ra mắt trong bộ phần tử chức năng, sau khi phần tử <geolocation> được giới thiệu thành công. Quá trình chuyển đổi này từ đề xuất <permission> ban đầu và chung (một phần của sáng kiến PEPC) cho phép trình duyệt xử lý hiệu quả hơn các hành vi và độ phức tạp riêng biệt của các chức năng phần cứng khác nhau. Mặc dù đề xuất ban đầu chủ yếu tập trung vào việc quản lý các trạng thái quyền (chẳng hạn như cho phép so với từ chối), nhưng các phần tử khả năng hoạt động như các trung gian dữ liệu.

Phần tử <geolocation> cung cấp đối tượng vị trí cho trang web của bạn và <usermedia> quản lý toàn bộ quy trình truy cập vào camera và micrô. Phần tử này ghi lại ý định của người dùng, quản lý lời nhắc của trình duyệt và gửi đối tượng MediaStream đến ứng dụng. Sự thay đổi này giúp bạn không cần phải gọi riêng getUserMedia(), đơn giản hoá quá trình triển khai và đảm bảo trình duyệt có tín hiệu đáng tin cậy về ý định của người dùng.

Xác thực khái niệm

Dữ liệu thực tế từ Bản dùng thử theo nguyên gốc ban đầu cho thấy rằng các phần tử điều khiển quyền trong ngữ cảnh và do người dùng khởi tạo giúp cải thiện đáng kể tỷ lệ thành công của người dùng.

• Cisco nhận thấy rằng những người dùng ban đầu từ chối quyền chỉ có khoảng 10% khả năng cấp quyền thành công bằng lời nhắc cũ, nhưng tỷ lệ đó đã tăng lên hơn 65% với phần tử mới.
• Zoom báo cáo mức giảm 46,9% về lỗi thu thập dữ liệu camera hoặc micrô (chẳng hạn như trình chặn ở cấp hệ thống) bằng cách sử dụng phần tử này để hướng dẫn người dùng khôi phục;
• Google Meet ghi nhận mức giảm 17% về ý kiến phản hồi "micrô không hoạt động" và mức tăng 131% về việc khôi phục quyền thành công cho những người dùng ban đầu đã từ chối quyền truy cập.

Tại sao nên sử dụng phần tử <usermedia>?

Dựa trên các mẫu do <geolocation> thiết lập, phần tử <usermedia> giải quyết các thách thức cốt lõi của việc yêu cầu các chức năng mạnh mẽ. Các yêu cầu về nội dung đa phương tiện dựa vào các lệnh gọi JavaScript bắt buộc thường kích hoạt lời nhắc ngoài ngữ cảnh. Nếu vô tình chặn trang web của mình, bạn phải đi sâu vào phần cài đặt trình duyệt để đảo ngược quyết định đó. Đây là một "lỗ hổng về quyền" thường dẫn đến các tính năng bị bỏ qua.

Phần tử <usermedia> giải quyết những vấn đề này bằng cách cung cấp những điều sau:

• Ý định và thời gian rõ ràng: Vì lời nhắc chỉ xuất hiện sau khi bạn nhấn vào một phần tử do trình duyệt kiểm soát, nên lời nhắc này cung cấp tín hiệu đáng tin cậy về ý định. Điều này cho phép trình duyệt bỏ qua các khối tự động ở chế độ im lặng thường khiến các yêu cầu do tập lệnh kích hoạt thông thường không thành công.
• Quy trình khôi phục đơn giản: Nếu trước đó bạn đã từ chối quyền truy cập, thì việc nhấn vào phần tử này sẽ kích hoạt quy trình khôi phục chuyên biệt cho phép bạn bật lại camera hoặc micrô ngay lập tức trên trang mà không cần phải điều hướng các chế độ cài đặt của trình duyệt.
• Quyền truy cập trực tiếp vào luồng: Với vai trò là trung gian dữ liệu, phần tử này sẽ hiển thị trực tiếp luồng nội dung đa phương tiện. Điều này giúp giảm mã nguyên mẫu cần thiết để quản lý lệnh gọi lại và trạng thái lỗi trong ứng dụng của bạn.

Triển khai

Việc tích hợp phần tử này đòi hỏi ít mã nguyên mẫu hơn đáng kể so với API JavaScript cũ. Theo mẫu khai báo do phần tử <geolocation> thiết lập, bạn có thể thêm thẻ <usermedia> vào HTML và định cấu hình các yêu cầu về phần cứng bằng phương thức setConstraints().

<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.');
});

Thuộc tính và đặc điểm chính

• stream: Thuộc tính chỉ đọc cung cấp đối tượng MediaStream sau khi người dùng cấp quyền thành công.
• setConstraints(): Phương thức cho phép nhà phát triển cập nhật các lựa chọn ưu tiên về phần cứng (chẳng hạn như deviceId hoặc độ phân giải) trước khi có lượt tương tác của người dùng.
• error: Thuộc tính chỉ đọc trả về DOMException (ví dụ: NotAllowedError) nếu yêu cầu không thành công hoặc bị loại bỏ.
• onstream: Trình xử lý sự kiện sẽ kích hoạt ngay sau khi thu thập được các bản nhạc đa phương tiện.
• onerror: Trình xử lý sự kiện sẽ kích hoạt khi quá trình thu thập luồng không thành công.
• oncancel: Trình xử lý sự kiện sẽ kích hoạt khi người dùng huỷ hoặc loại bỏ lời nhắc cấp quyền trong quá trình thu thập.

Giới hạn về kiểu

Để đảm bảo người dùng tin tưởng và ngăn chặn các mẫu thiết kế lừa đảo, phần tử <usermedia> áp dụng các giới hạn nghiêm ngặt về kiểu giống như các phần tử chức năng khác:

• Tính dễ đọc: Trình duyệt kiểm tra văn bản và màu nền để đảm bảo độ tương phản đủ (ít nhất là 3:1) nhằm đảm bảo yêu cầu luôn dễ đọc. Bạn phải đặt kênh alpha (opacity) thành 1 để ngăn phần tử này trong suốt một cách lừa đảo.
• Kích thước và khoảng cách: Trình duyệt thực thi các giới hạn tối thiểu và tối đa cho width, height và font-size. Trình duyệt này sẽ tắt các lề âm hoặc độ lệch đường viền để ngăn phần tử này bị che khuất về mặt hình ảnh.
• Tính toàn vẹn về hình ảnh: Trình duyệt giới hạn các hiệu ứng làm biến dạng. Ví dụ: transform chỉ hỗ trợ các bản dịch 2D và tỷ lệ tương ứng.
• Lớp giả CSS: Phần tử này hỗ trợ kiểu dựa trên trạng thái, chẳng hạn như :granted (kích hoạt khi quyền đang hoạt động và luồng được thu thập), cũng như các trạng thái tương tác tiêu chuẩn như :hover và :active.

Chiến lược cải tiến tăng dần và di chuyển

Theo mẫu thiết kế do <geolocation> thiết lập, phần tử <usermedia> được xây dựng để hạ cấp từng bước. Các trình duyệt không hỗ trợ phần tử này sẽ coi phần tử này là HTMLUnknownElement và hiển thị các phần tử con của phần tử này. Điều này cho phép bạn cung cấp trải nghiệm dự phòng cho tất cả người dùng.

Mẫu dự phòng tuỳ chỉnh

Phát hiện theo phương thức lập trình khả năng hỗ trợ phần tử <usermedia> trong JavaScript:

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

Sử dụng logic phát hiện này để thêm nút tiêu chuẩn bên trong phần tử <usermedia> nhằm kích hoạt API getUserMedia() cũ:

<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);
  });
}

Di chuyển cho người tham gia Bản dùng thử theo nguyên gốc

Đối với những nhà phát triển đã tích hợp phần tử thử nghiệm và chung <permission> trong Bản dùng thử theo nguyên gốc, quá trình chuyển đổi sang <usermedia> được thiết kế để ở mức tối thiểu.

1. Cập nhật thẻ: Thay thế <permission type="camera microphone"> bằng <usermedia> để đảm bảo rằng tất cả bộ chọn nhắm mục tiêu đến các phần tử <permission> trước đó đều được cập nhật để sử dụng phần tử <usermedia> thay thế.
2. Phát hiện tính năng: Cập nhật các lượt kiểm tra từ HTMLPermissionElement thành HTMLUserMediaElement

Lộ trình sắp tới

Mặc dù phần tử <usermedia> xử lý các yêu cầu kết hợp về âm thanh và video, nhưng lộ trình cho các phần tử khả năng trong tương lai bao gồm:

• <camera>: Chỉ tập trung vào các trường hợp chỉ có video.
• <microphone>: Chỉ tập trung vào các trường hợp chỉ có âm thanh.

Bạn có thể xem cách các phần tử dành riêng cho chức năng này giúp nhà phát triển xây dựng trải nghiệm đa phương tiện trực quan và đáng tin cậy hơn. Để biết thêm thông tin, hãy xem hướng dẫn kỹ thuật về các phần tử chức năng.

Đường liên kết có liên quan

• Các phần tử chức năng: <usermedia> Giải thích về phần tử
• Quy cách
• Giới thiệu phần tử HTML <geolocation>