Wowza Video™ Real-Time Streaming at Scale provides half-second latency to all your viewers, no matter where they are. Real-time streaming is perfect for interactive use cases like video chats, auctions, e-sports, fitness, e-commerce, gambling, and more.
If your audience is fewer than 300 viewers or you want to stream in near real-time alongside other delivery protocols, you may choose to use our standard WebRTC solution.
Streaming using Real-Time Streaming at Scale requires that you provision the stream. The stream can be supplied from Wowza Video using the UI or API. See Deliver real-time streams with the Wowza Video REST API with Wowza Video for instructions on how to use the Wowza Video API to create a real-time stream.
This topic shows you how to set up an HTML page using the Real-Time Streaming at Scale SDK to publish WebRTC source. Then we'll show you how to use the Wowza Flowplayer WebRTC plugin to set up a viewing experience for the WebRTC stream. This lets you experience the highest performance possible with WebRTC ingest and playback.
Before you start
You should have access to the following items:
- A Wowza Video account. Real-time streaming is not available in the free trial.
- A RTS@S license. To enable and purchase capacity for Real-Time Streaming at Scale for your account and access the
/real_timeoperations, contact 720.279.8163 or schedule a call.
1. Set up your stream
Complete the following steps to create a live stream that broadcasts in ultra-low latency.
- In Wowza Video, navigate to the Real-time streams page and click Add new.
Note: If you don't have an RTS@S license, you won't see Real-time streams in the navigation.
- Enter a title for your stream. By default, this title is used for the hosted page we generate for you.
- Select the region closest to your broadcast location to get the best stream performance.
- (Optional) Click Upload Image in the Poster Image section if you want to display an image in the player before the video begins playing. You'll then upload the image you want displayed.
- (Optional) Select Record this stream if you want a recording of your live event. Wowza Video will save an MP4 and video-on-demand asset in the Videos section for future use. You can't edit this field after initial creation.
Note: Recordings created from the Real-Time Streaming at Scale workflow capture up to twelve hours of content in a single MP4 file. If the real-time stream recording is longer twelve hours, you'll have multiple files for the recording.
- (Optional) Click Enable playback security if you want to require players to pass a security token to authorize playback. This protects your stream from unauthorized viewers. You'll then need to set an expiration date and time for the security token. You can't edit this field after initial creation.
- Select Create live stream.
Wowza Video creates a real-time stream and provides the Publish Token and Stream Name you'll need to configure your source. If you specified an expiration date, a Playback Token will also appear under the Security heading.
2. Create your WebRTC publisher
Now that you have created your stream, we'll use the Javascript SDK for Real-Time streaming to embed your browser-based capture into a web page. While the Javascript SDK lets you build your own custom publication page, for this tutorial we'll provide sample code to get you started.
You can also use NPM to build your publication and viewer pages. See Javascript SDK reference for more information.
Copy the following publisher page sample code into an HTML file, making sure to:
- Set 'my-stream-name' to the stream_name generated by Wowza for your real-time stream, for example:
8d304b93f1684320a54f2798666eeca7 - Set 'my-publish-token' to the token generated by Wowza for your real-time stream, for example: 97e52731bc21ef66e4c05a8ee1e28b64bf5f9db728573d94e690277cea9215bc
- See Javascript SDK reference for additional configuration options.
<!DOCTYPE html>
<html>
<head>
<script src='https://www.wowza.com/downloads/rts-sdk/wowza.umd.js'></script>
</head>
<body>
<div>
<h1>Publish</h1>
<video autoplay playsinline controls muted id="my-video" width="1280" height="720"></video>
<script>
const wowza = window.wowza
const streamName = 'my-stream-name'
const tokenID = 'my-publish-token'
//Define callback for generate new tokens
const tokenGenerator = () => wowza.Director.getPublisher({
token: tokenID,
streamName: streamName
})
//Create a new instance
const wowzaPublish = new wowza.Publish(streamName, tokenGenerator)
//Get User camera and microphone
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(
(mediaStream) => {
//Publishing Options
const broadcastOptions = {
mediaStream
}
document.getElementById('my-video').srcObject = mediaStream
//Start broadcast
try {
wowzaPublish.connect(broadcastOptions)
} catch (e) {
console.log('Connection failed, handle error', e)
}
}
)
</script>
</div>
</body>
</html>
3. Set up your viewing experience
We'll use the Wowza Flowplayer WebRTC plugin to embed a player in a web page. While you could build your own custom publication page, for this tutorial we'll provide sample code to get you started. To use the WebRTC plugin, we'll also need a player configuration ID.
- In Wowza Video, click Configurations in the Players section of the navigation.
- Select the default player configuration in the list, then copy the value in the Id field on the General tab. We'll use this value to tell the plugin with player configuration to use for styling the player.
You could also create a new player configuration, copying that ID. See Create a player configuration in Wowza Video for more information. - Copy the following viewing page sample code into an HTML file, making sure to:
- Set "my-stream-name" to the stream_name generated by Wowza for your real-time stream, for example:
8d304b93f1684320a54f2798666eeca7- If you enabled playback security, set "my-playback-token" to the token generated by Wowza for your real-time stream, for example: 97e52731bc21ef66e4c05a8ee1e28b64bf5f9db728573d94e690277cea9215bc. Otherwise, remove subscriberToken from the code sample.
- If you enabled playback security, set "my-playback-token" to the token generated by Wowza for your real-time stream, for example: 97e52731bc21ef66e4c05a8ee1e28b64bf5f9db728573d94e690277cea9215bc. Otherwise, remove subscriberToken from the code sample.
- Set "my_player_configuration_token" to the player configuration ID from step 2.
- See RTS@S and WebRTC plugin for more information.
- Set "my-stream-name" to the stream_name generated by Wowza for your real-time stream, for example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<!-- add the following script tag to the head element on the page -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/rts.min.js"></script>
</head>
<body>
<h1>Playback</h1>
<div id="player">
</div>
<script>
flowplayer("#player", {
src: {
type: "wowza/rts",
streamName: "my_stream_name",
subscriberToken: "my_playback_token"
},
token: "my_player_configuration_token"
})
</script>
</body>
</html>
4. Test your stream playback
- Open the publisher page from step 2 in a browser window.
- Start your video source from the publisher page. As soon as you open the publisher page, the broadcast beings in Wowza Video.
- Open the viewing page you created in step 3 and confirm your stream is playing as you expect.
- After confirming the stream plays as expected, close your browser windows.
