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](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/12-user-picks-secondar-03beeb097e67e.jpg?authuser=19&hl=tr)
![2/2. Web sayfası, önceden seçilen ekrana otomatik olarak sunulur.](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/22-web-page-is-automat-5dab3e95502c3.jpg?authuser=19&hl=tr)
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](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/presentation-display-pick-6b14dbd5ed08c.png?authuser=19&hl=tr)
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ü](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/photowall-demo-screenshot-10527faacc264.jpg?authuser=19&hl=tr)
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](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/inspect-presentation-rece-260dbbca83182.png?authuser=19&hl=tr)
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
- 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