Skip to main content

Embedding Bayes Web Player

Bayes Web Player is a JS library designed specifically for playing streams from Bayes Video. To initialize the player, you need to generate the playlist URL for your user to watch the specific stream.

Generating Playlist URL​

Call the GET /v2/stream/playlist_url endpoint to generate the playlist URL for your chosen stream. With the endpoint you need to provide:

  • ?viewer_id= query parameter - string identifier of viewer, must be unique for each viewer session.
  • ?match_perid= query parameter — the PERID of the match that you want to stream. If you don't have the PERID of the match you want to stream, see the previous step (Discover Live and Upcoming Streams).

Here's an example query:

> GET /api/external/v2/stream/playlist_url?match_perid=esports%3Amatch%4Ae26a65e4-d6d1-46c3-8a8c-c97acbd3e919&viewer_id=7390d196-92ca-4b38-aae3-a249f8b7676a HTTP/1.1
> Host: tv-api.bayesesports.com
> User-Agent: insomnia/2023.1.0
> Authorization: Bearer <access_token>
> Accept: */*

And here's the playlist URL, returned in response:

"https://tv-api.bayesesports.com/api/external/v2/hls/playlist/b4cfa7c7041d472713c901a849bbf1ec4f6606e7d210c328283fd8b738ba064f"

Embedding the player​

Let's use the playlist URL, that we've generated in the previous step, to initialize Bayes Web Player on the site's page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- CDN import for the minified JS files of the Bayes Web Player -->
    <script
      src="https://cdn.jsdelivr.net/npm/@bayesgg/bayes-web-player-js/dist/bwp.js"
      crossorigin
    ></script>
    <!-- CDN import for the minified stylesheet of the Bayes Web Player -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@bayesgg/bayes-web-player-js/dist/css/bwp.css"
    />
    <script>
      const player = new bwp(
        /**
         *  Playlist URL fetched via Bayes Video
         * */
        'https://tv-api.bayesesports.com/api/external/v2/hls/playlist/b4cfa7c7041d472713c901a849bbf1ec4f6606e7d210c328283fd8b738ba064f',
        /**
         *  Container ID where the player will be embedded
         * */
        'root',
        /**
         * Options for the player to be initialized. You can find a comprehensive
         * list of available options provided later in the documentation
         **/
        {
          autoplay: true
        }
      );
      // Initialise and play the video.
      player.init();
      player.play();
    </script>
    <title>Bayes Web Player Demo! :)</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Read more about Bayes Web Player.