Is it possible to use an Airplay display (like a TV) from javascript in an HTML5 app on iOS

Question

Is it possible to use an Airplay display (like a TV) from javascript in an HTML5 app on iOS

462 Views Asked by jpcoder At 01 March 2023 at 00:39

I would like to create an HTML5 app in javascript that will run in Safari on an iOS device but be able to use Airplay as a second screen or expanded screen (not mirrored). The idea would be to have one UI on the device and a separate UI on the Airplay device. I know this can be done in a native app but this could be interesting if I could also do this in a browser.

Original Q&A

There are 1 best solutions below

**arngrim280** · Answer 1 · 2023-03-01T01:59:33.117000

I don't know what iOS devices you use for test but you can try with the WebKit API by Safari on iOS.

if (window.WebKitPlaybackTargetAvailabilityEvent) {
  // Airplay is available
  var video = document.getElementById('video');
  video.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) {
    if (event.availability === 'available') {
      // Airplay receiver is available
      var receiverName = event.target.getAttribute('webkitCurrentPlaybackTargetName');
      var picker = new WebKitPlaybackTargetPicker();
      picker.showPicker(function (receiver) {
        // Airplay receiver has been selected
        var receiverUrl = receiver.url;
        var externalWindow = window.open(receiverUrl);
        externalWindow.focus();
      }, function () {
        console.log('Airplay receiver selection failed');
      }, video);
    }
  });
}

But you have to know that not all Airplay receivers support displaying HTML content, so you may need to test different receivers to see which ones work with your app.

Example of HTML content with Safari Webkit

  // Function to display HTML content on an external AirPlay-enabled display

function displayOnAirPlay(htmlContent) {

  // Call webkitShowPlaybackTargetPicker to allow user to select AirPlay device

  webkitShowPlaybackTargetPicker(function(target) {
    if (target) {
     
 // If a target device was selected, create a new window and load the HTML content

      var externalWindow = target.createRemoteWebView();
      externalWindow.loadHTMLString(htmlContent, { baseURL: null });
      externalWindow.show();
    }
  });
}

// usage: display the contents of a div with ID "content" on an external display

var content = document.getElementById("content").innerHTML;
displayOnAirPlay(content);

This is a working example of HTML content, with a basic button and basic display content in the selected device.

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AirPlay Example</title>
</head>
<body>
  <h1>AirPlay Example</h1>
  <div id="content">
    <p>This is some HTML content that will be displayed on the external AirPlay-enabled display.</p>
  </div>
  <button id="displayButton">Display on AirPlay</button>

  <script>
    // Get a reference to the display button and the content div
    const displayButton = document.getElementById('displayButton');
    const contentDiv = document.getElementById('content');

    // Add an event listener to the display button
    displayButton.addEventListener('click', async () => {
      try {
        // Request access to the ExternalOutputContext API
        const context = await navigator.externalOutputContext.request();

        // Get the list of available external displays
        const displays = await context.getDisplays();

        // Prompt the user to select an AirPlay-enabled display
        const selectedDisplay = await context.showDisplayPicker(displays);

        // If a display was selected, create a new window and load the HTML content
        if (selectedDisplay) {
          const externalWindow = await selectedDisplay.createWindow();
          externalWindow.document.body.innerHTML = contentDiv.innerHTML;
          externalWindow.show();
        }
      } catch (error) {
        console.error(error);
      }
    });
  </script>
</body>
</html>

Is it possible to use an Airplay display (like a TV) from javascript in an HTML5 app on iOS

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in IOS

Related Questions in SAFARI

Related Questions in AIRPLAY

Trending Questions

Popular # Hahtags

Popular Questions