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