تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

François Beaufort

تعمل حلول اجتماعات الفيديو على مستوى الغرف على نشر الكاميرات باستخدام العرض الشامل والإمالة والتكبير/التصغير إمكانات (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.

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

لقطة شاشة للصفحة الداخلية في نظام التشغيل ChromeOS لتصحيح أخطاء دعم كاميرا PTZ — صفحة داخلية لتصحيح أخطاء دعم كاميرا PTZ

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

معالجة إمكانات وإعدادات PTZ الخاصة بالكاميرا باستخدام المعاينة MediaStreamTrack من العنصر stream الذي تم الحصول عليه سابقًا. تعرض الدالة 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" } }
});

ملعب

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

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

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

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

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

دعم المتصفح

المصدر

واجهة Permissions API

دعم المتصفح

المصدر

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

دعم المتصفح

المصدر

`MediaDevices.getUserMedia()`

دعم المتصفح

المصدر

`MediaDevices.getSupportedConstraints()`

دعم المتصفح

المصدر

`MediaStreamTrack.applyConstraints()`

دعم المتصفح

المصدر

`MediaStreamTrack.getCapabilities()`

دعم المتصفح

المصدر

`MediaStreamTrack.getSettings()`

دعم المتصفح

المصدر

روابط مفيدة

شكر وتقدير

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