Memperkenalkan elemen HTML <usermedia>

Mari Viana

Minh Le

Dipublikasikan: 29 Juni 2026

Setelah peluncuran elemen <geolocation> di Chrome 144, kontrol fungsional berikutnya dalam rangkaian Elemen Kemampuan adalah elemen HTML <usermedia>. Tersedia mulai Chrome 151, elemen ini menandai fase transisi berikutnya dari permintaan izin umum ke kontrol yang ditargetkan dan fungsional untuk mengakses streaming kamera dan mikrofon. Dengan beralih dari perintah yang dipicu skrip ke pengalaman deklaratif dan yang diaktifkan pengguna, <usermedia> mengurangi kode boilerplate, meningkatkan keamanan, dan menyediakan jalur pemulihan yang lancar bagi pengguna yang sebelumnya menolak akses, sehingga secara efektif menyelesaikan masalah izin yang sudah lama ada.

Dari pengelolaan izin hingga kontrol kemampuan

Elemen <usermedia> adalah kontrol khusus berikutnya yang diluncurkan di rangkaian Elemen Kemampuan, setelah keberhasilan pengenalan <geolocation>. Transisi dari proposal <permission> asli dan generik—bagian dari inisiatif PEPC—memungkinkan browser menangani kompleksitas dan perilaku unik dari berbagai kemampuan hardware secara lebih efektif. Meskipun proposal awal berfokus terutama pada pengelolaan status izin, seperti izinkan versus tolak, Elemen Kemampuan berfungsi sebagai perantara data.

Elemen <geolocation> menyediakan objek lokasi ke situs Anda, dan <usermedia> mengelola seluruh alur untuk akses kamera dan mikrofon. API ini mencatat niat pengguna, mengelola dialog browser, dan mengirimkan objek MediaStream ke aplikasi. Perubahan ini menghilangkan kebutuhan akan panggilan getUserMedia() terpisah, menyederhanakan penerapan, dan memastikan browser memiliki sinyal tepercaya tentang niat pengguna.

Validasi konsep

Data dunia nyata dari Uji Coba Origin awal menunjukkan bahwa kontrol izin dalam konteks dan yang dimulai pengguna secara signifikan meningkatkan rasio keberhasilan pengguna.

• Cisco mengamati bahwa pengguna yang awalnya menolak izin hanya sekitar 10% yang cenderung berhasil memberikan izin menggunakan dialog lama, tetapi rasio tersebut melonjak menjadi lebih dari 65% dengan elemen baru.
• Zoom melaporkan penurunan 46,9% pada error pengambilan kamera atau mikrofon, seperti pemblokir tingkat sistem, dengan menggunakan elemen untuk memandu pengguna melalui pemulihan;
• Google Meet mengalami penurunan sebesar 17% dalam masukan "mikrofon tidak berfungsi" dan peningkatan sebesar 131% dalam pemulihan izin yang berhasil bagi pengguna yang awalnya menolak akses.

Mengapa menggunakan elemen <usermedia>?

Dengan mengacu pada pola yang ditetapkan oleh <geolocation>, elemen <usermedia> mengatasi tantangan inti dalam meminta kemampuan yang canggih. Permintaan media mengandalkan panggilan JavaScript imperatif yang sering memicu perintah di luar konteks. Jika Anda secara tidak sengaja memblokir situs, untuk membatalkan keputusan tersebut, Anda harus membuka setelan browser secara mendalam, sebuah "lubang izin" yang sering kali menyebabkan fitur ditinggalkan.

Elemen <usermedia> menyelesaikan masalah ini dengan menyediakan hal berikut:

• Maksud dan waktu yang jelas: Karena perintah hanya muncul setelah ketukan fisik pada elemen yang dikontrol browser, perintah ini memberikan sinyal maksud yang tepercaya. Hal ini memungkinkan browser melewati pemblokiran otomatis yang sering menyebabkan permintaan yang dipicu skrip gagal.
• Pemulihan yang disederhanakan: Jika akses sebelumnya ditolak, mengetuk elemen akan memicu alur pemulihan khusus yang memungkinkan Anda mengaktifkan kembali kamera atau mikrofon secara instan di halaman, tanpa membuka setelan browser yang rumit.
• Akses streaming langsung: Sebagai perantara data, elemen ini mengekspos streaming media secara langsung. Hal ini mengurangi kode boilerplate yang diperlukan untuk mengelola callback dan status error di aplikasi Anda.

Fitur	getUserMedia() JS API	Elemen HTML <usermedia>
Peristiwa pemicu untuk dialog izin	Eksekusi skrip imperatif (getUserMedia)	Pengguna mengklik elemen yang dikontrol browser
Peran browser	Memutuskan perintah berdasarkan status dan heuristik	Berfungsi sebagai perantara data (mengelola izin dan pengiriman streaming)
Tanggung jawab situs	Memanggil JavaScript API secara manual, menangani callback, dan mengelola error	Memproses peristiwa stream dan mengakses properti stream
Sasaran inti	Akses dasar kamera dan mikrofon	Akses streaming, pengelolaan izin, dan pemulihan yang lebih lancar

Penerapan

Mengintegrasikan elemen memerlukan boilerplate yang jauh lebih sedikit daripada JavaScript API lama. Dengan mengikuti pola deklaratif yang ditetapkan oleh elemen <geolocation>, Anda dapat menambahkan tag <usermedia> ke HTML dan mengonfigurasi persyaratan hardware dengan metode setConstraints().

Catatan: Dokumen ini mengasumsikan dukungan untuk elemen <usermedia>. Untuk pola penggantian, lihat bagian Pola penggantian kustom nanti dalam dokumen ini.

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

Atribut dan properti utama

• stream: Properti hanya baca yang menyediakan objek MediaStream setelah pengguna berhasil memberikan akses.
• setConstraints(): Metode yang memungkinkan developer memperbarui preferensi hardware, seperti deviceId atau resolusi, sebelum interaksi pengguna.
• error: Properti hanya baca yang menampilkan DOMException (misalnya, NotAllowedError) jika permintaan gagal atau ditutup.
• onstream: Pengendali peristiwa yang langsung diaktifkan setelah trek media diperoleh.
• onerror: Pengendali peristiwa yang diaktifkan saat upaya perolehan streaming gagal.
• oncancel: Handler peristiwa yang diaktifkan saat pengguna membatalkan atau menutup dialog izin selama akuisisi.

Batasan gaya

Untuk memastikan kepercayaan pengguna dan mencegah pola desain yang menipu, elemen <usermedia> menerapkan batasan gaya yang ketat seperti Elemen Kemampuan lainnya:

• Keterbacaan: Browser memeriksa kontras warna teks dan latar belakang yang memadai (minimal 3:1) untuk memastikan permintaan selalu dapat dibaca. Anda harus menetapkan saluran alfa (opacity) ke 1 untuk mencegah elemen menjadi transparan secara menipu.
• Penentuan ukuran dan jarak: Browser menerapkan batas minimum dan maksimum untuk width, height, dan font-size. Tindakan ini menonaktifkan margin negatif atau offset garis batas untuk mencegah elemen tertutup secara visual.
• Integritas visual: Browser membatasi efek distorsi. Misalnya, transform hanya mendukung terjemahan 2D dan penskalaan proporsional.
• Class pseudo CSS: Elemen mendukung penataan gaya berbasis status, seperti :granted (yang aktif setelah izin aktif dan aliran diperoleh), serta status interaksi standar seperti :hover dan :active.

Strategi progressive enhancement dan migrasi

Mengikuti pola desain yang ditetapkan oleh <geolocation>, elemen <usermedia> dibuat agar menurun dengan baik. Browser yang tidak mendukung elemen ini akan memperlakukannya sebagai HTMLUnknownElement dan merender turunannya. Dengan demikian, Anda dapat memberikan pengalaman penggantian untuk semua pengguna.

Pola penggantian kustom

Mendeteksi dukungan untuk elemen <usermedia> secara terprogram di JavaScript:

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

Gunakan logika deteksi ini untuk menambahkan tombol standar di dalam elemen <usermedia> untuk memicu API getUserMedia() lama:

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

Migrasi untuk peserta Uji Coba Origin

Untuk developer yang mengintegrasikan elemen <permission> eksperimental dan generik selama Uji Coba Origin, transisi ke <usermedia> dirancang agar minimal.

1. Pembaruan tag: Ganti <permission type="camera microphone"> dengan <usermedia> untuk memastikan semua pemilih yang menargetkan elemen <permission> sebelumnya diperbarui untuk menggunakan elemen <usermedia> sebagai gantinya.
2. Deteksi fitur: Perbarui pemeriksaan dari HTMLPermissionElement menjadi HTMLUserMediaElement

Rencana ke depan

Meskipun elemen <usermedia> menangani permintaan audio dan video gabungan, peta jalan untuk Elemen Kemampuan mendatang mencakup:

• <camera>: Berfokus secara khusus pada skenario khusus video.
• <microphone>: Berfokus secara khusus pada skenario khusus audio.

Anda dapat melihat bagaimana elemen khusus kemampuan ini membantu developer membangun pengalaman media yang lebih intuitif dan tepercaya. Untuk mengetahui informasi selengkapnya, lihat Panduan teknis Elemen Kemampuan.

Link terkait

• Elemen Kemampuan: Penjelasan elemen <usermedia>
• Spesifikasi
• Memperkenalkan elemen HTML <geolocation>