Skip to main content

Quick Start

Lura Player Chromecast Receiver is the implementation of Lura Player Web SDK on Chromecast devices. You can create your own Chromecast Receiver easily with our Chromecast Receiver SDK.

You can use default styles and scripts for receiver application, but you can also add your own logic, style and listen events from our Lura Player Receiver SDK. Save the following code to a blank html file to get started.

Using the default receiver​

Lura Player Team manages and updates a chromecast application with every release. You can use the receiver managed by Lura Player Team to enable the chromecast without the need to add your own receiver. You can use the application id 59068AF6 to use the managed and updated chromecast receiver.

Creating a custom receiver​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Lura Player</title>
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  </head>

  <body>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        border: 0;
        background-color: black;
      }
    </style>
    <script src="https://w3.mp.lura.live/lura-player/receiver/latest/receiver.js"></script>
    <cast-media-player></cast-media-player>
    <script>
      const player = new lura.Player();
    </script>
  </body>
</html>

After creating the html file, upload the html file to a storage bucket and create a new receiver application in Google Cast SDK Developer Console. To see more about creating a new receiver application, please see application registration.

Enabling Chromecast on players​

To enable chromecast on sender, you need to add the cast configuration and add the GoogleCast libraries for Android and iOS SDK. Web SDK downloads the necessary library from cloud. For the GoogleCast libraries, feel free to contact our support team.

Here is a sample web player implementation of chromecast with default appId.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Lura Player Test</title>
  </head>

  <body>
    <div id="player" style="width: 640px; height: 360px"></div>
    <script src="https://w3.mp.lura.live/lura-player/web/latest/lura-player.js"></script>
    <script>
      const config = {
        lura: {
          appKey:
            "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
          assetId: "5179678",
        },
        cast: {
          chromecast: {
            enabled: true,
            appId: "59068AF6",
          },
        },
      };
      const player = new lura.Player(document.getElementById("player"));
      player.setConfig(config);
    </script>
  </body>
</html>