حرکت، شیب و بزرگنمایی دوربین را کنترل کنید

ویژگی‌های حرکت، شیب و بزرگنمایی دوربین‌ها در نهایت در وب قابل کنترل هستند.

François Beaufort

راه‌حل‌های کنفرانس ویدئویی در مقیاس اتاق، دوربین‌هایی با قابلیت حرکت، شیب و زوم (PTZ) را به کار می‌گیرند تا نرم‌افزار بتواند دوربین را به سمت شرکت‌کنندگان در جلسه هدایت کند. از Chrome 87، ویژگی‌های حرکت، شیب و بزرگ‌نمایی دوربین‌ها برای وب‌سایت‌ها با استفاده از محدودیت‌های ردیابی رسانه در MediaDevices.getUserMedia() و MediaStreamTrack.applyConstraints() در دسترس هستند.

با استفاده از API

تشخیص ویژگی

تشخیص ویژگی برای سخت افزار با چیزی که احتمالاً به آن عادت کرده اید متفاوت است. وجود نام محدودیت های "pan" ، "tilt" و "zoom" در navigator.mediaDevices.getSupportedConstraints() به شما می گوید که مرورگر از API برای کنترل PTZ دوربین پشتیبانی می کند، اما نه اینکه آیا سخت افزار دوربین از آن پشتیبانی می کند یا خیر. از Chrome 87، کنترل دوربین PTZ روی دسکتاپ پشتیبانی می‌شود، در حالی که اندروید هنوز فقط از بزرگ‌نمایی پشتیبانی می‌کند.

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

درخواست دسترسی PTZ به دوربین

یک وب‌سایت فقط در صورتی مجاز است که دوربین PTZ را کنترل کند که کاربر صراحتاً از طریق یک درخواست مجوز PTZ را به دوربین داده باشد.

برای درخواست دسترسی PTZ دوربین، با navigator.mediaDevices.getUserMedia() با محدودیت های PTZ مطابق شکل زیر تماس بگیرید. این امر از کاربر می خواهد که مجوزهای PTZ را به دوربین و دوربین معمولی اعطا کند.

وعده بازگشتی با یک شی MediaStream که برای نشان دادن جریان ویدیوی دوربین به کاربر استفاده می شود، حل می شود. اگر دوربین از PTZ پشتیبانی نمی کند، کاربر یک اعلان معمولی دوربین دریافت می کند.

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

مجوز دوربینی که قبلاً اعطا شده بود، مخصوصاً مجوزی بدون دسترسی PTZ، اگر در دسترس باشد، به طور خودکار به PTZ دسترسی پیدا نمی کند. این حتی زمانی که خود دوربین از PTZ پشتیبانی می کند نیز صادق است. مجوز باید دوباره درخواست شود. خوشبختانه، شما می توانید از Permissions API برای پرس و جو و نظارت بر وضعیت مجوز PTZ استفاده کنید.

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 از PTZ برای دوربین پشتیبانی می‌کند، به صفحه داخلی about://media-internals بروید و ستون "Pan-Tilt-Zoom" را در برگه "Video Capture" بررسی کنید. "تاب شیب" و "زوم" به ترتیب به این معنی است که دوربین از کنترل‌های UVC "PanTilt (مطلق)" و "Zoom (مطلق)" پشتیبانی می‌کند. کنترل‌های «PanTilt (نسبی)» و «Zoom (نسبی)» UVC در مرورگرهای مبتنی بر Chromium پشتیبانی نمی‌شوند.

دوربین کنترل PTZ

قابلیت‌ها و تنظیمات دوربین PTZ را با استفاده از پیش‌نمایش MediaStreamTrack از شی stream که قبلاً به دست آمده بود، دستکاری کنید. MediaStreamTrack.getCapabilities() دیکشنری را با قابلیت های پشتیبانی شده و محدوده ها یا مقادیر مجاز برمی گرداند. به همین ترتیب، MediaStreamTrack.getSettings() تنظیمات فعلی را برمی گرداند.

قابلیت‌ها و تنظیمات حرکت، شیب، و بزرگ‌نمایی تنها در صورتی در دسترس هستند که توسط دوربین پشتیبانی شوند و کاربر مجوز PTZ را به دوربین داده باشد.

برای کنترل حرکت، شیب و بزرگنمایی دوربین، همانطور که در مثال زیر نشان داده شده است، videoTrack.applyConstraints() را با محدودیت های پیشرفته PTZ مناسب فراخوانی کنید. قول برگشتی در صورت موفقیت حل خواهد شد. در غیر این صورت رد می شود اگر:

• دوربین با مجوز PTZ داده نمی شود.
• سخت افزار دوربین از محدودیت PTZ پشتیبانی نمی کند.
• صفحه برای کاربر قابل مشاهده نیست. برای تشخیص تغییرات نمایان بودن صفحه از صفحه Visibility API استفاده کنید.

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

همچنین می توان با فراخوانی navigator.mediaDevices.getUserMedia() با برخی از مقادیر محدودیت ایده آل PTZ دوربین، پان، شیب و بزرگنمایی دوربین را پیکربندی کرد. هنگامی که قابلیت های دوربین PTZ از قبل شناخته شده باشد، این کار مفید است. توجه داشته باشید که محدودیت های اجباری (حداقل، حداکثر، دقیق) در اینجا مجاز نیستند.

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

زمین بازی

با اجرای دمو در Glitch می توانید با API بازی کنید. حتماً کد منبع را بررسی کنید .

ملاحظات امنیتی

نویسندگان مشخصات این API را با استفاده از هسته اصلی شامل کنترل کاربر، شفافیت و ارگونومی طراحی و پیاده سازی کرده اند. توانایی استفاده از این API در درجه اول توسط همان مدل مجوز مانند Media Capture و Streams API در نظر گرفته شده است. در پاسخ به درخواست کاربر، وب سایت مجاز به کنترل PTZ دوربین تنها زمانی است که صفحه برای کاربر قابل مشاهده باشد.

سازگاری با مرورگر

MediaStream API

API مجوزها

API مشاهده صفحه

MediaDevices.getUserMedia()

MediaDevices.getSupportedConstraints()

MediaStreamTrack.applyConstraints()

MediaStreamTrack.getCapabilities()

MediaStreamTrack.getSettings()

لینک های مفید

• توضیح دهنده PTZ
• پیش نویس مشخصات
• مخزن GitHub
• ورودی ChromeStatus
• اشکال ردیابی کروم

سپاسگزاریها

این مقاله توسط جو مدلی و توماس استاینر بررسی شده است. با تشکر از Rijubrata Bhaumik و Eero Häkkinen در اینتل برای کارشان بر روی مشخصات و پیاده سازی. تصویر قهرمان توسط کریستینا @ wocintechchat.com در Unsplash .