Tutorials

How to live stream the video from Zoom, Microsoft Teams, and Google Meet video conferences

David Gu

January 3, 2023

For many industries, it's a critical feature to be able to live stream the contents of your video conferences. For example, in user research tools, a common feature is "observer rooms" where several product managers can watch research take place in real-time, without crowding up the video conference.

Some platforms like Zoom offer APIs to enable RTMP (Real-Time Messaging Protocol) output which can be used to live stream the meeting, however these APIs are not available or consistent across other meeting platforms. For example, Google Meet does not have an API, and also can only live stream to either a special Google Meet application or YouTube. Microsoft Teams does offer RTMP streaming, however has no API to configure this.

This inconsistency makes it hard to incorporate video conference live streams into your product and have it work the same way across all platforms. A solution is to use Recall.ai. The Recall.ai recording bot can output a RTMP video stream, and works identically across all platforms.

I’ll be walking you through how to use the Recall.ai RTMP output feature in order to live-stream the video from any video conferencing platform.

Producing an RTMP stream is the first step in live streaming your video conference, however an RTMP stream cannot be directly received by your customer's devices (like their phones or laptops). It must instead be converted into a streaming friendly format like HLS (HTTP Live Streaming). To do this, we're going to use Mux, however you can use any service that receives RTMP and produces a HLS video stream (for example AWS Elemental MediaLive).

Creating a Mux Live Stream

The first step is to create a Mux "Live Stream". You'll need a Mux API Token composed of an ID and Secret.

We've created a helper script to send this request using cURL, which contains the following command.


$ cat send-mux-request.sh 

#!/bin/bash
curl https://api.mux.com/video/v1/live-streams \
  -X POST \
  -H "Content-Type: application/json" \
  -u $1:$2 \
  -d '{"playback_policy": ["public"], "new_asset_settings": {"playback_policy": ["public"]}}'

After sending this request, you'll get a response that looks like the following.


$ ./send-mux-request.sh YOUR-MUX-TOKEN-ID YOUR-MUX-TOKEN-SECRET

{   "data": {
    "test": true,
    "stream_key": "YOUR-MUX-STREAM-KEY",
    "status": "idle",
    "reconnect_window": 60,
    "playback_ids": [
      {
        "policy": "public",
        "id": "YOUR-MUX-PLAYBACK-ID"
      }
    ],
    "new_asset_settings": {
      "playback_policies": [
        "public"
      ]
    },
    "max_continuous_duration": 300,
    "latency_mode": "standard",
    "id": "",
    "created_at": "1672699955"
  }
}

The 2 important fields we want to pay attention to are the data.stream_key field, and the data.playback_ids[0].id field. The "Stream Key" will be necessary for Recall to send the RTMP live stream to Mux, and the "Playback ID" will be necessary for us to watch the HLS stream.

Creating a Recall.ai Bot

The second step is to create a Recall.ai Bot. The bot will join your meeting, access the audio and video data, and produce the RTMP stream that will be sent to Mux.

We've also created a helper script for this request, which contains the following command:


$ cat send-recallai-request.sh

#!/bin/bash
curl https://api.recall.ai/api/v1/bot \
  -X POST \
  -H "Content-Type: application/json" \
  -H "Authorization: Token $1" \
  -d "{\"meeting_url\": \"$2\", \"real_time_media\": {\"rtmp_destination_url\": \"rtmp://global-live.mux.com:5222/app/$3\"}}"

Note the real_time_media.rtmp_destination_url JSON key in the request body. This is the URL that Recall.ai will output the RTMP stream to.

After sending this request, we'll get a response that looks like the following. We don't need to do anything else with this returned data.


$ ./send-recallai-request.sh \
  YOUR-RECALLAI-API-KEY \
  YOUR-MEETING-URL \
  YOUR-MUX-STREAM-KEY

{
  "id": "YOUR-RECALLAI-BOT-ID",
  "video_url": null,
  status_changes": [
    {
      "code": "ready",
      "message": null,
      "created_at": "2023-01-02T22:27:39.526764Z"
    }
  ],
  "meeting_metadata": null,
  "meeting_participants": [],
  "speaker_timeline": {
    "timeline": []
  },
  "calendar_meeting_id": null,
  "calendar_user_id": null
}

Viewing the Live Stream

The last step is to view the live stream. We've created a small HTML demo page for this. This page uses the video.js library to connect to the HLS stream and display it.

$ cat index.html

<html>
  <head>
    <link href="<https://vjs.zencdn.net/7.20.3/video-js.css>" rel="stylesheet" />
    <script>
      function setPlayerSrc(hlsUrl) {
        let video = videojs(document.getElementById("my-video"))
        video.src({type: "application/x-mpegURL", src: hlsUrl})
      }

      async function loadVideo() {
        let playbackId = document.getElementById("playbackId").value;
        if (!playbackId) {
          alert("Playback ID is required!")
          return;
        }

        let playbackUrl = `https://stream.mux.com/${playbackId}.m3u8`;
        setPlayerSrc(playbackUrl)
      }
    </script>
  </head>
  <body>
    <div>
      <input id="playbackId" placeholder="Playback ID">
    </div>
    <button onclick="loadVideo()">Load Video</button>

    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
    </video>
    <script src="<https://vjs.zencdn.net/7.20.3/video.min.js>"></script>
  </body>
</html>

Open the HTML page in your web browser, and paste the Mux "Playback ID" in the input field.

Then, click the "Load Video" button.

Finally, click the play button that appears on the video element.

You should see the broadast of your meeting start playing.

You’ve just built a live streaming integration that works with multiple video conferencing platforms, using Recall.ai!