اشتراک گذاری برگه بهتر با Region Capture

François Beaufort

Elad Alon

منتشر شده: ۲۸ اکتبر ۲۰۲۵، آخرین به‌روزرسانی: ۲۱ ژوئن ۲۰۲۲

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

برنامه‌های وب قبلاً می‌توانستند آهنگ‌های ویدیویی را به صورت «دستی» برش دهند. یعنی، برنامه‌های وب می‌توانستند تک تک فریم‌ها را مستقیماً دستکاری کنند. این روش نه قوی بود و نه کارآمد. ضبط منطقه‌ای این کاستی‌ها را برطرف می‌کند. برنامه وب اکنون می‌تواند به مرورگر دستور دهد که کار را از طرف آن انجام دهد.

درباره ضبط منطقه

بنابراین شما یک وب‌سایت با Dynamic Content™ ایجاد کرده‌اید. این بهترین برنامه وب تا به حال است و مردم نمی‌توانند از استفاده از آن دست بکشند، اغلب به صورت مشارکتی. گام بعدی احتمالی، تعبیه قابلیت‌های کنفرانس مجازی است. شما تصمیم می‌گیرید که با آن همراه شوید. شما با یک ارائه‌دهنده خدمات کنفرانس ویدیویی موجود همکاری می‌کنید و برنامه وب آنها را به عنوان یک iframe با منشاء متقابل تعبیه می‌کنید. برنامه وب کنفرانس ویدیویی، تب فعلی را به عنوان یک آهنگ ویدیویی ضبط می‌کند و آن را به شرکت‌کنندگان از راه دور منتقل می‌کند.

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

پس بیایید از Region Capture استفاده کنیم. یک Element در صفحه شما وجود دارد، شاید یک <div> که شامل محتوای اصلی است. بیایید آن را mainContentArea بنامیم. شما می‌خواهید برنامه وب کنفرانس ویدیویی، ناحیه‌ای را که توسط کادر محصورکننده این عنصر تعریف شده است، ضبط و از راه دور به اشتراک بگذارد. بنابراین شما یک CropTarget از mainContentArea استخراج می‌کنید. شما این CropTarget به برنامه وب کنفرانس ویدیویی ارسال می‌کنید. پس از برش دادن مسیر ویدیویی با استفاده از این CropTarget ، فریم‌های روی آن مسیر اکنون فقط از پیکسل‌هایی تشکیل شده‌اند که در کادر محصورکننده mainContentArea قرار می‌گیرند. اگر mainContentArea اندازه، شکل یا مکان خود را تغییر دهد، مسیر ویدیویی بدون نیاز به هیچ ورودی اضافی از هیچ یک از برنامه‌های وب، دنبال می‌شود.

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

شما با فراخوانی CropTarget.fromElement() و با عنصر انتخابی خود به عنوان ورودی، یک CropTarget در برنامه وب خود تعریف می‌کنید.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

شما CropTarget را به برنامه وب کنفرانس ویدیویی ارسال می‌کنید.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

برنامه وب کنفرانس ویدیویی از مرورگر می‌خواهد که با فراخوانی تابع cropTo() روی مسیر ویدیوی خودضبط‌شده با هدف برش دریافتی از برنامه وب اصلی، مسیر را تا ناحیه تعریف‌شده توسط CropTarget برش دهد.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

و تمام! (or: و تمام! تمام شد! )

شیرجه عمیق

تشخیص ویژگی

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

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

استخراج یک CropTarget

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

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

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

برداشت

هنگام ضبط تب، آهنگ ویدیویی به عنوان یک BrowserCaptureMediaStreamTrack نمونه‌سازی می‌شود که زیرکلاسی از MediaStreamTrack است. این زیرکلاس cropTo() را در معرض نمایش قرار می‌دهد. برای شروع برش تا خطوط mainContentArea (عنصری که cropTarget از آن مشتق شده است) track.cropTo(cropTarget) را فراخوانی کنید.

در صورت موفقیت، Promise زمانی حل خواهد شد که بتوان تضمین کرد که تمام فریم‌های ویدیویی بعدی شامل پیکسل‌هایی باشند که در کادر محصورکننده mainContentArea قرار می‌گیرند.

در صورت عدم موفقیت، Promise رد خواهد شد. این اتفاق در صورت وجود شرایط زیر رخ خواهد داد:

• CropTarget از عنصری مشتق شده است که دیگر وجود ندارد.
• این مسیر دارای کلون است. (به شماره ۱۵۰۹۴۱۸ مراجعه کنید.)
• قطعه‌ی فعلی یک قطعه‌ی ویدیوییِ ضبط‌شده توسط خودِ نوازنده نیست؛ به پایین مراجعه کنید.

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

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

برای بازگشت به حالت برش نخورده، تابع cropTo() با null فراخوانی کنید.

// Stop cropping.
await track.cropTo(null);

محتوای مسدودکننده و مسدودشده

برای ثبت منطقه‌ای، فقط موقعیت و اندازه هدف مهم است، نه شاخص z . پیکسل‌هایی که هدف را می‌پوشانند ثبت می‌شوند. قسمت‌های مسدود شده هدف ثبت نمی‌شوند.

این نتیجه‌ی منطقیِ «ضبط منطقه‌ای» است که اساساً برش تصویر است. یک جایگزین، که API آینده‌ی خودش را خواهد داشت، «ضبط در سطح عنصر» است؛ یعنی فقط پیکسل‌های مرتبط با هدف را، صرف نظر از انسدادها، ضبط می‌کند. چنین API مجموعه‌ی متفاوتی از الزامات امنیتی و حریم خصوصی نسبت به برش ساده دارد.

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

قابلیت ضبط منطقه‌ای به یک برنامه وب که از قبل تمام پیکسل‌های موجود در تب را مشاهده می‌کند، اجازه می‌دهد تا داوطلبانه برخی از آن پیکسل‌ها را حذف کند. این قابلیت کاملاً ایمن است، زیرا هیچ اطلاعات جدیدی نمی‌تواند به دست آید.

ضبط منطقه‌ای می‌تواند برای محدود کردن اطلاعاتی که به شرکت‌کنندگان از راه دور ارسال می‌شود، استفاده شود. برای مثال، شاید بخواهید برخی از اسلایدها را به اشتراک بگذارید، اما یادداشت‌های سخنران خود را نه.

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

کروم یک حاشیه آبی دور لبه‌های تب‌های گرفته شده می‌کشد. هنگام برش، کروم معمولاً حاشیه آبی دور هدف برش داده شده می‌کشد.

نسخه آزمایشی

شما می‌توانید با اجرای نسخه آزمایشی، با Region Capture کار کنید.

پشتیبانی مرورگر

قابلیت ثبت منطقه فقط از کروم ۱۰۴ روی دسکتاپ در دسترس است.

قدم بعدی چیست؟

در اینجا نگاهی اجمالی به آنچه در آینده نزدیک انتظار می‌رود و اشتراک‌گذاری صفحه نمایش در وب را بهبود می‌بخشد، می‌اندازیم:

• قابلیت ضبط منطقه‌ای از ضبط تب‌های دیگر پشتیبانی می‌کند.
• فوکوس شرطی به برنامه‌ی وبِ در حال ضبط اجازه می‌دهد تا به مرورگر دستور دهد که یا فوکوس را به سطح نمایشگر ضبط‌شده تغییر دهد یا از چنین تغییر فوکوسی اجتناب کند.
• ممکن است یک API ضبط در سطح عنصر ارائه شود.

بازخورد

تیم کروم و جامعه استانداردهای وب می‌خواهند از تجربیات شما در مورد Region Capture مطلع شوند.

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

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

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

مشکل در اجرا؟

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

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

نمایش پشتیبانی

آیا قصد دارید از Region Capture استفاده کنید؟ حمایت عمومی شما به تیم کروم کمک می‌کند تا ویژگی‌ها را در اولویت قرار دهد و به سایر فروشندگان مرورگر نشان می‌دهد که پشتیبانی از آنها چقدر حیاتی است.

یک توییت به @ChromiumDev ارسال کنید و به ما بگویید که کجا و چگونه از آن استفاده می‌کنید.

لینک‌های مفید

• مشخصات
• توضیح دهنده
• بررسی تگ
• اشکال کروم
• ورودی ChromeStatus.com

تقدیرنامه‌ها

با تشکر از جو مدلی برای بررسی این مقاله.