Available in Chrome 63+ | View on GitHub | Browse Samples
This sample illustrates the use of
Presentation API,
which gives the ability to access external presentation-type displays and use
them for presenting web content. The PresentationRequest object
is associated with a request to initiate to a presentation made by a
controlling browsing context and it takes in a presentation request URL when
constructed. A presentation can be started by calling the
start() method on the PresentationRequest object.
Note that this demo uses a cast: URL to start the presentation
instead of the receiver page's URL. This will load the receiver page on a
Chromecast, but the sender page will be unable to communicate with it as the
Chromecast does not implement the Presentation Receiver API.
// App ID EF1A139F is registered in the Google Cast SDK Developer
// Console and points to the following custom receiver:
// https://googlechrome.github.io/samples/presentation-api/receiver/index.html
const presentationRequest = new PresentationRequest('cast:EF1A139F');
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
let presentationConnection;
document.querySelector('#start').addEventListener('click', function() {
log('Starting presentation request...');
presentationRequest.start()
.then(connection => {
log('> Connected to ' + connection.url + ', id: ' + connection.id);
})
.catch(error => {
// A timeout error is expected because the presentation is not connected.
});
});
presentationRequest.addEventListener('connectionavailable', function(event) {
presentationConnection = event.connection;
presentationConnection.addEventListener('close', function() {
log('> Connection closed.');
});
presentationConnection.addEventListener('terminate', function() {
log('> Connection terminated.');
});
});
document.querySelector('#close').addEventListener('click', function() {
log('Closing connection...');
presentationConnection.close();
});
document.querySelector('#terminate').addEventListener('click', function() {
log('Terminating connection...');
presentationConnection.terminate();
});
/* Availability monitoring */
presentationRequest.getAvailability()
.then(availability => {
log('Available presentation displays: ' + availability.value);
availability.addEventListener('change', function() {
log('> Available presentation displays: ' + availability.value);
});
})
.catch(error => {
log('Presentation availability not supported, ' + error.name + ': ' +
error.message);
});