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

François Beaufort

Elad Alon

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

چند مثال، مزایای آن را نشان می‌دهد.

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

مثال ۲: اثر «تالار آینه‌ها» زمانی رخ می‌دهد که یک سطح گرفته شده به محلی که در آن گرفته شده است، رندر می‌شود. نکته قابل توجه این است که اگر کاربر تصمیم بگیرد از تبی که در آن تماس کنفرانس ویدیویی در حال انجام است، عکس بگیرد و برنامه وب کنفرانس ویدیویی یک پیش‌نمایش محلی ارائه دهد، این اثر وحشتناک مشاهده خواهد شد. با استفاده از Capture Handle، می‌توان خود-عکسبرداری را شناسایی و کاهش داد؛ به عنوان مثال، با سرکوب پیش‌نمایش محلی توسط برنامه وب.

درباره دسته ضبط

دسته‌ی ضبط از دو بخش مکمل تشکیل شده است:

• برنامه‌های وب ضبط‌شده می‌توانند با استفاده از navigator.mediaDevices.setCaptureHandleConfig() اطلاعات خاصی را در معرض برخی از منابع قرار دهند.
• سپس برنامه‌های وبِ در حال ضبط می‌توانند آن اطلاعات را با getCaptureHandle() روی اشیاء MediaStreamTrack بخوانند.

سمت اسیر شده

برنامه‌های وب می‌توانند اطلاعات را در اختیار برنامه‌های وبِ در حال ضبط قرار دهند. این کار با فراخوانی navigator.mediaDevices.setCaptureHandleConfig() با یک شیء اختیاری متشکل از این اعضا انجام می‌شود:

• handle : می‌تواند هر رشته‌ای تا سقف ۱۰۲۴ کاراکتر باشد.
• exposeOrigin : اگر true ، ممکن است منشأ برنامه وب ضبط شده در معرض برنامه‌های وب ضبط شده قرار گیرد.
• permittedOrigins : مقادیر معتبر عبارتند از (i) یک آرایه خالی، (ii) یک آرایه با آیتم تکی "*" یا (iii) یک آرایه از origins. اگر permittedOrigins شامل یک آیتم تکی "*" باشد، CaptureHandle توسط همه برنامه‌های وب گیرنده قابل مشاهده است. در غیر این صورت، فقط برای برنامه‌های وب گیرنده‌ای که origin آنها در permittedOrigins است، قابل مشاهده است.

مثال زیر نحوه نمایش یک UUID تصادفی تولید شده به عنوان یک هندل و مبدا را برای هر برنامه وبِ در حال ضبط نشان می‌دهد.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

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

گرفتن سمت

برنامه وب ضبط کننده، یک MediaStreamTrack ویدیویی را در خود نگه می‌دارد و می‌تواند اطلاعات مربوط به دسته ضبط را با فراخوانی getCaptureHandle() روی آن MediaStreamTrack بخواند. اگر هیچ دسته ضبطی در دسترس نباشد، یا اگر برنامه وب ضبط کننده مجاز به خواندن آن نباشد، این فراخوانی null برمی‌گرداند. اگر یک دسته ضبط در دسترس باشد و برنامه وب ضبط کننده به permittedOrigins اضافه شده باشد، این فراخوانی یک شیء با اعضای زیر را برمی‌گرداند:

• handle : مقدار رشته‌ای که توسط برنامه وب ضبط شده با navigator.mediaDevices.setCaptureHandleConfig() تنظیم شده است.
• origin : مبدا برنامه وب ضبط شده در صورتی که exposeOrigin روی true تنظیم شده باشد. در غیر این صورت، تعریف نشده است.

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

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

با گوش دادن به رویدادهای "capturehandlechange" در یک شیء MediaStreamTrack تغییرات CaptureHandle رصد کنید. تغییرات زمانی اتفاق می‌افتند که:

• برنامه وب ضبط شده، تابع navigator.mediaDevices.setCaptureHandleConfig() را فراخوانی می‌کند.
• یک پیمایش بین اسنادی در برنامه وب ضبط شده رخ می‌دهد.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

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

همکاری بین برنامه‌های وب ضبط‌شده و ضبط‌شده امروزه از نظر تئوری امکان‌پذیر است، مثلاً با تعبیه «پیکسل‌های جادویی» در برنامه وب ضبط‌شده یا تعبیه کدهای QR در جریان ویدیو. Capture Handle مکانیزمی ساده‌تر، قابل اعتمادتر و امن‌تر ارائه می‌دهد. همچنین به برنامه وب ضبط‌شده اجازه می‌دهد مخاطب را انتخاب کند - یا مبدأها را انتخاب کند یا کل وب را.

توجه داشته باشید که navigator.mediaDevices.setCaptureHandleConfig() فقط برای فریم‌های اصلی سطح بالا در زمینه‌های مرور امن (فقط HTTPS) در دسترس است.

نمونه

شما می‌توانید با اجرای نمونه ، با Capture Handle کار کنید.

دموها

برخی از نسخه‌های نمایشی در آدرس زیر موجود است:

• کنترل از راه دور
• تشخیص خود-ضبطی

تشخیص ویژگی

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

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

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

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

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

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

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

بازخورد

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

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

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

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

مشکل در اجرا؟

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

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

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

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

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

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

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

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

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