Web sayfalarını ikincil eklenmiş ekranlarda sunma

François Beaufort
François Beaufort
GitHub

Chrome 66, web sayfalarının Presentation API üzerinden ikincil bir ekli ekranı kullanmasına ve bu ekranın içeriğini PresentationReceiver API üzerinden kontrol etmesine olanak tanır.

1/2. Kullanıcı ikincil bir ekran seçer
1/2. Kullanıcı ikincil bir ekran seçer
2/2. Web sayfası, önceden seçilen ekrana otomatik olarak sunulur.
2/2. Bir web sayfası, daha önce seçilen ekrana otomatik olarak sunulur

Arka plan

Şu ana kadar web geliştiricileri, kullanıcıların Chrome'da uzaktaki ekranlarda göreceği içerikten farklı yerel içerik göreceği deneyimler oluşturabiliyor ve bu deneyimi yerel olarak kontrol edebilmekteydi. Videolar TV'de oynatılırken youtube.com'da bir oynatma sırasının yönetilmesi veya bir Hangout oturumunda tam ekran sunum gösterilirken dizüstü bilgisayarda konuşmacı notlarının bulunduğu bir slayt filmini görme buna örnek olarak verilebilir.

Bununla birlikte, kullanıcıların ikinci bir ekli ekranda içerik sunmak isteyebileceği senaryolar vardır. Örneğin, konferans salonunda projektör bulunan ve HDMI kablosuyla bağlandığı bir kullanıcı düşünün. Sunuyu uzak bir uç noktaya yansıtmak yerine, kullanıcı slaytları projektör üzerinde tam ekran olarak sunmak ister. Böylece dizüstü bilgisayar ekranı, konuşmacı notları ve slayt kontrolü için kullanılabilir durumda olur. Site yazarı bunu çok temel bir yöntemle destekleyebilir (ör. kullanıcının daha sonra manuel olarak ikincil ekrana sürüklemesi ve tam ekrana ekranı kaplaması gereken yeni bir pencere açma) ancak bu zahmetlidir ve yerel ve uzak sunum arasında tutarsız bir deneyim sunar.

Sayfa göster

İkincil ekli ekranınızda bir web sayfasını sunmak için Presentation API'yi nasıl kullanacağınızı size adım adım açıklayayım. Nihai sonuca https://googlechrome.github.io/samples/presentation-api/ adresinden ulaşabilirsiniz.

İlk olarak, ekli ikincil ekranda sunmak istediğimiz URL'yi içerecek yeni bir PresentationRequest nesnesi oluşturacağız.

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);
  });

Sunu gösterme istemini göstermek için düğmeyi tıklamak gibi bir kullanıcı hareketi gerekir. Şimdi bir düğmeyi tıklayarak presentationRequest.start() numarasını arayalım ve kullanıcı bir sunum ekranı (ör. kullanım alanımızda ikincil ekli ekran) seçtiğinde çözümleme sözünü bekleyelim.

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

Kullanıcıya sunulan liste, reklamını yapan bir ağa bağlıysanız Chromecast cihazlar gibi uzak uç noktaları da içerebilir. Yansıtılmış ekranların listede yer almadığını unutmayın. http://crbug.com/840466 adresine bakın.

Sunu Ekranı Seçici
Sunu Görüntüleme Seçici

Taahhüt çözümlendiğinde, PresentationRequest nesne URL'sindeki web sayfası, seçilen ekrana sunulur. Tebrikler!

Artık daha ileri gidip "kapat" ve "sonlandır" etkinliklerini aşağıda gösterildiği gibi izleyebiliriz. presentationRequest.reconnect(presentationId) ile "kapalı" presentationConnection öğesine yeniden bağlanabileceğinizi unutmayın. Burada presentationId, önceki presentationRequest nesnesinin kimliğidir.

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.');
});

Sayfayla iletişim kurma

Şimdi düşündüğünüzde, güzel ama denetleyici sayfam (az önce oluşturduğumuz) ile alıcı sayfa (PresentationRequest nesnesine ilettiğimiz) arasında mesajları nasıl ileteceğim?

Öncelikle alıcı sayfasındaki navigator.presentation.receiver.connectionList ile mevcut bağlantıları alıp aşağıda gösterildiği gibi gelen bağlantıları dinleyelim.

// 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);
  });
}

Mesaj alan bir bağlantı, dinleyebileceğiniz bir "mesaj" etkinliğini tetikler. Mesaj bir dize, Blob, ArrayBuffer veya ArrayBufferView olabilir. Denetleyici sayfasından veya alıcı sayfasından connection.send(message) işlevini çağırmak yeterlidir.

// Controller page

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

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

Aracın işleyiş şeklini anlamak için https://googlechrome.github.io/samples/presentation-api/ adresindeki örneği inceleyin. Eminim ki bu oyundan benim kadar keyif alacaksınız.

Örnekler ve demolar

Bu makale için kullandığımız resmi Chrome örneğine göz atın.

Etkileşimli Photowall demosunu da öneririm. Bu web uygulaması, birden fazla kumandanın sunu ekranında fotoğraf slayt gösterisini ortaklaşa sunmasını sağlar. Kodu https://github.com/GoogleChromeLabs/presentation-api-samples adresinde bulabilirsiniz.

Photowall demo ekran görüntüsü
Fotoğraf : José Luis Mieza / CC BY-NC-SA 2.0

Bir şey daha var

Chrome'da, kullanıcıların bir web sitesini ziyaret ederken istedikleri zaman çağırabilecekleri bir "Yayınla" tarayıcı menüsü vardır. Bu menü için varsayılan sunuyu kontrol etmek istiyorsanız navigator.presentation.defaultRequest öğesini, daha önce oluşturulan özel presentationRequest nesneye atayın.

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

Geliştiricilere yönelik ipuçları

Alıcı sayfayı incelemek ve hata ayıklamak için dahili chrome://inspect sayfasına gidin, "Diğer"i seçin ve geçerli olarak sunulan URL'nin yanındaki "incele" bağlantısını tıklayın.

Sunu alıcı sayfalarını incele
Sunu alıcı sayfalarını incele

Dahili keşif/kullanılabilirlik süreçlerini ayrıntılı olarak incelemek için dahili chrome://media-router-internals sayfasına da göz atabilirsiniz.

Sırada ne var?

Chrome 66'dan itibaren ChromeOS, Linux ve Windows platformları desteklenmektedir. Mac desteği daha sonra gelecek.

Kaynaklar