از هر عنصری یک جریان ویدیویی بگیرید، از هر عنصری یک جریان ویدیویی بگیرید

فرانسوا بوفور
François Beaufort
GitHub
الاد آلون

با Screen Capture API ، می توانید کل برگه فعلی را ضبط کنید. Element Capture API به شما امکان می دهد یک عنصر HTML خاص را ضبط و ضبط کنید. ضبط کل برگه را به یک زیردرخت DOM خاص تبدیل می کند و فقط فرزندان مستقیم عنصر هدف را می گیرد. به عبارت دیگر، هم محتوای مسدود و هم محتوای مسدود را برش داده و حذف می کند.

چرا از Element Capture استفاده کنیم؟

در نظر گرفتن الزامات یک برنامه ویدئو کنفرانس می تواند به شما کمک کند تا درک کنید که Element Capture کجا مفید است. اگر یک برنامه کنفرانس ویدیویی دارید که به شما امکان می دهد برنامه های شخص ثالث را در یک iframe جاسازی کنید، ممکن است گاهی بخواهید آن iframe را به عنوان یک ویدیو ضبط کنید و آن را به شرکت کنندگان از راه دور منتقل کنید.

اسکرین شات یک تماس ویدئو کنفرانس در کروم.
الاد از یک برنامه شخص ثالث در تماس ویدئو کنفرانس با فرانسوا استفاده می کند.

فراخوانی getDisplayMedia() و اجازه دادن به کاربر برای انتخاب برگه فعلی، کل برگه فعلی را منتقل می کند. این احتمالاً ویدیوی خود افراد را به آنها منتقل می کند. می‌توانید با استفاده از Region Capture آن را برش دهید.

با این حال، اگر ارائه دهنده با برنامه کنفرانس ویدیویی درگیر شود و برخی از محتواها، مانند یک لیست کشویی، روی محتوایی که برای ضبط در نظر گرفته شده است کشیده شود، چه؟

تصویری از یک لیست کشویی که محتوای در نظر گرفته شده برای ضبط را پوشش می دهد.
یک لیست کشویی در بالای محتوای در نظر گرفته شده برای ضبط نمایش داده می شود.

ضبط منطقه به شما کمکی نمی کند. ممکن است بخشی از لیست کشویی در صفحه نمایش شرکت کنندگان از راه دور قابل مشاهده باشد.

اسکرین شات از یک لیست کشویی گرفته شده است.
لیست کشویی Elad در بالای محتوای دریافت شده توسط فرانسوا نمایش داده می شود.

این واقعیت که Region Capture بخش‌هایی از عناصر را به این روش (معروف به محتوای مسدودکننده ) می‌گیرد، مشکلات متعددی ایجاد می‌کند:

  • مسدود کردن محتوا ممکن است مانع از مشاهده محتوایی شود که کاربر قصد دارد به اشتراک بگذارد.
  • مسدود کردن محتوا ممکن است خصوصی باشد (به اعلان‌های گپ فکر کنید).
  • پنهان کردن محتوا ممکن است گیج کننده باشد. (به عنوان مثال، طرح‌بندی مجدد برنامه می‌تواند به طور خلاصه ویدیوهای خود شرکت‌کنندگان از راه دور را روی هدف گرفته شده بیاورد.)

Element Capture API همه این مشکلات را حل می‌کند و به شما اجازه می‌دهد عنصری را که می‌خواهید به اشتراک بگذارید، هدف قرار دهید.

اسکرین شات عنصر هدف بدون لیست کشویی در معرض دید.
فرانسوا لیست کشویی Elad را نمی بیند.

چگونه از Element Capture استفاده کنم؟

captureTarget عنصری در صفحه شما است که حاوی محتوایی است که کاربر مایل به گرفتن آن است. شما می خواهید که برنامه وب کنفرانس ویدیویی captureTarget را بگیرد و آن را با شرکت کنندگان از راه دور به اشتراک بگذارد. بنابراین شما یک RestrictionTarget از captureTarget بدست می آورید. پس از محدود کردن تراک ویدیویی با استفاده از این RestrictionTarget ، فریم‌های آن آهنگ ویدیویی اکنون فقط از پیکسل‌هایی تشکیل می‌شوند که بخشی از captureTarget و فرزندان مستقیم DOM آن هستند.

اگر captureTarget اندازه، شکل یا مکان را تغییر دهد، آهنگ ویدیویی بدون نیاز به ورودی اضافی از هیچ یک از برنامه‌های وب دنبال می‌شود. مسدود کردن محتوایی که ظاهر می شود، ناپدید می شود یا در اطراف حرکت می کند، به طور مشابه نیاز به درمان خاصی ندارد.

این مراحل را دوباره مرور کنید:

با اجازه دادن به کاربر برای گرفتن برگه فعلی شروع کنید.

// Ask the user for permission to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
 preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

با فراخوانی RestrictionTarget.fromElement() با عنصر انتخابی خود به عنوان ورودی، یک RestrictionTarget تعریف کنید.

// Associate captureTarget with a new RestrictionTarget
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

سپس restrictTo() در آهنگ ویدیو با RestrictionTarget به عنوان ورودی فراخوانی کنید. پس از رفع آخرین وعده، تمام فریم های بعدی محدود می شوند.

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

// Enjoy! Transmit remotely.

شیرجه عمیق

تشخیص ویژگی

برای بررسی اینکه آیا RestrictionTarget.fromElement() پشتیبانی می‌شود، از:

if ("RestrictionTarget" in self && "fromElement" in RestrictionTarget) {
  // Deriving a restriction target is supported.
}

یک RestrictionTarget استخراج کنید

روی عنصری به نام captureTarget تمرکز کنید. برای استخراج RestrictionTarget از آن، RestrictionTarget.fromElement(captureTarget) را فراخوانی کنید. در صورت موفقیت، Promise برگشتی با یک شی RestrictionTarget جدید حل می شود. در غیر این صورت اگر تعداد نامعقولی از اشیاء RestrictionTarget ضرب کرده باشید رد می شود.

const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

برخلاف یک عنصر، یک شی RestrictionTarget قابل سریال‌سازی است. برای مثال، می‌توان آن را با استفاده از Window.postMessage() به سند دیگری ارسال کرد.

محدود کردن

هنگام گرفتن یک برگه، آهنگ ویدیویی restrictTo() را نشان می دهد. هنگام گرفتن برگه فعلی، فراخوانی restrictTo() با null یا هر RestrictionTarget مشتق شده از یک عنصر در برگه فعلی معتبر است.

فراخوانی برای restrictTo(restrictionTarget) تراک ویدئو را به تصویری از captureTarget تغییر می دهد، گویی که به خودی خود، مستقل از بقیه DOM کشیده شده است. تمامی فرزندان captureTarget نیز دستگیر می شوند. خواهر و برادر captureTarget از ضبط حذف می شوند. نتیجه این است که هر فریمی که در مسیر ارائه می‌شود به نظر می‌رسد که در خطوط captureTarget بریده شده است، و هر محتوای مسدود و مسدود شده حذف می‌شود.

// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);

فراخوانی برای restrictTo(null) آهنگ را به حالت اولیه باز می گرداند.

// Stop restricting.
await track.restrictTo(null);

در صورت موفقیت آمیز بودن فراخوانی به restrictTo() ، Promise برگشتی زمانی حل می شود که بتوان تضمین کرد که تمام فریم های ویدیویی بعدی به captureTarget محدود می شوند.

در صورت عدم موفقیت، قول رد می شود. فراخوانی ناموفق به restrictTo() به یکی از دلایل زیر خواهد بود:

  • اگر restrictionTarget در برگه‌ای غیر از برگه‌ای که ضبط می‌شود، ایجاد شده باشد. (توجه داشته باشید که با استفاده از دکمه «به‌جای اشتراک‌گذاری این برگه»، کاربران می‌توانند هر زمان که بخواهند برگه را تغییر دهند.)
  • اگر restrictionTarget از عنصری مشتق شده باشد که دیگر وجود ندارد.
  • اگر آهنگ دارای کلون باشد. (به شماره 1509418 مراجعه کنید.)
  • اگر آهنگ فعلی یک تراک ویدیویی خودگرفته نیست.
  • اگر عنصری که restrictionTarget از آن مشتق شده است برای محدودیت واجد شرایط نباشد.

ملاحظات خودگرفتن

هنگامی که یک برنامه getDisplayMedia() را فراخوانی می کند و کاربر انتخاب می کند که برگه خود برنامه را بگیرد، ما آن را "self-capture" می نامیم.

متد restrictTo() در هر تراک ویدیویی که با زبانه ضبط می‌شود، نمایش داده می‌شود، و نه فقط برای خودگرفتن. اما Element Capture فعلاً فقط برای self-capture فعال است. بنابراین توصیه می شود قبل از تلاش برای محدود کردن مسیر، بررسی کنید که آیا کاربر برگه فعلی را انتخاب کرده است. این را می توان با استفاده از Capture Handle انجام داد. همچنین ممکن است از مرورگر بخواهید تا با استفاده از preferCurrentTab کاربر را به سمت عکسبرداری از خود سوق دهد.

شفافیت

فریم های ویدیویی که برنامه از طریق getDisplayMedia() دریافت می کند شامل کانال آلفا نمی شود. اگر یک برنامه یک هدف جذب تا حدی شفاف تعیین کند، حذف کانال آلفا پیامدهای احتمالی دارد:

  • رنگ ها ممکن است تغییر کنند عناصر هدف نیمه شفاف که روی پس‌زمینه روشن کشیده شده‌اند، ممکن است با حذف کانال آلفا تیره‌تر به نظر برسند، و آن‌هایی که روی پس‌زمینه تیره کشیده شده‌اند، ممکن است روشن‌تر به نظر برسند.
  • رنگ‌هایی که وقتی کانال آلفا روی حداکثر تنظیم شده بود برای کاربر نامرئی یا نامحسوس بودند، پس از حذف کانال آلفا ظاهر می‌شوند. به عنوان مثال، اگر بخش های شفاف دارای کد RGBA rgba(0, 0, 0, 0) باشند، این می تواند منجر به ایجاد مناطق سیاه غیرمنتظره در فریم های گرفته شده شود.
تصویری از نتیجه هدف گرفتن شفاف غیر مستطیلی.
جریان ویدیویی هدف ضبط شفاف غیر مستطیلی (راست) یک مستطیل پس زمینه سیاه است که حاوی یک دایره آبی مات است.

اهداف تصرف نادرست

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

یکی از ملاحظات مهم برای اطمینان از واجد شرایط بودن عنصر برای محدودیت، این است که باید زمینه انباشتگی خود را تشکیل دهد. برای اطمینان از این امر، می‌توانید ویژگی CSS جداسازی را مشخص کنید و آن را در isolate قرار دهید.

<div id="captureTarget" style="isolation: isolate;"></iframe>

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

فعال کردن ضبط عنصر

Element Capture API در Chrome روی دسکتاپ پشت پرچم Element Capture موجود است و می‌توان آن را در chrome://flags/#element-capture فعال کرد.

این ویژگی همچنین در حال ورود به نسخه آزمایشی اصلی از Chrome 121 در دسک‌تاپ است که به توسعه‌دهندگان اجازه می‌دهد این ویژگی را برای بازدیدکنندگان سایت‌های خود فعال کنند تا داده‌های کاربران واقعی را جمع‌آوری کنند. برای اطلاعات بیشتر در مورد آزمایش‌های مبدأ، به شروع کار با آزمایش‌های مبدا مراجعه کنید.

امنیت و حریم خصوصی

برای درک معاوضه‌های امنیتی، بخش خصوصیات و ملاحظات امنیتی در مشخصات Element Capture را بررسی کنید.

مرورگر کروم یک حاشیه آبی در اطراف لبه‌های برگه‌های گرفته شده می‌کشد.

نسخه ی نمایشی

با اجرای دمو در Glitch می توانید با Element Capture بازی کنید. حتماً کد منبع را بررسی کنید .

بازخورد

تیم Chrome و انجمن استانداردهای وب می‌خواهند در مورد تجربیات شما با Element Capture بشنوند.

در مورد طراحی به ما بگویید

آیا چیزی در مورد Region Capture وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ یا آیا روش ها یا ویژگی هایی وجود دارد که برای اجرای ایده خود به آنها نیاز دارید؟ سوال یا نظری در مورد مدل امنیتی دارید؟

  • یک مشکل مشخصات را در مخزن GitHub ثبت کنید یا افکار خود را به یک مشکل موجود اضافه کنید.

مشکل در اجرا؟

آیا اشکالی در پیاده سازی کروم پیدا کردید؟ یا اجرا با مشخصات متفاوت است؟

  • یک اشکال را در https://new.crbug.com ثبت کنید. حتماً تا جایی که می توانید جزئیات و دستورالعمل های ساده را برای بازتولید درج کنید. Glitch برای به اشتراک گذاری سریع و آسان تکرارها عالی عمل می کند.

قدردانی ها

عکس پل اسکوروپسکاس در Unsplash