@livepeer/webrtmp-sdk

[[ DEPRECATED ]] webrtmp-sdk

THIS SDK IS DEPRECATED. REACT DEVELOPERS SHOULD USE THE NEW BROADCAST SDK, AND ALL OTHER DEVELOPERS SHOULD FOLLOW THIS GUIDE ON WEBRTC BROADCASTING

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/webrtmp-sdk@0.2.3/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:

• Create Livepeer Account at livepeer.com;
• Go to the Livepeer Streams Dashboard;
• Create a stream;
• 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