صفحات وب را به نمایشگرهای پیوست ثانویه ارائه دهید

François Beaufort

Chrome 66 به صفحات وب اجازه می دهد تا از نمایشگر پیوست ثانویه از طریق Presentation API و کنترل محتویات آن از طریق Presentation Receiver API استفاده کنند.

پس زمینه

تا به حال، توسعه‌دهندگان وب می‌توانستند تجربیاتی ایجاد کنند که در آن کاربر محتوای محلی را در Chrome مشاهده کند که با محتوایی که در یک نمایشگر از راه دور می‌دید متفاوت است، در حالی که همچنان می‌توانست آن تجربه را به صورت محلی کنترل کند. به عنوان مثال می‌توان به مدیریت یک صف پخش در youtube.com در حین پخش ویدیوها در تلویزیون، یا دیدن یک حلقه اسلاید با یادداشت‌های بلندگو در لپ‌تاپ در حالی که ارائه تمام صفحه در یک جلسه Hangout نشان داده می‌شود، اشاره کرد.

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

یک صفحه ارائه دهید

اجازه دهید نحوه استفاده از Presentation API برای ارائه یک صفحه وب در صفحه نمایش پیوست ثانویه خود را به شما آموزش دهم. نتیجه نهایی در https://googlechrome.github.io/samples/presentation-api/ موجود است.

ابتدا، یک شیء PresentationRequest جدید ایجاد می کنیم که حاوی URL است که می خواهیم در نمایشگر پیوست ثانویه ارائه دهیم.

const presentationRequest = new PresentationRequest('receiver.html');

In this article, I won’t cover use cases where the parameter passed to
`PresentationRequest` can be an array like `['cast://foo’, 'apple://foo',
'https://example.com']` as this is not relevant there.

We can now monitor presentation display availability and toggle a "Present"
button visibility based on presentation displays availability. Note that we can
also decide to always show this button.

<aside class="caution"><b>Caution:</b> The browser may use more energy while the <code>availability</code> object is alive
and actively listening for presentation display availability changes. Please
use it with caution in order to save energy on mobile.</aside>

```js
presentationRequest.getAvailability()
  .then(availability => {
    console.log('Available presentation displays: ' + availability.value);
    availability.addEventListener('change', function() {
      console.log('> Available presentation displays: ' + availability.value);
    });
  })
  .catch(error => {
    console.log('Presentation availability not supported, ' + error.name + ': ' +
        error.message);
  });

نمایش اعلان نمایش ارائه به یک حرکت کاربر مانند کلیک بر روی یک دکمه نیاز دارد. بنابراین بیایید با کلیک روی دکمه presentationRequest.start() فراخوانی کنیم و منتظر بمانیم تا زمانی که کاربر نمایشگر ارائه را انتخاب کرد (مثلاً یک صفحه نمایش پیوست ثانویه در مورد استفاده ما) حل شود.

function onPresentButtonClick() {
  presentationRequest.start()
  .then(connection => {
    console.log('Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    console.log(error);
  });
}

در صورتی که به شبکه‌ای متصل باشید که آنها را تبلیغ می‌کند، فهرستی که به کاربر ارائه می‌شود ممکن است شامل نقاط پایانی راه دور مانند دستگاه‌های Chromecast نیز باشد. توجه داشته باشید که نمایشگرهای آینه ای در لیست نیستند. به http://crbug.com/840466 مراجعه کنید.

وقتی وعده حل شد، صفحه وب در URL شیء PresentationRequest به نمایشگر انتخابی ارائه می شود. و voilà!

اکنون می‌توانیم جلوتر برویم و رویدادهای "بستن" و "خاتمه" را مطابق شکل زیر نظارت کنیم. توجه داشته باشید که امکان اتصال مجدد به یک presentationConnection "بسته" اتصال با presentationRequest.reconnect(presentationId) وجود دارد که presentationId شناسه شیء presentationRequest قبلی است.

function onCloseButtonClick() {
  // Disconnect presentation connection but will allow reconnection.
  presentationConnection.close();
}

presentationConnection.addEventListener('close', function() {
  console.log('Connection closed.');
});


function onTerminateButtonClick() {
  // Stop presentation connection for good.
  presentationConnection.terminate();
}

presentationConnection.addEventListener('terminate', function() {
  console.log('Connection terminated.');
});

با صفحه ارتباط برقرار کنید

حالا شما به این فکر می کنید که خوب است، اما چگونه می توانم پیام ها را بین صفحه کنترلر خود (آنی که به تازگی ایجاد کرده ایم) و صفحه گیرنده (آنی که به شی PresentationRequest ارسال کرده ایم) منتقل کنم؟

ابتدا، بیایید اتصالات موجود در صفحه گیرنده را با navigator.presentation.receiver.connectionList بازیابی کنیم و مانند شکل زیر به اتصالات ورودی گوش دهیم.

// Receiver page

navigator.presentation.receiver.connectionList
.then(list => {
  list.connections.map(connection => addConnection(connection));
  list.addEventListener('connectionavailable', function(event) {
    addConnection(event.connection);
  });
});

function addConnection(connection) {

  connection.addEventListener('message', function(event) {
    console.log('Message: ' + event.data);
    connection.send('Hey controller! I just received a message.');
  });

  connection.addEventListener('close', function(event) {
    console.log('Connection closed!', event.reason);
  });
}

اتصالی که پیامی را دریافت می کند، یک رویداد "پیام" را ایجاد می کند که می توانید به آن گوش دهید. پیام می تواند یک رشته، یک Blob، یک ArrayBuffer یا یک ArrayBufferView باشد. ارسال آن به سادگی فراخوانی connection.send(message) از صفحه کنترل کننده یا صفحه گیرنده است.

// Controller page

function onSendMessageButtonClick() {
  presentationConnection.send('Hello!');
}

presentationConnection.addEventListener('message', function(event) {
  console.log('I just received ' + event.data + ' from the receiver.');
});

با نمونه در https://googlechrome.github.io/samples/presentation-api/ بازی کنید تا از نحوه عملکرد آن مطلع شوید. مطمئنم شما هم مثل من از این کار لذت خواهید برد.

نمونه ها و دموها

نمونه رسمی کروم را که برای این مقاله استفاده کرده ایم، بررسی کنید.

من نسخه ی نمایشی تعاملی Photowall را نیز توصیه می کنم. این برنامه وب به چندین کنترلر اجازه می دهد تا به طور مشترک یک نمایش اسلاید عکس را بر روی یک صفحه نمایش ارائه دهند. کد در https://github.com/GoogleChromeLabs/presentation-api-samples موجود است.

یه چیز دیگه

Chrome دارای منوی مرورگر «Cast» است که کاربران می‌توانند در هر زمانی هنگام بازدید از یک وب‌سایت، آن را فراخوانی کنند. اگر می‌خواهید نمایش پیش‌فرض این منو را کنترل کنید، سپس navigator.presentation.defaultRequest را به یک شیء سفارشی presentationRequest که قبلاً ایجاد شده است اختصاص دهید.

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

نکات توسعه دهنده

برای بررسی صفحه گیرنده و رفع اشکال آن، به صفحه داخلی chrome://inspect بروید، «سایر» را انتخاب کنید و روی پیوند «بازرسی» در کنار URL ارائه شده فعلی کلیک کنید.

همچنین ممکن است بخواهید صفحه داخلی chrome://media-router-internals برای غواصی در فرآیندهای کشف داخلی/در دسترس بودن بررسی کنید.

بعدش چی

از Chrome 66، سیستم عامل‌های ChromeOS، Linux و Windows پشتیبانی می‌شوند. پشتیبانی مک بعداً ارائه خواهد شد.

منابع

• وضعیت ویژگی کروم: https://www.chromestatus.com/features#presentation%20api
• اشکالات پیاده سازی: https://crbug.com/?q=component:Blink>PresentationAPI
• مشخصات API ارائه: https://w3c.github.io/presentation-api/
• مشکلات مشخصات: https://github.com/w3c/presentation-api/issues