التحكّم في تحريك الكاميرا وإمالتها وتكبيرها/تصغيرها

يمكن التحكم في ميزات العرض الشامل والإمالة والتكبير/التصغير على الكاميرات أخيرًا على الويب.

تعمل حلول اجتماعات الفيديو على مستوى الغرف على نشر الكاميرات باستخدام العرض الشامل والإمالة والتكبير/التصغير إمكانات (PTZ) التي يمكن للبرامج من خلالها توجيه الكاميرا أثناء الاجتماع المشاركين. بدءًا من Chrome 87، سيتم تفعيل ميزات العرض الشامل والإمالة والتكبير/التصغير الكاميرات متاحة لمواقع الويب التي تستخدم قيود تتبع الوسائط في "MediaDevices.getUserMedia()" وMediaStreamTrack.applyConstraints()"

استخدام واجهة برمجة التطبيقات

رصد الميزات

يختلف اكتشاف الميزات للأجهزة عما اعتدت عليه على الأرجح. ظهور أسماء القيود "pan" و"tilt" و"zoom" في يخبرك navigator.mediaDevices.getSupportedConstraints() أن المتصفح واجهة برمجة التطبيقات للتحكم في تقنية PTZ للكاميرا، ولكن لا يوجد ما إذا كان جهاز الكاميرا التي تدعمها. بدءًا من الإصدار Chrome 87، تتوفّر إمكانية التحكّم في تقنية 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.

ستتم معالجة الوعد الذي تم إرجاعه باستخدام عنصر 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 الداخلية ويمكنك مراجعة ميزة "التحريك والإمالة والتكبير/التصغير" العمود ضمن القسم "التقاط الفيديو" علامة تبويب؛ "عرض شامل للإمالة" و"تكبير/تصغير" على التوالي، تعني أنّ الكاميرا متوافقة عمود "Pantail (Absolute)" و"تكبير (مطلق)" عناصر التحكم في UVC: عمود "Panإمالة (النسب)" و"التكبير/التصغير (النسبي)" لا تتوفّر عناصر التحكّم في UVC في المتصفّحات المستندة إلى Chromium.

التحكّم في تقنية PTZ للكاميرا

معالجة إمكانات وإعدادات PTZ الخاصة بالكاميرا باستخدام المعاينة MediaStreamTrack من العنصر stream الذي تم الحصول عليه سابقًا. تعرض الدالة MediaStreamTrack.getCapabilities() قاموسًا يتضمن علامات والإمكانات والنطاقات أو القيم المسموح بها. وبالمقابل، تعرض الدالة MediaStreamTrack.getSettings() الإعدادات الحالية.

لا تتوفر إمكانات وإعدادات العرض الشامل والإمالة والتكبير/التصغير إلا إذا كانت متوافقة مع الكاميرا ومنح المستخدم إذن 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" } }
});

ملعب

يمكنك اللعب باستخدام واجهة برمجة التطبيقات من خلال تشغيل العرض التوضيحي على تطبيق Glitch. تأكد من التحقق من رمز المصدر

اعتبارات الأمان

صمّم مؤلفو المواصفات واجهة برمجة التطبيقات هذه ونفّذوها باستخدام بما في ذلك تحكُّم المستخدم والشفافية وتسهيل الاستخدام. ستساعدك القدرة على استخدام تعتمد واجهة برمجة التطبيقات بشكل أساسي على نموذج الأذونات نفسه المستخدَم في التقاط الوسائط Streams API استجابةً لمطالبة المستخدم، يتم السماح للموقع الإلكتروني بالتحكم في الكاميرا PTZ فقط عندما تكون الصفحة مرئية للمستخدم.

توافُق المتصفح

واجهة برمجة تطبيقات MediaStream

واجهة Permissions API

واجهة برمجة تطبيقات مستوى رؤية الصفحة

MediaDevices.getUserMedia()

MediaDevices.getSupportedConstraints()

MediaStreamTrack.applyConstraints()

MediaStreamTrack.getCapabilities()

MediaStreamTrack.getSettings()

روابط مفيدة

• شرح PTZ
• مسودة المواصفات
• مستودع GitHub
• إدخال ChromeStatus
• خطأ التتبُّع في Chrome

شكر وتقدير

تمت مراجعة هذه المقالة من قِبل جو ميدلي وتوماس شتاينر. نشكر Rijubrata Bhaumik وEero Häkkinen في Intel على عملهما في والمواصفات والتنفيذ. صورة رئيسية من إعداد "كريستينا"@ wocintechchat.com على Unسباش