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

François Beaufort

Elad Alon

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

برنامه‌های وب قبلاً می‌توانستند آهنگ‌های ویدیویی را به صورت دستی برش دهند. یعنی برنامه‌های وب می‌توانند مستقیماً تک تک فریم‌ها را دستکاری کنند. این نه قوی بود و نه کارآمد. 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.

و voilà! شما تمام شده اید.

شیرجه عمیق

تشخیص ویژگی

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

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

استخراج CropTarget

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

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

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

برداشت

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

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

در صورت عدم موفقیت، قول رد خواهد شد. این اتفاق می افتد اگر:

• CropTarget در برگه دیگری ساخته شد. (در حال حاضر - با ما همراه باشید.)
• CropTarget از عنصری مشتق شده است که دیگر وجود ندارد.
• آهنگ دارای کلون است. (به شماره 1509418 مراجعه کنید.)
• آهنگ فعلی یک تراک ویدیویی خودگرفت نیست. زیر را ببینید.

متد 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);

محتوای مسدود و مسدود

برای Region Capture، فقط موقعیت و اندازه هدف مهم است، نه z-index . پیکسل های مسدود کننده هدف گرفته می شوند. قسمت های مسدود شده هدف گرفته نمی شود.

این نتیجه حاصل از برداشت منطقه است که اساساً برش است. یک جایگزین، که API آینده خودش خواهد بود، Element-level Capture است. یعنی فقط پیکسل های مرتبط با هدف را بدون در نظر گرفتن انسداد ضبط کنید. چنین API دارای مجموعه ای متفاوت از الزامات امنیتی و حریم خصوصی نسبت به برش ساده است.

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

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

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

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

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

نسخه ی نمایشی

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

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

ضبط منطقه از Chrome 104 فقط روی دسک‌تاپ در دسترس است.

بعدش چی

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

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

بازخورد

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

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

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

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

مشکل در اجرا؟

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

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

نشان دادن حمایت

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

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

لینک های مفید

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

قدردانی

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