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 Video for your real-time stream, for example,
8d304b93f1684320a54f2798666eeca7. - Set my-publish-token to the Publish Token generated by Wowza Video 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 can use the Wowza Flowplayer RTS@S and WebRTC plugin to embed a player in a web page. While you can build your own custom publication page for this tutorial, we provide some sample code to get you started. To use the WebRTC plugin, we also need a player configuration ID.
- In Wowza Video, go to Players > Tokens.
- Find your player token. To create a new player token, see Create or revoke a player token in Wowza Video.
- 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 Video for your real-time stream, for example, 8d304b93f1684320a54f2798666eeca7.
- If you enabled playback security, set my-playback-security-token to the token generated by Wowza Video for your real-time stream, for example, 97e52731bc21ef66e4c05a8ee1e28b64bf5f9db728573d94e690277cea9215bc. You can retrieve a subscriberToken via the Wowza Video REST API. Otherwise, remove subscriberToken from the code sample.
- Set my-player-token to the player token from step 2.
- See RTS@S and WebRTC plugin for more information.
<!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-security-token"
},
token: "my-player-token"
})
</script>
</body>
</html>
4. Test your stream playback
You can use these steps to test your stream playback.
- Open the publisher page from section 2 in a browser window.
- Start your video source from the publisher page. When you open the publisher page, the broadcast begins in Wowza Video.
- Open the viewing page you created in section 3 and confirm your stream is playing as you expect.
- After confirming the stream plays as expected, close your browser windows.
