تقديم عنصر HTML‏ <usermedia>

Mari Viana

Minh Le

Published: June 29, 2026

بعد إطلاق العنصر <geolocation> في Chrome 144، أصبح العنصر التالي الذي يمكن التحكّم فيه في مجموعة "عناصر الإمكانات" هو عنصر HTML‏ <usermedia>. يتوفّر هذا العنصر بدءًا من Chrome 151، ويمثّل المرحلة التالية من عملية الانتقال من طلبات الأذونات العامة إلى عناصر التحكّم المستهدَفة والوظيفية للوصول إلى بثوق الكاميرا والميكروفون. من خلال الانتقال من الإشعارات التي يتم تشغيلها بواسطة النصوص البرمجية إلى تجربة إعلانية وتفاعلية يتم تفعيلها بواسطة المستخدم، <usermedia> يقلّل من رمز النص النموذجي ويحسّن الأمان ويوفر مسار استرداد سلسًا للمستخدمين الذين سبق لهم رفض الوصول، ما يحلّ بشكل فعّال مشكلة ثغرة الأذونات التي طال أمدها.

من إدارة الأذونات إلى التحكّم في الإمكانات

عنصر <usermedia> هو عنصر التحكّم المتخصّص التالي الذي سيتم إطلاقه في مجموعة "عناصر الإمكانات"، بعد الإطلاق الناجح لـ <geolocation>. يتيح هذا الانتقال من اقتراح <permission> الأصلي والعام، وهو جزء من مبادرة PEPC، للمتصفّح التعامل مع التعقيدات والسلوكيات الفريدة لإمكانات الأجهزة المختلفة بشكل أكثر فعالية. في حين أنّ الاقتراح الأولي كان يركّز بشكل أساسي على إدارة حالات الأذونات، مثل السماح مقابل الرفض، تعمل "عناصر الإمكانات" كوسطاء للبيانات.

يوفّر العنصر <geolocation> كائن موقع إلكتروني لموقعك الإلكتروني، و <usermedia> يدير عملية الوصول الكاملة إلى الكاميرا والميكروفون. يرصد هذا العنصر نية المستخدم ويدير إشعار المتصفّح ويسلّم كائن MediaStream إلى التطبيق. يؤدي هذا التغيير إلى إزالة الحاجة إلى طلبات getUserMedia() منفصلة، ويُبسّط عملية التنفيذ، ويضمن حصول المتصفّح على إشارة موثوق بها لنية المستخدم.

التحقّق من صحة المفهوم

أظهرت البيانات الفعلية من "التجربة والتقييم" الأولية أنّ عناصر التحكّم في الأذونات التي تظهر داخل السياق والتي يبدأها المستخدم تحسّن بشكل كبير معدّلات نجاح المستخدمين.

• لاحظت شركة Cisco أنّ المستخدمين الذين رفضوا الأذونات في البداية كانوا على الأرجح بنسبة 10% فقط يمنحون الأذونات بنجاح باستخدام الإشعارات القديمة، ولكن ارتفع هذا المعدّل إلى أكثر من 65% باستخدام العنصر الجديد.
• أبلغت Zoom عن انخفاض بنسبة% 46.9 في أخطاء التقاط الكاميرا أو الميكروفون، مثل أدوات الحظر على مستوى النظام، من خلال استخدام العنصر لتوجيه المستخدمين خلال عملية الاسترداد.
• لاحظ Google Meet انخفاضًا بنسبة% 17 في ملاحظات "الميكروفون لا يعمل" وزيادة بنسبة% 131 في عملية استرداد الأذونات بنجاح للمستخدمين الذين رفضوا الوصول في البداية.

لماذا يجب استخدام عنصر <usermedia>؟

استنادًا إلى الأنماط التي تم تحديدها بواسطة <geolocation>، يعالج <usermedia> التحديات الأساسية لطلب الإمكانات القوية. تعتمد طلبات الوسائط على طلبات JavaScript إلزامية غالبًا ما تؤدي إلى ظهور إشعارات خارج السياق. إذا حظرت موقعك الإلكتروني عن طريق الخطأ، يتطلب التراجع عن هذا القرار الانتقال إلى إعدادات المتصفّح، وهي "ثغرة أذونات" تؤدي غالبًا إلى التخلي عن الميزات.

يحلّ عنصر <usermedia> هذه المشاكل من خلال توفير ما يلي:

• نية وتوقيت واضحان: لا يظهر الإشعار إلا بعد النقر فعليًا على عنصر يتحكّم فيه المتصفّح، ما يوفّر إشارة موثوق بها للنية. يتيح ذلك للمتصفّح تجاوز عمليات الحظر التلقائية الصامتة التي غالبًا ما تؤدي إلى فشل الطلبات النموذجية التي يتم تشغيلها بواسطة النصوص البرمجية.
• عملية استرداد مبسطة: إذا تم رفض الوصول سابقًا، يؤدي النقر على العنصر إلى تشغيل عملية استرداد متخصّصة تتيح لك إعادة تفعيل الكاميرا أو الميكروفون على الفور على الصفحة، بدون الانتقال إلى إعدادات المتصفّح المعقدة.
• الوصول المباشر إلى البث: بصفتها وسيطًا للبيانات، تعرض هذه الميزة بث الوسائط مباشرةً. يقلّل ذلك من رمز النص النموذجي المطلوب لإدارة معاودة الاتصال وحالات الخطأ في تطبيقك.

التنفيذ

يتطلب دمج العنصر تعليمات برمجية متكرّرة أقل بكثير من واجهة برمجة التطبيقات JavaScript القديمة. باتّباع النمط الإعلاني الذي تم تحديده بواسطة العنصر <geolocation>، يمكنك إضافة العلامة <usermedia> إلى HTML و ضبط متطلبات الأجهزة باستخدام الطريقة setConstraints().

<usermedia id="media-ctrl">
  <button>Enable camera and microphone</button>
</usermedia>

const el = document.getElementById('media-ctrl');

// Specify hardware preferences before user interaction:
el.setConstraints({
    video: { width: 1280, height: 720 },
    audio: { echoCancellation: true }
});

// Handle successful stream acquisition:
el.addEventListener('stream', () => {
  videoPreview.srcObject = el.stream;
});

// Handle stream acquisition failure:
el.addEventListener('error', () => {
  console.error(`Access failed: ${el.error?.name}`);
});

// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
  console.log('Permission prompt was dismissed by the user.');
});

السمات والخصائص الرئيسية

• stream: هي سمة للقراءة فقط توفّر كائن MediaStream بعد أن يمنح المستخدم إذن الوصول بنجاح.
• setConstraints(): هي طريقة تتيح للمطوّرين تعديل الإعدادات المفضّلة للأجهزة، مثل deviceId أو درجة الدقة، قبل تفاعل المستخدم.
• error: هي سمة للقراءة فقط تعرض DOMException (على سبيل المثال، NotAllowedError) إذا فشل الطلب أو تم إغلاقه.
• onstream: هو معالج أحداث يتم تشغيله فور الحصول على مسارات الوسائط.
• onerror: هو معالج أحداث يتم تشغيله عند فشل محاولة الحصول على البث.
• oncancel: هو معالج أحداث يتم تشغيله عندما يلغي المستخدم إشعار الإذن أو يغلقه أثناء عملية الحصول على البث.

قيود التنسيق

لضمان ثقة المستخدم ومنع أنماط التصميم الخادعة، يطبّق عنصر <usermedia> قيود التنسيق الصارمة نفسها التي تطبّقها "عناصر الإمكانات" الأخرى:

• سهولة القراءة: يتحقّق المتصفّح من ألوان النص والخلفية للتأكّد من توفّر تباين كافٍ (3:1 على الأقل) لضمان إمكانية قراءة الطلب دائمًا. عليك ضبط قناة ألفا (opacity) على 1 لمنع أن يكون العنصر شفافًا بشكل خادع.
• الحجم والمسافة: يفرض المتصفّح حدودًا دنيا وقصوى لكل من width وheight وfont-size. يتم إيقاف الهوامش السلبية أو إزاحات المخطط لمنع إخفاء العنصر مرئيًا.
• السلامة المرئية: يحدّ المتصفّح من تأثيرات التشويه. على سبيل المثال، لا يتيح transform سوى عمليات النقل ثنائية الأبعاد والتحجيم النسبي.
• فئات CSS الزائفة: يتيح العنصر التنسيق المستند إلى الحالة، مثل :granted (الذي يتم تفعيله بمجرد تفعيل الإذن والحصول على البث)، بالإضافة إلى حالات التفاعل العادية مثل :hover و:active.

التحسين التدريجي واستراتيجية نقل البيانات

استنادًا إلى نمط التصميم الذي تم تحديده بواسطة <geolocation>، تم تصميم <usermedia> لتقليل الأداء بشكل تدريجي. ستتعامل المتصفّحات التي لا تتيح استخدام العنصر معه على أنّه HTMLUnknownElement وتعرض العناصر التابعة له. يتيح لك ذلك توفير تجربة احتياطية لجميع المستخدمين.

نمط احتياطي مخصّص

يمكنك رصد دعم عنصر <usermedia> آليًا في JavaScript:

if ('HTMLUserMediaElement' in window) {
  // Use modern <usermedia> element logic
} else {
  // Fallback to legacy getUserMedia() API
}

استخدِم منطق الرصد هذا لإضافة زر عادي داخل عنصر <usermedia> لتشغيل واجهة برمجة التطبيقات القديمة getUserMedia() API:

<usermedia id="stream-handler">
    <button id="fallback-stream-handler">
        Enable Camera and Mic
    </button>
</usermedia>

// Function for handling video/audio streams:
function handleStream (event) {
  /* ... */
}

if ('HTMLUserMediaElement' in window) {
  // In this case, we have <usermedia> element support:
  const streamHandler = document.getElementById('stream-handler');

  streamHandler.addEventListener('stream', event => {
    handleStream(event);
  });
} else {
  // <usermedia> element support is missing, so fall back instead:
  const fallbackStreamHandler = document.getElementById('fallback-stream-handler');

  fallbackStreamHandler.addEventListener('click', event => {
    navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
  });
}

نقل البيانات للمشاركين في "التجربة والتقييم"

بالنسبة إلى المطوّرين الذين دمَجوا عنصر <permission> التجريبي والعام أثناء "التجربة والتقييم"، تم تصميم عملية الانتقال إلى <usermedia> لتكون بسيطة قدر الإمكان.

1. تعديل العلامة: استبدِل <permission type="camera microphone"> بـ <usermedia> لضمان تعديل جميع أدوات الاختيار التي تستهدف عناصر <permission> السابقة لاستخدام عنصر <usermedia> بدلاً منها.
2. رصد الميزات: عدِّل عمليات التحقّق من HTMLPermissionElement إلى HTMLUserMediaElement

الخطة المستقبلية

في حين أنّ العنصر <usermedia> يعالج طلبات الصوت والفيديو المجمّعة، تتضمّن الخطة المستقبلية لـ "عناصر الإمكانات" ما يلي:

• <camera>: يركّز بشكل خاص على السيناريوهات التي تتضمّن الفيديو فقط.
• <microphone>: يركّز بشكل خاص على السيناريوهات التي تتضمّن الصوت فقط.

يمكنك الاطّلاع على كيفية مساعدة هذه العناصر الخاصة بالإمكانات المطوّرين في إنشاء تجارب وسائط أكثر سهولة وموثوقية. لمزيد من المعلومات، يُرجى الاطّلاع على الدليل الفني لعناصر الإمكانات .

روابط ذات صلة

• عناصر الإمكانات: <usermedia> شرح عنصر
• المواصفات
• تقديم عنصر HTML‏ <geolocation>