Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

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

François Beaufort

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

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.

macOS için Chrome'daki kamera PTZ kullanıcı isteminin ekran görüntüsü. — 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 ChromeOS'teki dahili sayfanın ekran görüntüsü. — 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'yi 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ı olunduğu takdirde, iade edilen taahhüt yerine getirilir. 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 çalıştırarak API ile oynayabilirsiniz. Kaynak koduna göz atmayı unutmayın.

Güvenlikle İlgili Dikkat Edilmesi Gereken Noktalar

Spesifikasyon yazarları bu API'yi kullanıcı kontrolü, şeffaflık ve ergonomik temeli kullanarak tasarlamış ve uygulamıştır. Bu API'nin kullanılabilmesi temel olarak Medya Yakalama ve Akış API'si ile aynı izin modeli tarafından kontrol edilir. 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

Kaynak

Permissions API

Tarayıcı Desteği

Kaynak

Page Visibility API

Tarayıcı desteği

Kaynak

`MediaDevices.getUserMedia()`

Tarayıcı Desteği

Kaynak

`MediaDevices.getSupportedConstraints()`

Tarayıcı desteği

Kaynak

`MediaStreamTrack.applyConstraints()`

Tarayıcı Desteği

Kaynak

`MediaStreamTrack.getCapabilities()`

Tarayıcı desteği

Kaynak

`MediaStreamTrack.getSettings()`

Tarayıcı desteği

Kaynak

Faydalı bağlantılar

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.