Deliver real-time streams to viewers with Wowza Video Legacy

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 can use the Javascript SDK to stream playback. Alternatively, consider using the Wowza Flowplayer Real-Time Streaming plugin for playback if you need to embed and configure the player on your own page. Wowza Flowplayer is included as part of your Wowza Video subscription. 

Before you start

---

You should be familiar with the following concepts:

• Real-time streaming workflows. See About real-time streaming for more information.
• HTML and Javascript.

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: If you save a real-time stream to Asset Management, Wowza Video uses the stream name for the recording and VOD file name. Because the stream name is used in the file name, we'll replace special characters to avoid file management issues in storage. Keep this in mind if you're looking for your asset or file on the Recordings, VOD Stream, and Manage Assets list pages and you see some differences in what you entered vs what's displayed.

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. Select Save to Asset Management if you want to record the stream. By default, both an MP4 file and an HLS stream for video-on-demand (VOD) replay are created. VOD streams can take a bit of processing time as multiple renditions are created. If you only need the MP4, you can save processing time by selecting Disable VOD encoding and save only as an MP4.
    

   Note: Wowza Streaming Cloud subscribers only have the option to create an MP4 recording. Asset Management is available to Wowza Video subscribers only.

5. 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.

<!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>

OBS – Wowza WebRTC

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

   Debian/Ubuntu:
   https://www.wowza.com/downloads/wowza-obs/wowza-obs-1.4.2-28.1.2-m104-Linux-2004.deb
   Debian/Ubuntu:
   https://www.wowza.com/downloads/wowza-obs/wowza-obs-1.4.2-28.1.2-m104-Linux-2204.deb
   
   Note: If you see the following error when you install, the installation likely still succeeded: N: Download is performed unsandboxed as root as file '/home/user/wowza-obs-1.4.2-28.1.2-m104-Linux-2204.deb' couldn't be accessed by user '_apt'. - pkgAcquire::Run (13: Permission denied)
   Windows:
   https://www.wowza.com/downloads/wowza-obs/wowza-obs-x64-1.4.2-28.1.2-m104.msi
   Mac:
   https://www.wowza.com/downloads/wowza-obs/Wowza-OBS-Real-Time-1.4.2-28.1.2-m104-macos-arm64.dmg
   Mac:
   https://www.wowza.com/downloads/wowza-obs/Wowza-OBS-Real-Time-1.4.2-28.1.2-m104-macos-x86_64.dmg

2. Click Settings, click Stream, and select Wowza WebRTC as the Service.
    
3. Enter the Stream Name and Publishing Token provided by Wowza Video.
4. Switch to the Output tab, click Enable Custom Encoder Settings (Advanced) and enter bframes=0 in the Custom Encoder Setting field.  
5. 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. 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 the sample code below with and without a playback token to get you started.

Tip: Consider using the Wowza Flowplayer Real-Time Streaming (WebRTC) plugin for playback instead of the Javascript SDK. The code samples are included on the plugin page. Wowza Flowplayer is included as part of your Wowza Video subscription. 

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.

<!DOCTYPE html>
<html>
  <head>
    <!-- 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>
  </head>
  <body>
    <!-- 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>

      <script>
        const wowza = window.wowza
        // replace [your-stream-name] with the actual stream name
        const streamName = '[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:streamName, subscriberToken: tokenID });
        const wowzaView = new wowza.View(streamName, tokenGenerator, video);
        try {
          wowzaView.connect()
        } catch (e) {
          console.log('There was an error while trying to connect with the publisher', e)
          wowzaView.reconnect()
        }
      </script>
    </div>
  </body>
</html>

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.