Wowza Video JavaScript SDK for Real-Time Streaming at Scale

With Real-Time Streaming at Scale in Wowza Video, you can deliver interactive live streams with as little as half-second latency to audiences of up to a million viewers.

The Wowza Video JavaScript SDK for Real-Time Streaming at Scale is used for developing browser-based broadcasting of real-time streams to Wowza Video and for creating playback applications for large audiences. If you're building an application for real-time streaming that leverages the Wowza Video service, the SDK accelerates the development of interfaces for publishing and viewing real-time streams.

You must obtain a license for Real-Time Streaming at Scale to add this capability to your new or existing account. Contact sales@wowza.com for more information.

Table of contents

  • Installation
  • Basic usage
  • SDK documentation

Installation

Add the following tag to the <head> of your publisher and viewer pages to use the SDK UMD module. Then you can use the wowza global variable.

<script src='https://www.wowza.com/downloads/rts-sdk/wowza.umd.js'></script>

Or if you are building an application with Node.js, you can install the SDK package to your dependencies.

$ npm i --save @wowzamediasystems/sdk-rts

Basic usage

These simple examples demonstrate how to broadcast a real-time stream from a browser to Wowza Video (publisher application) and then play the real-time stream from a browser (viewer application). The following publisher and view application examples include options for using the SDK with either the UMD module or NPM package.

You also need to create a real-time stream with the Wowza Video REST API or UI. This provides the stream name and publishing token to use in your publisher and viewer application code.

Publisher application

Using UMD module

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

Using NPM package

import { Director, Publish } from '@wowzamediasystems/sdk-rts'

//Define callback for generate new tokens
const tokenGenerator = () => Director.getPublisher({
    token: 'my-publishing-token', 
    streamName: 'my-stream-name'
  })

//Create a new instance
const wowzaPublish = new Publish(streamName, tokenGenerator)

//Get User camera and microphone
const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })

//Publishing Options
const broadcastOptions = {
  mediaStream
}

//Start broadcast
try {
  wowzaPublish.connect(broadcastOptions)
} catch (e) {
  console.log('Connection failed, handle error', e)
}

Viewer application

Using UMD module

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

Using NPM package

index.html

<html>
  <head>
    ...
  </head>
  <body>
    <video controls autoplay id="my-video"></video>
    
    <script src='viewer.js'></script>
  </body>
</html>

viewer.js

import { Director, View } from '@wowzamediasystems/sdk-rts'

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

//Define callback for generate new token
const tokenGenerator = () => Director.getSubscriber({
    streamName: 'my-stream-name'
  })

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

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

SDK documentation

You can find the latest SDK documentation, including additional examples, in this JavaScript SDK reference.

For tutorials on using Real-Time Streaming at Scale with the Wowza Video UI or REST API and the SDK, see the following articles: