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 de kontrol edilebiliyor.

François Beaufort

Oda ölçeğinde video konferans çözümleri; kaydırma, yatırma ve yakınlaştırma özelliklerini kullanarak kameraların dağıtılmasını sağlar (PTZ) özellikleri ve yazılımın kamerayı toplantıya doğrultabilmesi katılımcı sayısı. Chrome 87'de kaydırma, yatırma ve yakınlaştırma özellikleri açık kameraların kullanılabildiği web sitelerinde, MediaDevices.getUserMedia() ve MediaStreamTrack.applyConstraints().

API'yi kullanma

Özellik algılama

Donanım algılaması, muhtemelen alışkın olduğunuz özellikten farklıdır. Şurada "pan", "tilt" ve "zoom" kısıtlama adlarının varlığı navigator.mediaDevices.getSupportedConstraints(), tarayıcının kamera PTZ'yi kontrol etmek için API'yi destekler ancak kamera donanımının destekler. Chrome 87'den itibaren, kamera PTZ'nin kontrol edilmesi şu cihazlarda desteklenmektedir: masaüstü, mobil cihazlarda ise hâlâ yalnızca yakınlaştırmayı destekliyor.

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'yi kontrol etmesine yalnızca kullanıcı açıkça bir istem ile kameraya PTZ izni verdi.

Kamera PTZ erişimi istemek için şu numarayı arayın: navigator.mediaDevices.getUserMedia() PTZ kısıtlamalarına tabidir. Bu, kullanıcıdan her iki PTZ izinlerine sahip normal kamera ve kamera ile uyumludur.

macOS için Chrome'daki kamera PTZ kullanıcı isteminin ekran görüntüsü. — Kamera PTZ kullanıcı istemi.

Döndürülen taahhüt,MediaStream kamera video akışını devreye sokmak. Kamera PTZ'yi desteklemiyorsa kullanıcı normal bir kamera istemi alır.

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), PTZ erişimi sağlanırsa otomatik olarak elde etmez. Bu doğru kameranın kendisi PTZ'yi desteklese bile. İzin istenmelidir tekrar. Neyse ki Permissions API'yi kullanarak PTZ izninin durumu.

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 kamerada PTZ'yi destekleyip desteklemediğini öğrenmek için dahili about://media-internals sayfasını ziyaret edin ve "Pan-eğerek-Yakınlaştırma" sütun "Video Yakalama" bölümünde sekmesinden; "pan eğim" ve "yakınlaştır" Buna göre, kameranın "PanEğme (Mutlak)" ve "Yakınlaştır (Mutlak)" UVC kontrolleri. "Paneğe (Göreli)" ve "Yakınlaştır (Göreli)" UVC kontrolleri, Chromium tabanlı tarayıcılarda desteklenmez.

ChromeOS'te PTZ kamera desteği hatalarını ayıklamak için kullanılan dahili sayfanın ekran görüntüsü. — PTZ kamera desteğinde hata ayıklamayla ilgili dahili sayfa.

Kamera PTZ'yi kontrol et

Önizlemeyi kullanarak kamera PTZ özelliklerini ve ayarlarını değiştirin Daha önce alınan stream nesneden MediaStreamTrack. MediaStreamTrack.getCapabilities(), desteklenen bir sözlük döndürür özellikleri ve aralıkları ya da izin verilen değerleri seçin. Bunun üzerine, MediaStreamTrack.getSettings(), geçerli ayarları döndürür.

Kaydırma, yatırma ve yakınlaştırma özellikleri ve ayarları yalnızca ve kullanıcı kameraya PTZ izni verdiyse.

Kamera PTZ'yi kontrol etme.

Uygun PTZ gelişmiş ile videoTrack.applyConstraints() numaralı telefonu arayın kısıtlamalara odaklanacağız. Başarılı olunduğu takdirde, iade edilen taahhüt yerine getirilir. Aksi takdirde şunlardan birini yapın:

PTZ izni olan kameraya izin verilmez.
kamera donanımı PTZ kısıtlamasını desteklemiyor.
Sayfa, kullanıcıya görünür durumda değil. Şu öğeleri tespit etmek için Page Görünürlük API'sini kullanın: değişikliklerine dikkat edin.

// 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...
}

Kamera kaydırma, yatırma ve yakınlaştırma özelliklerini Bir miktar kamera PTZ ideal kısıtlamasıyla navigator.mediaDevices.getUserMedia() değerler. Bu, kamera PTZ özellikleri önceden biliniyorsa faydalıdır. Not zorunlu kısıtlamalara (min., maks., tam) burada izin verilmediğini

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. Google Play'de kaynak koda ekleyin.

Güvenlikle İlgili Dikkat Edilmesi Gereken Noktalar

Spesifikasyon yazarları, bu API'yi çekirdek API'yi kullanarak dahil olmak üzere tüm bunları kapsar. Bunu kullanma imkanı API temel olarak Medya Yakalama ve Streams API. Kullanıcı istemine yanıt olarak, web sitesinin kamera PTZ'yi yalnızca sayfa kullanıcı tarafından görülebildiğinde.

Tarayıcı uyumluluğu

MediaStream API'sı

Tarayıcı Desteği

Kaynak

İzinler API'si

Tarayıcı Desteği

Kaynak

Sayfa Görünürlük API'si

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

Bu makale Joe Medley ve Thomas Steiner tarafından incelenmiştir. Intel'den Rijubrata Bhaumik ve Eero Häkkinen'a özellik ve uygulama. Christina @ wocintechchat.com tarafından Unsplash'teki hero resim.