Kamera kaydırma, eğme ve yakınlaştırmayı kontrol edin

Oda ölçeğinde 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 başlayarak, kameralardaki kaydırma, eğme ve yakınlaştırma özellikleri, Chrome’daki medya izleme kısıtlamalarını kullanan web siteleri tarafından kullanılabilir. MediaDevices.getUserMedia() Ve MediaStreamTrack.applyConstraints().

API’yi kullanma #

Özellik algılama #

Donanım için özellik algılama, muhtemelen alışık olduğunuzdan farklıdır. Varlığı "pan", "tilt"Ve "zoom" kısıtlama adları navigator.mediaDevices.getSupportedConstraints() size tarayıcının kamera PTZ’sini kontrol etmek için API’yi desteklediğini söyler, ancak kamera donanımının bunu destekleyip desteklemediğini söylemez. Chrome 87’den itibaren, kamera PTZ’sinin kontrol edilmesi masaüstünde desteklenirken, Android hala 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 etmesine, yalnızca kullanıcı bir istem yoluyla kameraya açıkça PTZ izni vermişse izin verilir.

Kamera PTZ erişimi talep etmek için, arayın navigator.mediaDevices.getUserMedia() aşağıda gösterildiği gibi PTZ kısıtlamaları ile. Bu, kullanıcıdan hem normal kameraya hem de kameraya PTZ izinleri vermesini isteyecektir.

İade edilen söz, bir MediaStream kamera video akışını kullanıcıya göstermek için kullanılan nesne. 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 izni, kullanılabilir hale gelirse otomatik olarak PTZ erişimi kazanmaz. Bu, kameranın kendisi PTZ’yi desteklediğinde bile geçerlidir. İzin tekrar talep edilmelidir. Neyse ki, kullanabilirsiniz İzinler API’sı PTZ izninin durumunu sorgulamak ve izlemek için.

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 bir kamera için PTZ’yi destekleyip desteklemediğini öğrenmek için dahili about://media-internals sayfasını açın ve “Video Yakalama” sekmesindeki “Pan-Tilt-Zoom” sütununa bakın; Sırasıyla “pan tilt” ve “zoom”, kameranın “PanTilt (Mutlak)” ve “Zoom (Mutlak)” özelliklerini desteklediği anlamına gelir. UVC kontrolleri. “PanTilt (Göreceli)” ve “Yakınlaştır (Göreceli)” UVC kontrolleri, Chromium tabanlı tarayıcılarda desteklenmez.

Kamera PTZ’sini kontrol edin #

Önizlemeyi kullanarak kamera PTZ özelliklerini ve ayarlarını değiştirin MediaStreamTrack dan stream daha önce elde edilen nesne. MediaStreamTrack.getCapabilities() desteklenen yeteneklere ve aralıklara veya izin verilen değerlere sahip bir sözlük döndürür. buna bağlı olarak, MediaStreamTrack.getSettings() mevcut ayarları döndürür.

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

Arama videoTrack.applyConstraints() uygun ile PTZ gelişmiş kısıtlamaları Aşağıdaki örnekte gösterildiği gibi kamera kaydırma, eğme ve yakınlaştırmayı kontrol etmek için. Döndürülen söz başarılı olursa çözülecektir. Aksi takdirde, aşağıdakilerden biri reddedilir:

• PTZ iznine sahip kamera verilmez.
• kamera donanımı PTZ kısıtlamasını desteklemiyor.
• sayfa kullanıcı tarafından görülmez. Kullan Sayfa Görünürlük API’sı sayfa görünürlük değişikliklerini algılamak için.

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

Ayrıca arayarak kamera kaydırma, eğme ve yakınlaştırmayı yapılandırmak da mümkündür. navigator.mediaDevices.getUserMedia() bazı kamera PTZ ideal kısıtlama değerleri ile. Bu, kamera PTZ özellikleri önceden bilindiğinde kullanışlıdır. Dikkat zorunlu kısıtlamalar (min, maks, tam) burada izin verilmez.

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

Oyun alanı #

Çalıştırarak API ile oynayabilirsiniz. gösteri Glitch’te. Emin olun kaynak kodunu kontrol edin.

İpucu: PTZ’yi destekleyen bir kameranız yoksa, anahtarla Chrome’u çalıştırın --use-fake-device-for-media-stream makinenizde bir tane simüle etmek için. Eğlence!

Güvenlik Hususları #

Spesifikasyon yazarları, kullanıcı kontrolü, şeffaflık ve ergonomi dahil olmak üzere çekirdeği kullanarak bu API’yi tasarladı ve uyguladı. Bu API’yi kullanma yeteneği, birincil olarak aynı izin modeli tarafından kontrol edilir. Medya Yakalama ve Akış API’sı. Bir kullanıcı istemine yanıt olarak, web sitesinin kamera PTZ’sini yalnızca sayfa kullanıcı tarafından görünür olduğunda kontrol etmesine izin verilir.

Tarayıcı Uyumluluğu #

Medya Akışı API’sı #

İzinler API’sı #

Sayfa Görünürlük API’sı #

MediaDevices.getUserMedia() #

MediaDevices.getSupportedConstraints() #

MediaStreamTrack.applyConstraints() #

MediaStreamTrack.getCapabilities() #

MediaStreamTrack.getSettings() #

Faydalı Bağlantılar #

teşekkürler #

Bu makale tarafından incelendi Joe Karışık Ve Thomas Steiner. Sayesinde Rijubrata Bhaumik Ve Eero Häkkinen Spesifikasyon ve uygulama konusundaki çalışmaları için Intel’de. Kahraman görseli Christina @ wocintechchat.com Açık Unsplash.