معرفی عنصر HTML با نام <usermedia>

Mari Viana

Minh Le

منتشر شده: ۲۹ ژوئن ۲۰۲۶

پس از راه‌اندازی عنصر <geolocation> در کروم ۱۴۴، کنترل عملکردی بعدی در مجموعه عناصر قابلیت، عنصر HTML <usermedia> است. این عنصر که از کروم ۱۵۱ در دسترس است، مرحله بعدی گذار از درخواست‌های مجوز عمومی به کنترل‌های هدفمند و عملکردی برای دسترسی به جریان‌های دوربین و میکروفون را نشان می‌دهد. با حرکت از درخواست‌های ناشی از اسکریپت به سمت یک تجربه اعلانی و فعال‌شده توسط کاربر، <usermedia> کد تکراری را کاهش می‌دهد، امنیت را بهبود می‌بخشد و یک مسیر بازیابی یکپارچه برای کاربرانی که قبلاً دسترسی را رد کرده‌اند، فراهم می‌کند و به طور مؤثر حفره مجوز قدیمی را حل می‌کند.

از مدیریت مجوزها تا کنترل قابلیت‌ها

عنصر <usermedia> کنترل تخصصی بعدی است که پس از معرفی موفقیت‌آمیز <geolocation> در مجموعه Capability Elements راه‌اندازی می‌شود. این گذار از پیشنهاد اولیه و عمومی <permission> - بخشی از ابتکار PEPC - به مرورگر اجازه می‌دهد تا پیچیدگی‌ها و رفتارهای منحصر به فرد قابلیت‌های سخت‌افزاری مختلف را به طور مؤثرتری مدیریت کند. در حالی که پیشنهاد اولیه عمدتاً بر مدیریت حالت‌های مجوز، مانند اجازه در مقابل رد، متمرکز بود، Capability Elements به عنوان واسطه‌های داده عمل می‌کنند.

عنصر <geolocation> یک شیء موقعیت مکانی را برای سایت شما فراهم می‌کند و <usermedia> کل جریان دسترسی به دوربین و میکروفون را مدیریت می‌کند. این عنصر قصد کاربر را ثبت می‌کند، اعلان مرورگر را مدیریت می‌کند و شیء MediaStream را به برنامه تحویل می‌دهد. این تغییر نیاز به فراخوانی‌های جداگانه getUserMedia() را از بین می‌برد، پیاده‌سازی را ساده می‌کند و تضمین می‌کند که مرورگر سیگنال قابل اعتمادی از قصد کاربر دارد.

اعتبارسنجی مفهوم

داده‌های دنیای واقعی از آزمایش اولیه Origin نشان داد که کنترل‌های مجوز درون‌زمینه‌ای و کنترل‌های مجوز اعمال‌شده توسط کاربر، میزان موفقیت کاربر را به طور قابل توجهی بهبود می‌بخشند.

• سیسکو مشاهده کرد که کاربرانی که در ابتدا مجوزها را رد می‌کردند، تنها حدود ۱۰٪ احتمال داشت که با استفاده از دستورالعمل‌های قدیمی، مجوزها را با موفقیت اعطا کنند، اما این میزان با عنصر جدید به بیش از ۶۵٪ افزایش یافت.
• زوم با استفاده از این عنصر برای هدایت کاربران در طول بازیابی، کاهش ۴۶.۹ درصدی در خطاهای ضبط دوربین یا میکروفون، مانند مسدودکننده‌های سطح سیستم، را گزارش کرد.
• گوگل میت شاهد کاهش ۱۷ درصدی در بازخورد «کار نکردن میکروفون» و افزایش ۱۳۱ درصدی در بازیابی موفقیت‌آمیز مجوز برای کاربرانی بود که در ابتدا دسترسی را رد کرده بودند.

چرا از عنصر <usermedia> استفاده کنیم؟

عنصر <usermedia> با تکیه بر الگوهای ایجاد شده توسط <geolocation> ، چالش‌های اصلی درخواست قابلیت‌های قدرتمند را برطرف می‌کند. درخواست‌های رسانه‌ای به فراخوانی‌های ضروری جاوا اسکریپت متکی هستند که اغلب باعث ایجاد پیام‌های خارج از متن می‌شوند. اگر به طور تصادفی سایت خود را مسدود کنید، معکوس کردن این تصمیم نیاز به پیمایش عمیق در تنظیمات مرورگر دارد، یک "حفره مجوز" که اغلب منجر به رها شدن ویژگی‌ها می‌شود.

عنصر <usermedia> با ارائه موارد زیر این مشکلات را حل می‌کند:

• هدف و زمان‌بندی واضح: از آنجا که این اعلان فقط پس از لمس فیزیکی روی یک عنصر تحت کنترل مرورگر ظاهر می‌شود، یک سیگنال قابل اعتماد از هدف ارائه می‌دهد. این به مرورگر اجازه می‌دهد تا از بلوک‌های خاموش خودکار که اغلب باعث عدم موفقیت درخواست‌های معمول ناشی از اسکریپت می‌شوند، عبور کند.
• بازیابی ساده: اگر دسترسی قبلاً رد شده بود، ضربه زدن روی این عنصر، یک جریان بازیابی تخصصی را فعال می‌کند که به شما امکان می‌دهد دوربین یا میکروفون خود را فوراً در صفحه، بدون پیمایش تنظیمات پیچیده مرورگر، دوباره فعال کنید.
• دسترسی مستقیم به جریان داده: این عنصر به عنوان یک واسطه داده، جریان رسانه را مستقیماً در معرض نمایش قرار می‌دهد. این امر باعث کاهش کد تکراری مورد نیاز برای مدیریت فراخوانی‌های برگشتی و حالت‌های خطا در برنامه شما می‌شود.

ویژگی	getUserMedia() در جاوا اسکریپت	عنصر <usermedia> در HTML
فعال کردن رویداد برای درخواست مجوز	اجرای اسکریپت دستوری ( getUserMedia )	کلیک کاربر روی عنصر تحت کنترل مرورگر
نقش مرورگر	بر اساس وضعیت و روش‌های اکتشافی، prompt را تعیین می‌کند.	به عنوان واسطه داده عمل می‌کند (رضایت و تحویل جریان را مدیریت می‌کند)
مسئولیت سایت	فراخوانی دستی API جاوا اسکریپت، مدیریت فراخوانی‌های برگشتی و مدیریت خطاها	به رویداد stream گوش دهید و به ویژگی stream دسترسی پیدا کنید
هدف اصلی	دسترسی اولیه به دوربین و میکروفون	دسترسی به استریم، مدیریت مجوزها و بازیابی با کمترین میزان اصطکاک

پیاده‌سازی

ادغام این عنصر به طور قابل توجهی به کدهای تکراری کمتری نسبت به API قدیمی جاوا اسکریپت نیاز دارد. با پیروی از الگوی اعلانی ایجاد شده توسط عنصر <geolocation> ، می‌توانید برچسب <usermedia> را به HTML خود اضافه کنید و الزامات سخت‌افزاری را با متد setConstraints() پیکربندی کنید.

نکته: این سند فرض را بر پشتیبانی از عنصر <usermedia> می‌گذارد. برای الگوی جایگزین، به بخش الگوی جایگزین سفارشی در ادامه‌ی این سند مراجعه کنید.

<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 : یک کنترل‌کننده‌ی رویداد که هنگام شکست تلاش برای دریافت جریان (stream) اجرا می‌شود.
• oncancel : یک کنترل‌کننده رویداد که زمانی فعال می‌شود که کاربر در حین دریافت مجوز، درخواست مجوز را لغو یا رد می‌کند.

محدودیت‌های استایل‌دهی

برای اطمینان از اعتماد کاربر و جلوگیری از الگوهای طراحی فریبنده، عنصر <usermedia> همان محدودیت‌های سبک‌دهی سختگیرانه‌ای را که سایر عناصر قابلیت اعمال می‌کنند، اعمال می‌کند:

• خوانایی: مرورگر رنگ‌های متن و پس‌زمینه را برای کنتراست کافی (حداقل ۳:۱) بررسی می‌کند تا اطمینان حاصل شود که درخواست همیشه قابل خواندن است. شما باید کانال آلفا ( opacity ) را روی 1 تنظیم کنید تا از شفافیت فریبنده عنصر جلوگیری شود.
• اندازه و فاصله‌گذاری: مرورگر حداقل و حداکثر محدودیت‌ها را برای width ، height و font-size اعمال می‌کند. حاشیه‌های منفی یا فاصله‌های بیرونی را غیرفعال می‌کند تا از مبهم شدن بصری عنصر جلوگیری شود.
• یکپارچگی بصری: مرورگر اثرات تحریف را محدود می‌کند. برای مثال، transform فقط از ترجمه‌های دوبعدی و مقیاس‌بندی متناسب پشتیبانی می‌کند.
• شبه کلاس‌های CSS: این عنصر از استایل‌دهی مبتنی بر حالت، مانند :granted (که پس از فعال شدن مجوز و دریافت جریان فعال می‌شود) و همچنین حالت‌های تعاملی استاندارد مانند :hover و :active پشتیبانی می‌کند.

استراتژی بهبود و مهاجرت تدریجی

با پیروی از الگوی طراحی ایجاد شده توسط <geolocation> ، عنصر <usermedia> طوری ساخته شده است که به طور مطلوبی تغییر شکل دهد. مرورگرهایی که از این عنصر پشتیبانی نمی‌کنند، آن را به عنوان یک HTMLUnknownElement در نظر می‌گیرند و فرزندان آن را رندر می‌کنند. این به شما امکان می‌دهد یک تجربه جایگزین برای همه کاربران فراهم کنید.

الگوی جایگزین سفارشی

تشخیص پشتیبانی از عنصر <usermedia> در جاوا اسکریپت به صورت برنامه‌نویسی:

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

از این منطق تشخیص برای اضافه کردن یک دکمه استاندارد درون عنصر <usermedia> استفاده کنید تا API قدیمی getUserMedia() را فعال کند:

<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> را در طول نسخه آزمایشی Origin ادغام کرده‌اند، انتقال به <usermedia> به گونه‌ای طراحی شده است که حداقل زمان ممکن باشد.

1. به‌روزرسانی تگ: <permission type="camera microphone"> را با <usermedia> جایگزین کنید تا مطمئن شوید که تمام انتخابگرهایی که عناصر <permission> قبلی را هدف قرار می‌دهند، به‌روزرسانی می‌شوند تا از عنصر <usermedia> استفاده کنند.
2. تشخیص ویژگی: بررسی‌ها را از HTMLPermissionElement به HTMLUserMediaElement به‌روزرسانی کنید

نقشه راه پیش رو

در حالی که عنصر <usermedia> درخواست‌های ترکیبی صدا و تصویر را مدیریت می‌کند، نقشه راه برای عناصر قابلیت آینده شامل موارد زیر است:

• <camera> : به طور خاص روی سناریوهای فقط ویدیویی تمرکز دارد.
• <microphone> : به طور خاص روی سناریوهای فقط صوتی تمرکز دارد.

می‌توانید ببینید که چگونه این عناصر خاصِ قابلیت، به توسعه‌دهندگان کمک می‌کنند تا تجربیات رسانه‌ای شهودی‌تر و قابل اعتمادتری بسازند. برای اطلاعات بیشتر، به راهنمای فنی عناصر قابلیت مراجعه کنید.

لینک‌های مرتبط

• عناصر قابلیت: عنصر <usermedia> توضیح‌دهنده
• مشخصات
• معرفی عنصر <geolocation> در HTML