# How to live stream with the Zoom Video SDK

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

The Zoom Video SDK makes live streaming to an unlimited audience simple over Real-Time Messaging Protocol (RTMP). This can enable users to scale Video SDK attendees beyond the 1,000 real-time session user limit by integrating with third-party streaming platforms such as YouTube Live, Facebook Live, Twitch, AWS IVS in under a few lines of code.

Follow along as we create a simple video web app that leverages the Video SDK to live stream to these platforms:

1. [YouTube Live](#stream-to-youtube-live)
1. [Facebook Live](#stream-to-facebook-live)
1. [Twitch](#stream-to-twitch)
1. [AWS IVS](#stream-to-aws-ivs)

## Prerequisites

1. A Zoom [Video SDK Account](/docs/video-sdk/get-credentials/)
1. A third-party streaming account

## Retrieving your streaming credentials

Live streaming requires the following information from third-party streaming platforms:

1. Stream URL
1. Stream Key
1. Broadcast URL

Each platform is different in how it provides these values. In the following steps, we'll retrieve these from the streaming platform of your choice:

### Stream to [YouTube Live](https://developers.google.com/youtube/v3/live/guides/rtmps-ingestion)

**Step 1 -** Log in to [YouTube](https://www.youtube.com).

**Step 2 -** Locate the video icon and press "Go Live".

![YouTube Go Live](/img/blog/willezrine/livestream/Youtubegolive.png)

**Step 3 -** Access your Stream Key and URL from the YouTube Live streaming interface.

![Stream Key/Url](/img/blog/willezrine/livestream/youtubestreamurl.png)

**Step 4 -** Access the Broadcast URL by pressing the share icon.

![Youtube Broadcast URL](/img/blog/willezrine/livestream/YoutubeBroadcast.png)

### Stream to [Facebook Live](https://www.facebook.com/help/755943624557739)

**Step 1 -** Log in to [Facebook](https://www.facebook.com/) and navigate to [Live Producer](https://www.facebook.com/live/producer).

**Step 2 -** From the Live Producer, you can go live now or schedule a live video event for later. Click "Go Live".

![Facebook Go Live](/img/blog/willezrine/livestream/Facebookgolive.png)

**Step 3 -** Select "Streaming Software" from the available video source options.

![Facebook Stream Key](/img/blog/willezrine/livestream/FacebookVideoSource.png)

**Step 4 -** Under the "Streaming Software Setup" section, access your Stream Key. Under "Advanced Settings", access the Server URL. The Server URL is what we call the Stream URL.

![Facebook Steam Key and URL](/img/blog/willezrine/livestream/FacebookStreamKey.png)

**Step 5 -** Once you go live, you may access the Broadcast URL in the "Preview Link" section.

![Facebook Broadcast URL](/img/blog/willezrine/livestream/FacebookBroadcast.png)

### Stream to [Twitch](<https://dev.twitch.tv/docs/video-broadcast/#:~:text=The%20tool%20sends%20a%20video,Time%20Messaging%20Protocol%20(RTMP).>)

**Step 1 -** Go to [Twitch](https://www.twitch.tv) and log in.

**Step 2 -** Hover on your profile in the top right corner and press Creator Dashboard.

**Step 3 -** Find the Settings tab and click Stream. Collect your Stream Key.

![Twitch Creator Dashboard](/img/blog/willezrine/livestream/Twitchcreatordashboard.png)

**Step 4 -** Get the optimal ingest endpoint from the [Get Ingest Servers](https://dev.twitch.tv/docs/video-broadcast/reference/#get-ingest-servers) API

**Step 5 -** Your Stream Key is: `rtmp://<ingest-server>/app/<stream-key>`

**Step 6 -** Access your Broadcast URL by pressing the share button and copying the URL.

![Twitch Broadcast URL](/img/blog/willezrine/livestream/TwitchBroadcast.png)

### Stream to [AWS IVS](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/streaming-config.html#streaming-config-settings)

**Step 1 -** Log in to [AWS](https://aws.amazon.com/).

**Step 2 -** Navigate to the IVS service. You can also search it in the search bar.
![IVS Service](/img/blog/willezrine/livestream/IVSService.png)

**Step 3 -** Click get started, add a channel name like "Zoom", and create your channel.

![IVS GetStarted](/img/blog/willezrine/livestream/IVSGetStarted.png)
![IVS Create Channel](/img/blog/willezrine/livestream/IVSCreateChannel.png)
![IVS Save Channel](/img/blog/willezrine/livestream/IVSSaveChannel.png)

**Step 4 -** Access your Stream Key and URL from the "Stream configuration" section. Access the Broadcast URL from the "Playback configuration" section.

![IVS Stream Key/Url](/img/blog/willezrine/livestream/IVSStreamKey.png)

### Streaming to another platform?

If you don't see the platform you want to stream here, don't worry, you can stream to any platform as long as you can produce the following:

1. Stream URL
1. Stream Key
1. Broadcast URL

## Join a Video SDK session on the web

Now that we've retrieved the credentials we need to stream to our third-party provider, we'll set up a simple video web app in vanilla JavaScript.

### Getting started with the Video SDK

Install the Video SDK via npm. From the terminal in your project directory, run:

```bash
npm install @zoom/videosdk --save
```

After you've installed from npm, import `ZoomVideo` in the component file where you want to use the Video SDK:

```js
import ZoomVideo from "@zoom/videosdk";
```

### Start and joining Video SDK sessions

**Step 1 -** Create and declare the Zoom Video SDK `client` using [`ZoomVideo.createClient()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/default.html#createClient)

**Step 2 -** Initialize the Video SDK by calling [`client.init()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#init) and pass [options](https://marketplacefront.zoom.us/sdk/custom/web/interfaces/InitOptions.html).

**Step 3 -** Join a session by calling [`client.join()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#join), and pass the Session Name, [Video SDK JWT](/docs/video-sdk/auth/), Name, and Session Password.

**Step 4 -** Create and declare the `mediaStream` using [`client.getMediaStream()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#getMediaStream) once the session has been successfully joined.

```js
import ZoomVideo from "@zoom/videosdk";

let client = ZoomVideo.createClient();
let mediaStream;

await client.init("en-US", "Global", { patchJsMedia: true });
await client.join(
    "sessionName",
    "VIDEO_SDK_JWT",
    "userName",
    "sessionPasscode",
);

mediaStream = client.getMediaStream();
```

### Start your video using Zoom Video SDK

The Video SDK for web can render up to 25 videos at a time on desktop browsers, and 4 videos on mobile browsers. It is recommended to show additional videos using pagination. The maximum video quality on the web platform is 720p.

> Make sure to tie the startVideo function to a user button click or the browser could block access to the camera due to
> privacy.

**Step 1 -** Create a HTML video container `<video-player-container></video-player-container>` where you intend to display your self video.

**Step 2 -** Start your video by calling [`startVideo()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#startVideo) on the `mediaStream`.

**Step 3 -** Once you have granted camera permission to the browser, you can attach the self view video within the video container by using [`mediaStream.attachVideo('user_id', 'video_quality')`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#attachVideo) and passing in your user id and the video quality. Declare the result of this function call as `userVideo`.

-   The user id can be accessed by calling [`mediaSteam.getCurrentUserInfo()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#getCurrentUserInfo).
-   See the relevant enumeration values for the video quality input [here](https://marketplacefront.zoom.us/sdk/custom/web/enums/VideoQuality.html).

**Step 4 -** Append the `userVideo` to the `video-player-container` by using `document.querySelector('video-player-container').appendChild(userVideo)`.

**Step 5 -** Stop your video by calling the [`mediaSteam.stopVideo()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#stopVideo) function.

```js
await stream.startVideo();

let userVideo = await stream.attachVideo(
    stream.getCurrentUserInfo().userId,
    RESOLUTION,
);

document.querySelector("video-player-container").appendChild(userVideo);
```

### Controlling audio in the Zoom Video SDK

> Make sure to tie the startAudio function to a user button click or the browser could block access to the microphone
> due to privacy.

**Step 1 -** To start audio, call the [`mediaStream.startAudio()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#stopAudio) function.

**Step 2 -** Unmute yourself by calling the [`mediaSteam.unmuteAudio()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#unmuteAudio) function.

**Step 3 -** Similarly, mute yourself by calling the [`mediaSteam.muteAudio()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#muteAudio) function.

**Step 4 -** To stop audio, call [`mediaSteam.stopAudio()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#stopAudio).

### Share Your Screen using the Zoom Video SDK

**Step 1 -** Create both a HTML video and canvas element with appropriate id's. Make sure to set a height and width.

```
<video id="my-screen-share-content-video" height="1080" width="1920"></video>
<canvas id="my-screen-share-content-canvas" height="1080" width="1920"></canvas>
```

**Step 2 -** Identify the optimal HTML element to render the screen share on for the user's browser by calling the [`isStartScreenShareScreenWithVideoElement()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/ZoomVideo.Stream.html#isStartShareScreenWithVideoElement) function on the `mediaStream`.

**Step 3 -** Start your screen share and render it on the webpage by using the [`startShareScreen()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#startShareScreen) function and pass in either the video or canvas element using `document.querySelector()`.

```js
if (stream.isStartShareScreenWithVideoElement()) {
    await stream.startShareScreen(
        document.querySelector("#my-screen-share-content-video"),
    );
    // screen share successfully started and rendered
} else {
    await stream.startShareScreen(
        document.querySelector("#my-screen-share-content-canvas"),
    );
    // screen share successfully started and rendered
}
```

**Step 4 -** To stop your screen share, call the [`stopShareScreen()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#stopShareScreen) function on the `mediaSteam`.

## Start live streaming using the Zoom Video SDK

### Initialize the live stream client

While in a session, call [`client.getLiveStreamClient()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#getLiveStreamClient) to get the Live Stream Client. Its best to declare this as new variable such as `liveStreamClient`.

### Set and start the live stream

To set and start the live stream, call [`liveSteamClient.startLiveStream('stream_url', 'stream_key', 'broadcast_url')`](https://marketplacefront.zoom.us/sdk/custom/web/modules/LiveStreamClient.html#startLiveStream), making sure to pass in the correct Stream URL, Stream Key, and Broadcast URL.

### Stopping the live stream

To stop a live stream from Zoom's side, call [`liveStreamClient.stopLiveStream()`](https://marketplacefront.zoom.us/sdk/custom/web/modules/LiveStreamClient.html#stopLiveStream).

### Start/Stop the live stream via API

You can also leverage Zoom's [Video SDK APIs](/docs/api/video-sdk) to start and/or stop a live stream from your server. In order to start a live stream via API, it must first be initialized using the [Update a session live stream](/docs/api/video-sdk/#tag/sessions/PATCH/videosdk/sessions/{sessionId}/livestream) API, and sending the corresponding Stream Key, Stream URL, and Broadcast URL in the request body. Once the live stream is initialized, you may start or stop the broadcast on Zoom's side by calling the [Update session live stream status](/docs/api/video-sdk/#tag/sessions/PATCH/videosdk/sessions/{sessionId}/livestream) API.

### Subscribe to the live stream event listener

To receive the live streaming status from the third-party side, subscribe to the [live stream event listener](https://marketplacefront.zoom.us/sdk/custom/web/modules/ZoomVideo.html#event_live_stream_status). This event listener is useful for events on the receiving end, such as when the live steam is ended.

```js
client.on(`live-stream-status`, (payload) => {
    console.log(`live streaming status: ${payload}`);
});
```

## Conclusion

By now you should see how simple it is to set up a simple Zoom Video SDK app with live streaming capabilities. If you are interested in learning more about the functions and event listeners used in our walkthrough, you can find the full reference [here](https://marketplacefront.zoom.us/sdk/custom/web/index.html).