يمكن في النهاية التحكم في ميزات العرض الشامل والإمالة والتكبير/التصغير في الكاميرات على الويب.
تستخدم حلول اجتماعات الفيديو على مستوى الغرف الكاميرات المزودة بإمكانيات التحريك والإمالة والتكبير/ التصغير
(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 الداخلية واطّلِع على عمود "التحريك والتكبير/التصغير"
في علامة تبويب "التقاط الفيديو"، ويعني "التحريك والإمالة والتكبير أو التصغير" على التوالي أنّ الكاميرا تتوافق مع
عناصر التحكّم بالتحريك والتكبير أو التصغير (مطلق) لعناصر التحكّم ذات الإمالة الكاملة والتكبير/التصغير (UVC). عناصر تحكم UVC "Panإمالة (نسبي)"
و "تكبير (نسبي)" غير معتمدة في المتصفحات المستندة إلى Chromium.
التحكّم في PTZ للكاميرا
معالجة إمكانات PTZ للكاميرا وإعداداتها باستخدام معاينة MediaStreamTrack من عنصر stream الذي تم الحصول عليه سابقًا.
تعرض MediaStreamTrack.getCapabilities() قاموسًا بالإمكانات
المسموح بها والنطاقات أو القيم المسموح بها. بالمقابل،
يعرض MediaStreamTrack.getSettings() الإعدادات الحالية.
لا تتوفر إمكانات وإعدادات التحريك والإمالة والتكبير/التصغير إلا إذا كانت متوافقة مع الكاميرا وتم منح المستخدم إذن PTZ للكاميرا.
يمكنك استدعاء videoTrack.applyConstraints() مع تطبيق قيود PTZ المتقدمة المناسبة للتحكّم في تحريك الكاميرا والإمالة والتكبير/التصغير، كما هو موضّح في المثال أدناه.
سيتم حل الوعد الذي تم إرجاعه في حال نجاحه. وإلا سيتم الرفض في أي من الحالات التالية:
- لم يتم منح الكاميرا إذن PTZ.
- لا يدعم جهاز الكاميرا قيد PTZ.
- لا تكون الصفحة مرئية للمستخدم. استخدِم واجهة برمجة تطبيقات مستوى ظهور الصفحة لرصد التغييرات في مستوى ظهور الصفحة.
// 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. تأكّد من الاطّلاع على رمز المصدر
اعتبارات الأمان
وقد صمّم مؤلفو المواصفات واجهة برمجة التطبيقات هذه ونفّذوها باستخدام النظام الأساسي بما في ذلك عناصر تحكُّم المستخدم والشفافية وهندسة العمل. إمكانية استخدام واجهة برمجة التطبيقات هذه تعتمد بشكل أساسي على نموذج الإذن نفسه المستخدَم في واجهة برمجة تطبيقات التقاط الوسائط والبث المباشر. استجابةً لطلب المستخدم، لا يُسمح للموقع الإلكتروني بالتحكّم في PTZ للكاميرا إلا عندما تكون الصفحة مرئية للمستخدم.
توافُق المتصفح
واجهة برمجة تطبيقات MediaStream
واجهة برمجة تطبيقات الأذونات
واجهة برمجة تطبيقات مستوى رؤية الصفحة
MediaDevices.getUserMedia()
MediaDevices.getSupportedConstraints()
MediaStreamTrack.applyConstraints()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getSettings()
روابط مفيدة
شكر وتقدير
راجع هذه المقالة جو ميدلي وتوماس شتاينر. شكرًا لكل من Rijubrata Bhaumik وEero Häkkinen في Intel على بذل جهودهما بشأن المواصفات وكيفية تنفيذها. صورة رئيسية من تصوير كريستينا @ wocintechchat.com على Un تحقق