Web sayfalarını ikincil eklenmiş ekranlarda sunma

François Beaufort
François Beaufort
GitHub

Chrome 66, web sayfalarının Sunu API'sı ve içeriğini Sunu API'si ile kontrol edebilirsiniz. Alıcı API'si.

1/2. Kullanıcı ikincil bir ekran seçer
1/2. Kullanıcı ikincil bir ekran seçer
ziyaret edin.
'nı inceleyin.
2/2. Web sayfası, önceden seçilen ekrana otomatik olarak sunulur.
2/2. Web sayfası, önceden seçilen ekrana otomatik olarak sunulur.
ziyaret edin.
'nı inceleyin.

Arka plan

Şimdiye kadar web geliştiricileri, kullanıcıların yerel Google'da göreceği deneyimler oluşturabiliyordu. uzaktan kumandada göreceklerinden farklı olan içerikler deneyimi yerel olarak kontrol edebilmek için gereklidir. Örnekler videolar TV'de oynatılırken youtube.com'da bir oynatma sırasının yönetilmesi, veya tam ekrandayken dizüstü bilgisayarda konuşmacı notları içeren bir slayt filmi sunu bir Hangout oturumunda gösteriliyor.

Bununla birlikte, kullanıcıların yalnızca kendi içeriklerinde içerik sunmak isteyebilecekleri senaryolar vardır. bağlı, ikinci bir ekran. Örneğin, konferans odasında bir kullanıcının HDMI kablosuyla bağlı oldukları bir projektörle donatılmışlardır. Sunuyu uzak bir uç noktaya yansıtmak yerine kullanıcı slaytları projektörde tam ekran olarak sunmak istiyor, konuşmacı notları ve slayt kontrolü için kullanılabilen dizüstü bilgisayar ekranı. Site, bir yazar bunu çok temel bir biçimde destekleyebilir (örneğin, yeni bir kullanıcının ikinci ekrana manuel olarak sürüklemesi ve tam ekrana tam ekran) kaplar, zahmetlidir ve sunumlar arasındaki farkı ortaya koyuyor.

Sayfa göster

Bir web sayfasını sunmak için Sunu API'sının nasıl kullanılacağını size adım adım açıklayacağım tıklayın. Nihai sonuca şu adresten ulaşabilirsiniz: https://googlechrome.github.io/samples/presentation-api/.

İlk olarak, şunu içeren yeni bir PresentationRequest nesnesi oluşturacağız: İkincil ekli ekranda sunmak istediğimiz 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);
  });

Sunu gösterme isteminin gösterilmesi için tıklama gibi bir kullanıcı hareketi gereklidir görebilirsiniz. Tek bir düğmeye tıklayarak presentationRequest.start() öğesini çağıralım Kullanıcı bir sunuyu seçtikten sonra sözün verilmesini bekleyin (ör. kullanım alanımızda eklenmiş ikincil bir ekran).

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, Chromecast cihazlar (reklamlarını yapan bir ağa bağlıysanız). Lütfen yansıtılmış ekranlar listede yoktur. http://crbug.com/840466 adresine bakın.

Sunu Ekranı Seçici
Sunu Ekranı Seçici

Söz sağlandığında PresentationRequest nesne URL'sindeki web sayfası seçilen ekrana sunulur. Tebrikler!

Artık daha ileri gidip "kapanış"ı izleyebiliriz ve "sonlandırma" gösterildiği gibi etkinlikler bölümüne göz atın. "Kapatılmış" bir cihaza tekrar bağlanabileceğinizi presentationRequest.reconnect(presentationId) ile presentationConnection 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

Sizce de gayet güzel ama mesajları kanal ve e-posta adreslerim ile denetleyici sayfası (az önce oluşturduğumuz) ve alıcı sayfası ( PresentationRequest nesnesine geçtik)?

Öncelikle, alıcı sayfasındaki mevcut bağlantıları navigator.presentation.receiver.connectionList ve gelen aramaları dinleyin olarak ayarlayın.

// 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 alındığında bağlantı bir "mesaj"ı tetikler bu etkinlikten bahsedeceğiz. Mesaj bir dize, Blob, ArrayBuffer veya ArrayBufferView olabilir. Mesajı göndermek için şu numaradan connection.send(message) adlı kişiyi çağırmak yeterlidir: kontrol sayfası veya alıcı sayfası.

// Controller page

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

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

Örneği şurada oynatın: hakkında fikir edinmek için https://googlechrome.github.io/samples/presentation-api/ nasıl çalıştığına bakalım. 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ı, ortak bir şekilde fotoğraf slayt gösterisi sunmak için en iyi uygulamaları paylaşacağız. Kodu şu adreste bulabilirsiniz: https://github.com/GoogleChromeLabs/presentation-api-samples.

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

Bir şey daha var

Chrome'da "Cast" özelliği vardır bir sayfayı ziyaret ederken istedikleri zaman çağırabilecekleri bir tarayıcı menüsü web sitesi. Bu menü için varsayılan sunuyu kontrol etmek istiyorsanız, navigator.presentation.defaultRequest öğesini özel bir kullanıcıya ata presentationRequest nesne daha önce oluşturuldu.

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

Geliştiricilere yönelik ipuçları

Alıcı sayfasını incelemek ve hata ayıklamak için dahili chrome://inspect sayfasındaki "Diğer"i seçin ve o anda gösterilen URL.

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

Dahili chrome://media-router-internals özelliğine de göz atmak isteyebilirsiniz dahili keşif/kullanılabilirlik süreçlerinin ayrıntılı incelemesini içeren bir sayfadır.

Sırada ne var?

Chrome 66'dan itibaren ChromeOS, Linux ve Windows platformları desteklenmektedir. Mac destek daha sonra gelecektir.

Kaynaklar