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

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

François Beaufort
François Beaufort

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

استفاده از میانای برنامه‌سازی کاربردی

تشخیص ویژگی

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

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 را اعطا کند.

نماگرفتی از پیام‌واره کاربر PTZ دوربین در Chrome برای macOS.
پیام‌واره کاربر 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» (ضبط ویدیو) بررسی کنید؛ «pan tilt» (حرکت، کج کردن) و «zoom» (بزرگ‌نمایی) به‌ترتیب به‌معنای این است که دوربین از کنترل‌های UVC «PanTilt (Absolute)»‎ (حرکت، کج کردن (مطلق)) و «Zoom (Absolute)»‎ (بزرگ‌نمایی (مطلق)) پشتیبانی می‌کند. کنترل‌های UVC «چرخش افقی/عمودی (نسبی)» و «بزرگ‌نمایی (نسبی)» در مرورگرهای مبتنی بر Chromium پشتیبانی نمی‌شوند.

صفحه اشکال‌زدایی داخلی ChromeOS.
صفحه داخلی برای اشکال‌زدایی پشتیبانی دوربین PTZ.

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

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

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

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

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

  • دوربین با اجازه PTZ اعطا نشده است.
  • سخت‌افزار دوربین از محدودیت PTZ پشتیبانی نمی‌کند.
  • صفحه برای کاربر قابل‌مشاهده نیست. از Page 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" } }
});

زمین بازی

با اجرای نسخه نمایشی می‌توانید با API کار کنید.

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

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

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

MediaStream API

Browser Support

  • Chrome: 55.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 11.

Source

Permissions API

Browser Support

  • Chrome: 43.
  • Edge: 79.
  • Firefox: 46.
  • Safari: 16.

Source

Page Visibility API

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

MediaDevices.getUserMedia()

Browser Support

  • Chrome: 53.
  • Edge: 12.
  • Firefox: 36.
  • Safari: 11.

Source

MediaDevices.getSupportedConstraints()

Browser Support

  • Chrome: 53.
  • Edge: 12.
  • Firefox: 44.
  • Safari: 11.

Source

MediaStreamTrack.applyConstraints()

Browser Support

  • Chrome: 59.
  • Edge: 12.
  • Firefox: 43.
  • Safari: 11.

Source

MediaStreamTrack.getCapabilities()

Browser Support

  • Chrome: 59.
  • Edge: 12.
  • Firefox: 132.
  • Safari: 11.

Source

MediaStreamTrack.getSettings()

Browser Support

  • Chrome: 59.
  • Edge: 12.
  • Firefox: 50.
  • Safari: 11.

Source

پیوندهای مفید

تصدیق‌ها

این مقاله توسط جو مدلی و توماس اشتاینر بازبینی شده است. از ریجوبراتا باومیک و ایرو هاکینن در Intel برای کارشان روی مشخصات و پیاده‌سازی سپاس‌گزاریم.