Listen for metadata and trigger an action with the Wowza Player JavaScript API

Timed metadata allows you to add cued interactivity such as text overlays, bidding, betting, or question-and-answer games to a live stream. Using the Wowza™ Player JavaScript API, you can listen for metadata in a stream and trigger a resulting action, for example, displaying the name, finishing time, and place of a runner as she crosses the finish line of a race.

About playback of timed metadata


Timed metadata in the Wowza live streaming workflow is encapsulated in either AMF data or ID3 tags, depending on the type of stream. Streams sent over HLS contain ID3 tags, while ultra low latency streams sent with WOWZ over WebSockets or Adobe HDS streams contain AMF data. With the Wowza Player JavaScript API, you can listen for both AMF and ID3 and trigger an action based on either type of data.

Example HTML


Note: See the Wowza Player JavaScript API Reference to get started with the Wowza Player API.

In the following code example, we use the onMetadata method to attach an event listener that’s called when metadata is available in the stream. The event listener determines whether the metadata is in the AMF or ID3 format, sets a payload value according to the metadata type, and sets up a function that executes with the payload value.

In this example, we are using Wowza Streaming Engine™ or Wowza Streaming Cloud™ to broadcast a live stream of a marathon. When a runner crosses the finish line, his or her name, the time that they cross, and their place in the race will print to the console. You can insert your own code into this example to make the resulting string appear as an overlay during playback instead. This example covers both HLS streams and ultra low latency streams. 

Although the scenario focuses on the live streaming workflow, you can use the same code example for playback of a VOD stream broadcast using Wowza Streaming Engine.

<html>
<head>
//Point to the latest version of Wowza Player
<script type="text/javascript" src="//player.wowza.com/player/latest/wowzaplayer.min.js"></script>
</head>
<body>

<div id="playerElement" style="width:100%; height:0; padding:0 0 56.25% 0"></div>

<script type="text/javascript">
    myPlayer = WowzaPlayer.create('playerElement',
    {
      "license":"XXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX",
      "sourceURL":"http://IP:1935/APP/STREAM/playlist.m3u8"
    }
    );
 
    // Listen to HLS ID3 or WOWZ AMF data events
    myPlayer.onMetadata(function (event)
    {
      if (event.type != null)
        {
          var payload = null;
 
          // WOWZ/WS AMF data events
          if (event.type === "amf")
          {
            if (event.value.eventType === "onRaceFinisher")
              {
                payload = JSON.parse(event.value.payload);
              }
          }
          // HLS ID3 data events
          else if (event.type === "id3")
          {
            if (event.description === "onRaceFinisher")
              {
                payload = event.value;
              }
          }
          // HLS ID3 data events via native iOS playback
          else if (event.type === "text")
          {
            if (event.description === "onRaceFinisher")
              {
                 payload = JSON.parse(event.value);
              }
            }
 
          if (payload != null)
            {
              displayRaceFinisher(payload);
            }
          }
    }

    );

    function displayRaceFinisher(payload)
      {
        // Here is where to execute a function with the finisher metadata
        // For now, print to console
        console.log("Finisher: name :"+payload.name+" time :"+payload.time+" place:"+payload.place);
      }
</script>
</body>
</html>

More resources