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.
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.
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.
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.
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
- Chrome Özellik Durumu: https://www.chromestatus.com/features#presentation%20api
- Uygulama Hataları: https://crbug.com/?q=component:Blink>PresentationAPI
- Sunum API'si Spesifikasyonu: https://w3c.github.io/presentation-api/
- Spesifikasyon Sorunları: https://github.com/w3c/presentation-api/issues