Kamera kaydırma, yatırma ve yakınlaştırmayı denetleyin

Kameralardaki kaydırma, eğme ve yakınlaştırma özellikleri artık web'de kontrol edilebilir.

François Beaufort

Oda ölçekli video konferans çözümleri, yazılımın kamerayı toplantı katılımcılarına doğrultabilmesi için kaydırma, eğme ve yakınlaştırma (PTZ) özelliklerine sahip kameralar kullanır. Chrome 87'den itibaren, kameralardaki kaydırma, eğme ve yakınlaştırma özellikleri MediaDevices.getUserMedia() ve MediaStreamTrack.applyConstraints()'te medya parçası kısıtlamaları kullanan web siteleri tarafından kullanılabilir.

API'yi kullanma

Özellik algılama

Donanım için özellik algılama, muhtemelen alıştığınızdan farklıdır. navigator.mediaDevices.getSupportedConstraints() içinde "pan", "tilt" ve "zoom" kısıtlama adlarının bulunması, tarayıcının kamera PTZ'sini kontrol etmek için API'yi desteklediğini gösterir ancak kamera donanımının destekleyip desteklemediğini göstermez. Chrome 87'den itibaren, kamera PTZ'sinin masaüstünde kontrol edilmesi desteklenirken Android'de hâlâ yalnızca yakınlaştırma desteklenmektedir.

const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

Kamera PTZ erişimi isteğinde bulunma

Bir web sitesinin kamera PTZ'sini kontrol etmesine yalnızca kullanıcı bir istem aracılığıyla kameraya açıkça PTZ izni vermişse izin verilir.

Kamera PTZ erişimi isteğinde bulunmak için aşağıda gösterilen PTZ kısıtlamalarıyla navigator.mediaDevices.getUserMedia()'ü arayın. Bu işlem, kullanıcıdan hem normal kameraya hem de PTZ kameraya izin vermesini ister.

Kamera PTZ kullanıcı istemi.

Döndürülen söz, kamera video akışını kullanıcıya göstermek için kullanılan bir MediaStream nesnesi ile çözülür. Kamera PTZ'yi desteklemiyorsa kullanıcıya normal kamera istemi gösterilir.

try {
  // User is prompted to grant both camera and PTZ access in a single call.
  // If camera doesn't support PTZ, it falls back to a regular camera prompt.
  const stream = await navigator.mediaDevices.getUserMedia({
    // Website asks to control camera PTZ as well without altering the
    // current pan, tilt, and zoom settings.
    video: { pan: true, tilt: true, zoom: true }
  });

  // Show camera video stream to user.
  document.querySelector("video").srcObject = stream;
} catch (error) {
  // User denies prompt or matching media is not available.
  console.log(error);
}

Daha önce verilmiş kamera izinleri (özellikle PTZ erişimi olmayanlar) kullanıma sunulursa otomatik olarak PTZ erişimi elde etmez. Bu durum, kameranın kendisi PTZ'yi desteklese bile geçerlidir. İzin tekrar istenmelidir. Neyse ki PTZ izninin durumunu sorgulamak ve izlemek için Permissions API'yi kullanabilirsiniz.

try {
  const panTiltZoomPermissionStatus = await navigator.permissions.query({
    name: "camera",
    panTiltZoom: true
  });

  if (panTiltZoomPermissionStatus.state == "granted") {
    // User has granted access to the website to control camera PTZ.
  }

  panTiltZoomPermissionStatus.addEventListener("change", () => {
    // User has changed PTZ permission status.
  });
} catch (error) {
  console.log(error);
}

Chromium tabanlı bir tarayıcının kamera için PTZ'yi destekleyip desteklemediğini öğrenmek istiyorsanız dahili about://media-internals sayfasına gidip "Video Yakalama" sekmesindeki "Yukarı-Aşağı-Yakınlaştırma" sütununu kontrol edin. "Yukarı-aşağı" ve "yakınlaştırma", kameranın sırasıyla "Yukarı-Aşağı (Mutlak)" ve "Yakınlaştırma (Mutlak)" UVC kontrollerini desteklediği anlamına gelir. "Paneğe (Göreli)" ve "Yakınlaştırma (Göreli)" UVC kontrolleri Chromium tabanlı tarayıcılarda desteklenmez.

PTZ kamera desteğiyle ilgili hataları ayıklamak için dahili sayfa.

Kamera PTZ'sini kontrol etme

Daha önce elde edilen stream nesnesinden MediaStreamTrack önizlemesini kullanarak kameranın PTZ özelliklerini ve ayarlarını değiştirin. MediaStreamTrack.getCapabilities(), desteklenen özellikleri ve aralıkları ya da izin verilen değerleri içeren bir sözlük döndürür. Buna karşılık, MediaStreamTrack.getSettings() mevcut ayarları döndürür.

Kaydırma, eğme ve yakınlaştırma özellikleri ve ayarları yalnızca kamera tarafından destekleniyorsa ve kullanıcı kameraya PTZ izni verdiyse kullanılabilir.

Kamera PTZ'sini kontrol etme.

Aşağıdaki örnekte gösterildiği gibi kameranın kaydırma, yatırma ve yakınlaştırma işlemlerini kontrol etmek için uygun PTZ gelişmiş kısıtlamalarını kullanarak videoTrack.applyConstraints() işlevini çağırın. Başarılı olursa döndürülen söz çözülür. Aksi takdirde aşağıdaki durumlarda reddedilir:

• PTZ izni olan kameraya izin verilmez.
• Kamera donanımı PTZ kısıtlamasını desteklemiyor.
• Sayfa, kullanıcı tarafından görülemez. Sayfa görünürlüğü değişikliklerini algılamak için Sayfa Görünürlüğü API'sini kullanın.

// Get video track capabilities and settings.
const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();

// Let the user control the camera pan motion if the camera supports it
// and PTZ access is granted.
if ("pan" in settings) {
  const input = document.querySelector("input[type=range]");
  input.min = capabilities.pan.min;
  input.max = capabilities.pan.max;
  input.step = capabilities.pan.step;
  input.value = settings.pan;

  input.addEventListener("input", async () => {
    await videoTrack.applyConstraints({ advanced: [{ pan: input.value }] });
  });
}

if ("tilt" in settings) {
  // similar for tilt...
}
if ("zoom" in settings) {
  // similar for zoom...
}

Bazı kamera PTZ ideal kısıtlama değerleriyle navigator.mediaDevices.getUserMedia() çağrısı yaparak kamera kaydırma, yatırma ve yakınlaştırma ayarlarını da yapılandırabilirsiniz. Bu özellik, kameranın PTZ özellikleri önceden bilindiğinde kullanışlıdır. Burada zorunlu kısıtlamalara (min, max, exact) izin verilmediğini unutmayın.

const stream = await navigator.mediaDevices.getUserMedia({
  // Website asks to reset known camera pan.
  video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});

Çocuk parkı

Glitch'te demo'yu çalıştırarak API ile oynayabilirsiniz. Kaynak koduna göz atmayı unutmayın.

İpucu: PTZ'yi destekleyen bir kameranız yoksa makinenizde PTZ'yi taklit etmek için Chrome'u anahtarla çalıştırabilirsiniz --use-fake-device-for-media-stream. Keyfini çıkarın.

Güvenlikle İlgili Dikkat Edilmesi Gereken Noktalar

Spesifikasyon yazarları bu API'yi kullanıcı denetimi, şeffaflık ve ergonomi gibi temel özellikleri kullanarak tasarlayıp uyguladılar. Bu API'nin kullanılabilmesi öncelikle Media Capture and Streams API ile aynı izin modeliyle sınırlandırılmıştır. Web sitesinin, kullanıcı istemlerine yanıt olarak kamera PTZ'sini kontrol etmesine yalnızca sayfa kullanıcı tarafından görülebiliyorsa izin verilir.

Tarayıcı uyumluluğu

MediaStream API

Tarayıcı desteği

• 55
• 12
• 15
• 11

Kaynak

Permissions API

Tarayıcı desteği

• 43
• 79
• 46
• 16

Kaynak

Page Visibility API

Tarayıcı desteği

• 33
• 12
• 18
• 7

Kaynak

MediaDevices.getUserMedia()

Tarayıcı desteği

• 53
• 12
• 36
• 11

Kaynak

MediaDevices.getSupportedConstraints()

Tarayıcı desteği

• 53
• 12
• 44
• 11

Kaynak

MediaStreamTrack.applyConstraints()

Tarayıcı desteği

• 59
• 12
• 43
• 11

Kaynak

MediaStreamTrack.getCapabilities()

Tarayıcı desteği

• 59
• 12
• 132
• 11

Kaynak

MediaStreamTrack.getSettings()

Tarayıcı desteği

• 59
• 12
• 50
• 11

Kaynak

Faydalı bağlantılar

• PTZ Açıklaması
• Özellik taslağı
• GitHub deposu
• ChromeStatus girişi
• Chrome izleme hatası

Teşekkür ederiz

Bu makale Joe Medley ve Thomas Steiner tarafından incelenmiştir. Intel'deki Rijubrata Bhaumik ve Eero Häkkinen'e spesifikasyon ve uygulama konusundaki çalışmaları için teşekkür ederiz. Unsplash'ta Christina @ wocintechchat.com tarafından oluşturulan hero resim.