<usermedia> HTML öğesiyle tanışın

Mari Viana

Minh Le

Yayınlanma tarihi: 29 Haziran 2026

Chrome 144'te <geolocation> öğesinin kullanıma sunulmasının ardından, Capability Elements paketindeki bir sonraki işlevsel kontrol <usermedia> HTML öğesidir. Chrome 151'den itibaren kullanılabilen bu öğe, genel izin isteklerinden kamera ve mikrofon akışlarına erişim için hedeflenmiş ve işlevsel kontrollere geçişin bir sonraki aşamasını işaret ediyor. Komut dosyası tarafından tetiklenen istemlerden uzaklaşarak bildirim temelli ve kullanıcı tarafından etkinleştirilen bir deneyime geçiş yapan <usermedia>, standart kodu azaltır, güvenliği artırır ve daha önce erişimi reddeden kullanıcılar için sorunsuz bir kurtarma yolu sunarak uzun süredir devam eden izin sorununu etkili bir şekilde çözer.

İzin yönetiminden özellik kontrolüne

<usermedia> öğesi, <geolocation> öğesinin başarılı bir şekilde kullanıma sunulmasının ardından Capability Elements paketinde kullanıma sunulan bir sonraki özel kontroldür. PEPC girişimi kapsamında orijinal ve genel <permission> tekliften bu geçiş, tarayıcının farklı donanım özelliklerinin benzersiz karmaşıklıklarını ve davranışlarını daha etkili bir şekilde işlemesini sağlar. İlk teklif esas olarak izin durumlarını (ör. izin ver veya reddet) yönetmeye odaklanırken, Capability Elements veri aracıları olarak işlev görür.

<geolocation> öğesi, sitenize bir konum nesnesi sağlar ve <usermedia>, kamera ve mikrofon erişimiyle ilgili tüm akışı yönetir. Kullanıcı niyetini yakalar, tarayıcı istemini yönetir ve MediaStream nesnesini uygulamaya iletir. Bu değişiklik, ayrı getUserMedia() çağrı yapma ihtiyacını ortadan kaldırır, uygulamayı basitleştirir ve tarayıcının kullanıcının amacı hakkında güvenilir bir sinyale sahip olmasını sağlar.

Kavramın doğrulanması

İlk kaynak denemesinden elde edilen gerçek dünya verileri, bağlam içi ve kullanıcı tarafından başlatılan izin kontrollerinin kullanıcı başarısı oranlarını önemli ölçüde artırdığını gösterdi.

• Cisco, başlangıçta izinleri reddeden kullanıcıların yalnızca yaklaşık %10'unun eski istemleri kullanarak izinleri başarıyla verme olasılığının olduğunu, ancak bu oranın yeni öğeyle birlikte%65'in üzerine çıktığını gözlemledi.
• Zoom, kullanıcıları kurtarma sürecinde yönlendirmek için bu öğeyi kullanarak sistem düzeyindeki engelleyiciler gibi kamera veya mikrofon yakalama hatalarında % 46, 9 oranında düşüş olduğunu bildirdi.
• Google Meet, "mikrofon çalışmıyor" geri bildirimlerinde % 17'lik bir azalma ve başlangıçta erişimi reddeden kullanıcılar için başarılı izin kurtarmada % 131'lik bir artış gördü.

Neden <usermedia> öğesini kullanmalısınız?

<geolocation> tarafından oluşturulan kalıplardan yararlanan <usermedia> öğesi, güçlü özellikler istemeyle ilgili temel zorlukları ele alır. Medya istekleri, genellikle bağlam dışı istemleri tetikleyen zorunlu JavaScript çağrılarına dayanır. Sitenizi yanlışlıkla engellerseniz bu kararı geri almak için tarayıcı ayarlarında derinlemesine gezinmeniz gerekir. Bu da genellikle özelliklerin kullanılmamasına yol açan bir "izin boşluğu"dur.

<usermedia> öğesi, aşağıdakileri sağlayarak bu sorunları çözer:

• Net amaç ve zamanlama: İstek yalnızca tarayıcı kontrollü bir öğeye fiziksel olarak dokunulduktan sonra göründüğünden, güvenilir bir amaç sinyali sağlar. Bu, tarayıcının genellikle komut dosyası tarafından tetiklenen isteklerin başarısız olmasına neden olan otomatik sessiz engellemeleri atlamasına olanak tanır.
• Basitleştirilmiş kurtarma: Erişim daha önce reddedildiyse öğeye dokunulduğunda, karmaşık tarayıcı ayarlarına gitmeden kameranızı veya mikrofonunuzu sayfada anında yeniden etkinleştirmenize olanak tanıyan özel bir kurtarma akışı tetiklenir.
• Doğrudan akış erişimi: Veri aracısı olarak öğe, medya akışını doğrudan kullanıma sunar. Bu, uygulamanızda geri çağırmaları ve hata durumlarını yönetmek için gereken standart kodu azaltır.

Uygulama

Öğenin entegrasyonu, eski JavaScript API'ye kıyasla çok daha az standart kod gerektirir. <geolocation> öğesi tarafından oluşturulan bildirimsel deseni izleyerek HTML'nize <usermedia> etiketini ekleyebilir ve setConstraints() yöntemiyle donanım gereksinimlerini yapılandırabilirsiniz.

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

Temel özellikler ve nitelikler

• stream: Kullanıcı erişimi başarıyla verdikten sonra MediaStream nesnesini bir kez sağlayan salt okunur bir özelliktir.
• setConstraints(): Geliştiricilerin, kullanıcı etkileşiminden önce deviceId veya çözünürlük gibi donanım tercihlerini güncellemelerine olanak tanıyan bir yöntem.
• error: İstek başarısız olursa veya reddedilirse DOMException (ör. NotAllowedError) döndüren salt okunur bir özelliktir.
• onstream: Medya parçaları alındıktan hemen sonra tetiklenen bir etkinlik işleyici.
• onerror: Bir akış alma girişimi başarısız olduğunda tetiklenen bir etkinlik işleyici.
• oncancel: Kullanıcı, edinme sırasında izin istemini iptal ettiğinde veya kapattığında tetiklenen bir etkinlik işleyici.

Stil kısıtlamaları

Kullanıcı güvenini sağlamak ve yanıltıcı tasarım kalıplarını önlemek için <usermedia> öğesi, diğer Capability öğeleriyle aynı katı stil kısıtlamalarını uygular:

• Okunabilirlik: Tarayıcı, metin ve arka plan renklerinin her zaman okunabilir olması için yeterli kontrast (en az 3:1) içerip içermediğini kontrol eder. Öğenin aldatıcı şekilde şeffaf olmasını önlemek için alfa kanalını (opacity) 1 olarak ayarlamanız gerekir.
• Boyutlandırma ve aralık: Tarayıcı, width, height ve font-size için minimum ve maksimum sınırları zorunlu kılar. Öğenin görsel olarak gizlenmesini önlemek için negatif kenar boşluklarını veya ana hat kaymalarını devre dışı bırakır.
• Görsel bütünlük: Tarayıcı, bozulma efektlerini sınırlar. Örneğin, transform yalnızca 2 boyutlu çevirileri ve orantılı ölçeklendirmeyi destekler.
• CSS sözde sınıfları: Öğede, :granted (izin etkinleştirildikten ve yayın alındıktan sonra etkinleşir) gibi duruma dayalı stil oluşturma ve :hover ve :active gibi standart etkileşim durumları desteklenir.

Progresif geliştirme ve taşıma stratejisi

<geolocation> tarafından belirlenen tasarım modelini izleyen <usermedia> öğesi, sorunsuz bir şekilde bozulacak şekilde oluşturulur. Öğeyi desteklemeyen tarayıcılar, öğeyi HTMLUnknownElement olarak değerlendirir ve alt öğelerini oluşturur. Bu sayede tüm kullanıcılar için yedek bir deneyim sağlayabilirsiniz.

Özel yedek kalıp

JavaScript'te <usermedia> öğesi için desteği programatik olarak algılama:

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

Eski getUserMedia() API'sini tetiklemek için <usermedia> öğesinin içine standart bir düğme eklemek üzere bu algılama mantığını kullanın:

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

Origin denemesi katılımcıları için taşıma

Kaynak denemesi sırasında deneysel ve genel <permission> öğesini entegre eden geliştiriciler için <usermedia> öğesine geçişin en az düzeyde olması amaçlanmıştır.

1. Etiket güncellemesi: Önceki <permission> öğelerini hedefleyen tüm seçicilerin bunun yerine <usermedia> öğesini kullanacak şekilde güncellenmesini sağlamak için <permission type="camera microphone"> öğesini <usermedia> ile değiştirin.
2. Özellik algılama: Güncelleme kontrolleri HTMLPermissionElement'den HTMLUserMediaElement'e değiştirildi.

Gelecek yol haritası

<usermedia> öğesi birleştirilmiş ses ve video isteklerini işlerken gelecekteki Capability Elements yol haritasında şunlar yer almaktadır:

• <camera>: Yalnızca video içeren senaryolara odaklanır.
• <microphone>: Yalnızca ses içeren senaryolara odaklanır.

Bu özelliğe özgü öğelerin, geliştiricilerin daha sezgisel ve güvenilir medya deneyimleri oluşturmasına nasıl yardımcı olduğunu görebilirsiniz. Daha fazla bilgi için Capability Elements teknik kılavuzunu inceleyin.

İlgili bağlantılar

• İşlev Öğeleri: <usermedia> öğesi açıklayıcısı
• Özellik
• <geolocation> HTML öğesini kullanıma sunuyoruz