webrtmp-sdk

JavaScript SDK for streaming media via RTMP from the Web. Originally designed for Livepeer.com, but can be used for any other service by running your own webrtmp-server.

This SDK works best on Chrome Desktop, as it currently only supports WebSocket on H.264-capable browsers. We are working on WebRTC support to allow the use of non-Chrome and non-Desktop browsers. Check out the Browser Support section for more.

Installation

CDN

Add the following script tag to the header of your HTML file:

<script src="https://unpkg.com/@livepeer/[email protected]/dist/index.js"></script>

The API will be available as a global named webRTMP:

const { Client } = webRTMP

Package Managers

yarn

yarn add @livepeer/webrtmp-sdk

npm

npm install @livepeer/webrtmp-sdk

The API can then be imported as a regular module:

const { Client } = require('webrtmp-sdk')

Usage

In order to stream through Livepeer, you are going to need a secret streamKey, which can be obtained by following these steps:

1. Create Livepeer Account at livepeer.com;
2. Go to the Livepeer Streams Dashboard;
3. Create a stream;
4. Grab the stream key and replace the {{STREAM_KEY}} in the example below.

const client = new Client()

async function start() {
  const streamKey = '{{STREAM_KEY}}'

  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  })

  const session = client.cast(stream, streamKey)

  session.on('open', () => {
    console.log('Stream started.')
  })

  session.on('close', () => {
    console.log('Stream stopped.')
  })

  session.on('error', (err) => {
    console.log('Stream error.', err.message)
  })
}

start()

NOTE: If you have multiple streaming users you will need a separate streamKey for each of them. So you should have a backend service programmatically create a stream through Livepeer API and return the streamKey for your front-end. Check out Livepeer API Documentation on how to get an API key and then how to create a stream.

Browser Support

We provide a utility function to check whether the current browser is supported by the SDK:

const { isSupported } = require('@livepeer/webrtmp-sdk')

if (!isSupported()) {
  alert('webrtmp-sdk is not currently supported on this browser')
}

Examples

The examples folder at the root of this repository contains two projects:

• webrtmp-static, implemented in vanilla HTML, CSS and JavaScript. Check it out on CodePen.
• webrtmp-react, implemented with React (created using create-react-app).

For a full working example, check out justcast.it (source code).

Contributing

Pull Requests are always welcome!

License

MIT