Presentation Receiver API Sample

Available in Chrome 58+ | View on GitHub | Browse Samples

Background

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 or reconnect 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.

Live Output


JavaScript Snippet

const presentationUrls = ['receiver/index.html'];

let presentationRequest;
let presentationConnection;

function updatePresentationAvailability(displaysAvailable) {
  ChromeSamples.log('Presentation displays are ' +
      (displaysAvailable ? 'available' : 'unavailable') + '.');
}

document.querySelector('#createRequest').addEventListener('click', () => {
  presentationRequest = new PresentationRequest(presentationUrls);
  document.querySelector('#createRequest').disabled = true;
  document.querySelector('#start').disabled = false;
  document.querySelector('#reconnect').disabled = false;
  presentationRequest.getAvailability().then(availability => {
    updatePresentationAvailability(availability.value);
    availability.onchange = () => {
      updatePresentationAvailability(availability.value);
    };
  }).catch(error => {
    ChromeSamples.log('Presentation availability not supported, ' +
                      error.name + ': ' + error.message);
    updatePresentationAvailability(false);
  });
});

function setConnection(connection) {
  presentationConnection = connection;
  document.querySelector('#close').disabled = false;
  document.querySelector('#terminate').disabled = false;
  document.querySelector('#sendFruit').disabled = false;
  document.querySelector('#sendMessage').disabled = false;
  presentationConnection.onclose = () => {
    ChromeSamples.log('Connection closed.');
    document.querySelector('#sendFruit').disabled = true;
    document.querySelector('#sendMessage').disabled = true;
  };
  presentationConnection.onterminate = () => {
    ChromeSamples.log('Connection terminated.');
  };
}

document.querySelector('#start').addEventListener('click', () => {
  presentationRequest.start().then(connection => {
  ChromeSamples.log('Connected to presentation ' + connection.url + ', id: ' +
      connection.id);
    setConnection(connection);
  }).catch(error => {
    ChromeSamples.log(error.name + ': ' + error.message);
  });
});

document.querySelector('#reconnect').addEventListener('click', () => {
  const presentationId = document.querySelector('#presentationId').value.trim();
  if (presentationId.length) {
    presentationRequest.reconnect(presentationId).then(connection => {
      ChromeSamples.log('Reconnected to presentation: ' + connection.id);
      setConnection(connection);
    }).catch(error => {
      ChromeSamples.log('Presentation.reconnect() error, ' + error.name + ': ' +
                        error.message);
    });
  }
});

document.querySelector('#sendFruit').addEventListener('click', () => {
  if (presentationConnection && presentationConnection.state == 'connected') {
    const message = document.querySelector('#fruit').value.trim();
    ChromeSamples.log('Sending ' + message + ' to ' + presentationConnection.id);
    presentationConnection.send(JSON.stringify({message}));
  }
});

document.querySelector('#sendMessage').addEventListener('click', () => {
  if (presentationConnection && presentationConnection.state == 'connected') {
    const message = document.querySelector('#message').value.trim();
    ChromeSamples.log('Sending ' + message + ' to ' + presentationConnection.id);
    const lang = document.body.lang || 'en-US';
    presentationConnection.send(JSON.stringify({message, lang}));
  }
});

document.querySelector('#close').addEventListener('click', () => {
  if (presentationConnection) {
    presentationConnection.close();
    document.querySelector('#close').disabled = true;
    document.querySelector('#terminate').disabled = true;
  }
});

document.querySelector('#terminate').addEventListener('click', () => {
  if (presentationConnection) {
    presentationConnection.terminate();
    document.querySelector('#close').disabled = true;
    document.querySelector('#terminate').disabled = true;
  }
});