Deliver real-time streams to viewers with Wowza Video

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.

We have three options for configuring your streaming publish and playback clients: the Javascript SDK for Real-Time Streaming, OBS fo Real-Time Streaming at Scale, and RTMP. You need to create and host a viewer page using HMTL and Javascript to use Real-Time Streaming at Scale with any configuration.

You must use the Javascript SDK to stream playback.

Before you start


You should be familiar with the following concepts:

You should have access to the following items:

  • A RTS@S license. To enable and purchase capacity for Real-Time Streaming at Scale for your account and access the /real_time operations, contact 720.279.8163 or schedule a call.

1. Create a Real-Time Stream

  1. Under Advanced on the left navigation bar, click Real-Time Streams, and then click Add Real-Time Stream.
  2. Enter a Real-Time Stream Name

    Note: Currently, the furthest date you can set for expiration is the year 2150.

  3. Select a Region to set the regional server the stream is distributed through. Select the region closest to your broadcast location for the most reliable stream.

     
  4. Click Add. 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. Configure your video source

Now that you have created your stream, you have three options for configuring input to your real-time stream:

  • Javascript SDK for Real-Time streaming  – Embeds your browser-based capture into a web page. 
  • OBS for Real-Time Streaming at Scale – Wowza WebRTC – Gives you the flexibility to use multiple inputs, transitions, and other production tools traditionally provided by OBS. 
  • RTMP – Supports all professional devices. This protocol is not optimized for low latency, so it is likely to increase the streaming delay by approximately 1 second.

JavaScript SDK for Real-Time Streaming

The Javascript SDK lets you build your own custom publication page. We 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.

Use the publisher page sample code, 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.
<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 streamID = 'my-stream-name'
            const tokenID = 'my-publish-token'
        
            //Define callback for generate new tokens
            const tokenGenerator = () => wowza.Director.getPublisher({
                token: tokenID, 
                streamName: streamID
              })

            //Create a new instance
            const wowzaPublish = new wowza.Publish(streamID, 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>

OBS – Wowza WebRTC

  1. Install OBS for Real-Time Streaming at Scale for your operating system.

    Mac:
    https://www.wowza.com/downloads/wowza-obs/Wowza-OBS-Real-Time-x64-27.1.3-m95-2.23.dmg
    Debian/Ubuntu:
    https://www.wowza.com/downloads/wowza-obs/Wowza-OBS-Real-Time-x64-27.1.3-m95-2.23-u20.04.deb
    Debian/Ubuntu:
    https://www.wowza.com/downloads/wowza-obs/Wowza-OBS-Real-Time-x64-27.1.3-m95-2.23-u20.10.deb
    Windows:
    https://www.wowza.com/downloads/wowza-obs/Wowza-OBS-Real-Time-x64-27.1.3-m95-2.23.msi

  2. Click Settings, click Stream, and select Wowza WebRTC as the Service.
     
  3. Enter the Stream Name and Publishing Token provided by Wowza Video, and then click OK.
     

RTMP

Use the rtmp_url to configure your RTMP encoder. You'll need to refer to documentation for your specific encoder to determine where to input the rtmp_url settings.

Be sure you have the latest firmware installed for your encoder.

Common stream settings for encoders include:

  • [primary_server] is the ingest location of the server, such as rtmp://rtmp-realtime1.wowza.com:1935/v2/pub/
  • [host_port] is the port (by default 1935)
  • Stream key is the stream_name value, such as 6c6f5e28cfaa4467b16b47716199847c?token=70gee2f5f208615428acb633c2485d8595c90f98e677e11c55ae2c7fd71ecea2

Other encoders might use different names in their user interface, like Address instead of URL and Stream instead of Stream key. Make sure to refer to your encoder's documentation to determine the correct locations.

Tip: This topic uses the push delivery method. If you use the pull delivery method, configure the source by determining and providing the source_url value when creating the stream. The source_url must be an RTMP URL with a publicly accessible hostname or IP address.

3. Configure your viewer page

The Javascript SDK lets you build your own custom viewer page. 

We provide sample code with and without a playback token to get you started.

Page with Playback Token

Follow the instructions below if you want to create a custom viewer page for a stream that has a playback token.

Note: Ensure the playback token name matches the one provided in Wowza Video. Refer to step 1 above.
<!-- add the following script tag to the head element on the page -->
<script src='https://www.wowza.com/downloads/rts-sdk/wowza.umd.js'></script>

<!-- add the following html and javascript to the page at the position where you want the player to be displayed -->
<!-- set padding-top to 75% for 4:3 aspect ratio or 56.75% for 16:9 aspect ratio -->
<div style="width: 100%; padding-top: 56.25%; height: 0px; position:relative;">
    <video autoplay playsinline controls muted id="my-video" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0;"></video>
</div>

<script>
    const wowza = window.wowza
    // replace [your-stream-name] with the actual stream name
    const streamID = '[your-stream-name]'
    // If a Playback Token is configured, then add it here
    const tokenID = '[your-playback-token]'


    const video = document.getElementById('my-video');
    const tokenGenerator = () => wowza.Director.getSubscriber({ streamName:streamID, subscriberToken: tokenID });
    const wowzaView = new wowza.View(streamID, tokenGenerator, video);
    try {
        wowzaView.connect()
    } catch (e) {
        console.log('There was an error while trying to connect with the publisher', e)
        wowzaView.reconnect()
    }
</script>

Page without Playback Token

Use this viewer page sample code, making sure to:

  • Set 'my-stream-name' to the stream_name for the stream, for example: 11ad1f62a39a4287895d13ac28c0a820
     
<html>
  <head>
        <script src='https://www.wowza.com/downloads/rts-sdk/wowza.umd.js'></script>
  </head>
  <body>
    <video controls autoplay id="my-video"></video>
    
    <script>
        const wowza = window.wowza

        // Get Media Element
        const video = document.getElementById('my-video')

        const streamName = "my-stream-name"

        //Define callback for generate new token
        const tokenGenerator = () => wowza.Director.getSubscriber({
            streamName: streamName
        })

        //Create a new instance
        const wowzaView = new wowza.View(streamName, tokenGenerator, video)

        //Start connection to publisher
        try {
            wowzaView.connect()
        } catch (e) {
            
            console.log('Connection failed, handle error', e)
        }
    </script>
  </body>
</html>


4. Test the connection

  1. Start your video source from the publisher page, OBS, or the encoder.
  2. Open the file that contains the viewer page code in a web browser to confirm the stream is running.