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

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

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

  • کروم: 102.
  • لبه: 102.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: پشتیبانی نمی شود.

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

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

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

مثال 2: جلوه "تالار آینه ها" زمانی رخ می دهد که یک سطح گرفته شده به مکان مورد نظر بازگردانده شود. قابل ذکر است، اگر کاربر برگه ای را که در آن تماس ویدئو کنفرانس در حال انجام است را انتخاب کند و برنامه وب کنفرانس ویدئویی یک پیش نمایش محلی ارائه دهد، این اثر وحشتناک مشاهده خواهد شد. با استفاده از Capture Handle، می توان خودگرفتگی را شناسایی و کاهش داد. به عنوان مثال، توسط برنامه وب که پیش نمایش محلی را سرکوب می کند.

تصویر سازی جلوه تالار آینه ها

درباره Capture Handle

Capture Handle از دو بخش مکمل تشکیل شده است:

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

طرف اسیر شده

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

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

مثال زیر نشان می‌دهد که چگونه می‌توان یک UUID به‌طور تصادفی تولید شده را به‌عنوان یک دسته و مبدا را در هر برنامه وب ثبت‌کننده‌ای در معرض دید قرار داد.

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

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

سمت گرفتن

برنامه وب تصویربرداری یک 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...
}

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

  • برنامه وب ضبط شده navigator.mediaDevices.setCaptureHandleConfig() را فرا می خواند.
  • یک پیمایش اسناد متقابل در برنامه وب ضبط شده رخ می دهد. 
videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

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

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

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

نمونه

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

دموها

برخی از دموها در دسترس هستند:

تشخیص ویژگی

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

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

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

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

بعدش چی

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

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

بازخورد

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

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

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

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

مشکل در اجرا؟

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

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

نشان دادن پشتیبانی

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

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

قدردانی

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