Web sayfalarını ikincil eklenmiş ekranlarda sunma

Furkan
François Beaufort
GitHub

Chrome 66, web sayfalarının Sunum API'si aracılığıyla ikincil bir ekli ekran kullanmasına ve içeriğini Sunum Alıcı API'si aracılığıyla kontrol etmesine olanak tanır.

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

Arka plan

Şimdiye kadar web geliştiricileri, kullanıcıların Chrome'daki uzaktan ekranda gördükleri içerikten farklı yerel içerikler göreceği ve bu deneyimi yerel olarak kontrol edebilmelerini sağlayan deneyimler oluşturabiliyordu. Örnekler arasında, videolar TV'de oynatılırken youtube.com adresinde bir oynatma sırası yönetmek veya tam ekran sunumun bir Hangout oturumunda gösterilirken dizüstü bilgisayarda konuşmacı notlarının yer aldığı bir slayt gösterisi görmek sayılabilir.

Kullanıcıların sadece ikinci, ekli bir ekranda içerik sunmak isteyebilecekleri senaryolar da vardır. Örneğin, bir konferans odasında HDMI kablosuyla bağlanan bir projektörlü bir kullanıcıyı düşünün. Sunuyu uzak bir uç noktaya yansıtmak yerine, kullanıcı gerçek anlamda slaytları projektörde tam ekran olarak sunmak ister, böylece konuşmacı notları ve slayt kontrolü için dizüstü bilgisayar ekranı kullanılabilir durumda olur. Site yazarı bunu çok temel bir yolla destekleyebilir (ör. kullanıcının daha sonra manuel olarak ikincil ekrana sürüklemesi ve ekranı tam ekrana kaplaması gereken yeni bir pencere açılması), bu yöntem kullanışsızdır ve yerel ile uzak sunum arasında tutarsız bir deneyim sağlar.

Bir sayfayı göster

Bağlı ikincil ekranınızda bir web sayfasını sunmak için Sunum API'sini nasıl kullanacağınızı size adım adım göstereyim. Nihai sonuca https://googlechrome.github.io/samples/presentation-api/ adresinden ulaşabilirsiniz.

Öncelikle, eklenen ikincil ekranda sunmak istediğimiz URL'yi içeren 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örüntüleme isteminin gösterilmesi, düğmenin tıklanması gibi bir kullanıcı hareketi gerektirir. Öyleyse, bir düğmeyi tıklayarak presentationRequest.start()'ı çağıralım ve kullanıcı bir sunu görünümü (ör. kullanım örneğimizde ikincil bir eklenmiş ekran) seçtikten sonra söz konusu işlemin tamamlanması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ılan ekranların da listede olmadığını unutmayın. http://crbug.com/840466 adresine bakın.

Sunu Görüntüleme Seçicisi
Sunu Görüntüleme Seçici

Vaat çözümlendiğinde, PresentationRequest nesne URL'sindeki web sayfası seçilen ekrana sunulur. İşte oldu!

Artık devam edip "close" (kapat) ve "sonlandır" etkinliklerini aşağıda gösterildiği gibi izleyebiliriz. presentationRequest.reconnect(presentationId) ile "kapalı" bir 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 kurun

Düşünsenize, bu güzel ama mesajları denetleyici sayfam (az önce oluşturduğumuz) ile alıcı sayfa (PresentationRequest nesnesine ilettiğimiz) arasında nasıl iletebilirim?

İlk olarak navigator.presentation.receiver.connectionList ile alıcı sayfadaki 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ği tetikler. İleti bir dize, Blob, ArrayBuffer veya ArrayBufferView olabilir. Göndermek için denetleyici sayfasından veya alıcının sayfasından connection.send(message) çağırmanız yeterlidir.

// Controller page

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

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

Nasıl çalıştığını anlamak için https://googlechrome.github.io/samples/presentation-api/ adresindeki örneği inceleyin. Bunu benim kadar seveceğinizden eminim.

Örnekler ve demolar

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

Etkileşimli Photowall demosunu da izlemenizi öneririz. Bu web uygulaması, birden fazla kumandanın sunum ekranında fotoğraf slayt gösterisini birlikte sunmasına olanak tanır. 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ın" tarayıcı menüsü vardır. Bu menünün varsayılan sunumunu kontrol etmek istiyorsanız navigator.presentation.defaultRequest öğesini daha önce oluşturulmuş özel presentationRequest nesnesine atayın.

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

Geliştiriciler için ipuçları

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

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

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 sunulacaktır.

Kaynaklar