Kameralardaki kaydırma, yatırma ve yakınlaştırma özellikleri artık web'de de kontrol edilebiliyor.
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.
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.
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.
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ı
İzinler API'si
Sayfa Görünürlük API'si
MediaDevices.getUserMedia()
MediaDevices.getSupportedConstraints()
MediaStreamTrack.applyConstraints()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getSettings()
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 ve uygulamaya geçelim. Christina @ wocintechchat.com tarafından Unsplash'teki hero resim.