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 üzerinden kontrol edilebiliyor.

Oda ölçeğinde video konferans çözümleri, kameraları kaydırma, eğme ve yakınlaştırma (PTZ) özellikleriyle dağıtır. Bu sayede yazılım, toplantı katılımcılarına kamerayı doğru tutabilir. Chrome 87'den itibaren, kameralardaki kaydırma, eğme ve yakınlaştırma özellikleri, MediaDevices.getUserMedia() ve MediaStreamTrack.applyConstraints() içindeki medya izleme kısıtlamalarını kullanan web siteleri tarafından kullanılabilecektir.

API'yi kullanın

Özellik algılama

Donanım için özellik algılama muhtemelen alışkın olduğunuzdan farklıdır. navigator.mediaDevices.getSupportedConstraints() öğesinde "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 ancak kamera donanımının destekleyip desteklemediğini göstermez. Chrome 87'den itibaren, kamera PTZ'sini kontrol etme özelliği masaüstünde desteklenirken Android yalnızca yakınlaştırmayı desteklemektedir.

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

Kamera PTZ erişimi iste

Bir web sitesinin kamera PTZ'sini kontrol edebilmesi için, kullanıcının bir istemle kameraya açıkça PTZ izni vermiş olması gerekir.

Kamera PTZ erişimi istemek için aşağıda gösterilen PTZ kısıtlamalarıyla navigator.mediaDevices.getUserMedia() yöntemini çağırın. Bu işlem, kullanıcıdan hem normal kamera hem de kameraya PTZ izni vermesini ister.

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

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

Önceden verilmiş bir kamera izni (özellikle PTZ erişimi olmayan bir kamera) kullanılabilir hale geldiğinde PTZ erişimini otomatik olarak kazanmaz. Kameranın kendisi PTZ'yi desteklediğinde bile bu geçerlidir. İznin tekrar istenmesi gerekir. 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 için dahili about://media-internals sayfasına gidin ve "Video Yakalama" sekmesindeki "Pan-Tilt-Zoom" sütununa bakın. Sırasıyla "kaydırma" ve "yakınlaştırma" değerleri, kameranın "PanTilt (Mutlak)" ve "Yakınlaştırma (Mutlak)" UVC kontrollerini desteklediği anlamına gelir. "PanTilt (Göreli)" ve "Yakınlaştırma (Göreli)" UVC kontrolleri, Chromium tabanlı tarayıcılarda desteklenmez.

Kamera PTZ'sini kontrol et

Daha önce alınan stream nesnesinden MediaStreamTrack önizlemesini kullanarak kamera PTZ özelliklerini ve ayarlarını değiştirin. MediaStreamTrack.getCapabilities(), desteklenen özellikleri ve aralıkları veya 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 ile ayarları yalnızca kamera tarafından destekleniyorsa ve kullanıcı, kameraya PTZ izni verdiyse kullanılabilir.

Aşağıdaki örnekte gösterildiği gibi kamera kaydırma, yatırma ve yakınlaştırmayı kontrol etmek için uygun PTZ gelişmiş kısıtlamaları ile videoTrack.applyConstraints() yöntemini çağırın. Başarılı olunması durumunda, verilen sözü netleştirir. Aksi takdirde, aşağıdaki durumlardan biri reddedilecektir:

• kameraya PTZ izni verilmez.
• Kamera donanımı PTZ kısıtlamasını desteklemez.
• Sayfa kullanıcı tarafından görülemez. Sayfa görünürlüğü değişikliklerini algılamak için Page Görünürlük 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() yöntemini çağırarak kamera kaydırma, yatırma ve yakınlaştırma seçeneklerini yapılandırmak da mümkündür. Kamera PTZ özellikleri önceden öğrenildiğinde bu özellik kullanışlıdır. Zorunlu kısıtlamalara (min., maks., tam) burada izin verilmediğini unutmayın.

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

Playground

Glitch'te demo çalıştırarak API'yi kullanabilirsiniz. Kaynak koduna göz attığınızdan emin olun.

Güvenlikle İlgili Dikkat Edilmesi Gerekenler

Spesifikasyon yazarları bu API'yi kullanıcı kontrolü, şeffaflık ve ergonomik dahil olmak üzere temel unsurları kullanarak tasarladı ve uygulamıştır. Bu API'yi kullanabilme özelliği temel olarak Media Capture and Streams API ile aynı izin modeliyle sağlanır. Kullanıcı istemine yanıt olarak, web sitesinin kamera PTZ'sini yalnızca sayfa kullanıcı tarafından görülebildiği zaman kontrol etmesine izin verilir.

Tarayıcı uyumluluğu

MediaStream API'sı

İzinler API'si

Sayfa Görünürlük API'sı

MediaDevices.getUserMedia()

MediaDevices.getSupportedConstraints()

MediaStreamTrack.applyConstraints()

MediaStreamTrack.getCapabilities()

MediaStreamTrack.getSettings()

Faydalı bağlantılar

• PTZ Açıklayıcı
• Spesifikasyon taslağı
• GitHub deposu
• ChromeStatus girişi
• Chrome izleme hatası

Teşekkür

Bu makale Joe Medley ve Thomas Steiner tarafından incelendi. Teknik özellikler ve uygulama konusundaki çalışmaları için Intel'den Rijubrata Bhaumik'e ve Eero Häkkinen'e teşekkür ederiz. Unsplash'ta Christina @ wocintechchat.com tarafından çekilmiş lokomotif resim.