Home

Awesome

OvenLiveKit for Web

What is OvenLiveKit for Web?

OvenLiveKit for Web is a JavaScript-based Live Streaming Encoder that supports WebRTC optimized for OvenMediaEngine, Sub-Second Latency Streaming Server. OvenLiveKit for Web relies on the browser's WebRTC API and wraps it to make it easy for you to broadcast WebRTC streams to OvenMediaEngine.

Demo

<img src="./assets/05_OvenSpace_230214.png" style="max-width: 100%; height: auto;">

OvenSpace is a sub-second latency streaming demo service using OvenMediaEngine, OvenPlayer and OvenLiveKit. You can experience OvenLiveKit in the OvenSpace Demo and see examples of how it can be applied in the OvenSpace Repository.

Features

Quick Start

OvenLiveKit Demo

Installation

OveliveKit CDN

<script src="https://cdn.jsdelivr.net/npm/ovenlivekit@latest/dist/OvenLiveKit.min.js"></script>

Install via npm

$ npm install ovenlivekit

import OvenLiveKit from 'ovenlivekit'

Getting started

This is the simplest example of sending a device media stream such as a webcam to OvenMediaEngine's WebRTC Provider.

// Initialize OvenLiveKit
const ovenLivekit = OvenLiveKit.create();

// Get media stream from user device
ovenLivekit.getUserMedia().then(function () {

    // Got device stream and start streaming to OvenMediaEngine
    ovenLivekit.startStreaming('wss://your_oven_media_engine:3334/app/stream?direction=send');
});

// Or you can get media stream of your display. Choose either user device or display.
ovenLivekit.getDisplayMedia().then(function () {

    // Got device stream and start streaming to OvenMediaEngine
    ovenLivekit.startStreaming('wss://your_oven_media_engine:3334/app/stream?direction=send');
});

Quick demo

You can see a quick demo in action by cloning the repository.

  1. Clone repository
$ git clone https://github.com/AirenSoft/OvenLiveKit-Web.git

$ cd OvenLiveKit-Web
  1. Install development dependencies.
$ npm install
  1. Open the demo page using the WebPack's built-in web server.
$ npm run start

Configurations & APIs

Initialization and destroying instance

Configuration parameters could be provided to OvenLiveKit.js upon instantiation of the OvenLiveKit object.

// Configuration
var config = {
    callbacks: {
        error: function (error) {

        },
        connected: function (event) {

        },
        connectionClosed: function (type, event) {

        },
        iceStateChange: function (state) {

        }
    }
}

// Initialize ovenLivekit instance
const ovenLivekit = OvenLiveKit.create(config);

// Release all resources and destroy the instance
ovenLivekit.remove();

OvenLiveKit.create(config)

Configurations

To make the library lightweight and easy to use, only callback options are implemented now.

callbacks.error
callbacks.connected
callbacks.connectionClosed
callbacks.iceStateChange

instance.remove()

Input device listing

OvenLiveKit provides an API to get a list of user devices for convenience.

// Lists the available media input and output devices
OvenLiveKit.getDevices().then(function (devices) {

    // Got a list of user devices
    console.log(devices);

    /*
    console output is

    {
        "videoinput": [
            {
                "deviceId": "b1ab3a7041b1c9a91037b51d9c380f599f3914297b5c0ce2eb8d385dab3b8812",
                "label": "c922 Pro Stream Webcam (046d:085c)"
            }
        ],
        "audioinput": [
            {
                "deviceId": "default",
                "label": "default - Microphone(C922 Pro Stream Webcam) (046d:085c)"
            },
            {
                "deviceId": "communications",
                "label": "Communication - Microphone(C922 Pro Stream Webcam) (046d:085c)"
            },
            {
                "deviceId": "2feb7f29a130802404f47d8ad9adc9418b1a01e0a4d37e60335771aba21f328d",
                "label": "Microphone(C922 Pro Stream Webcam) (046d:085c)"
            }
        ],
        "audiooutput": [
            {
                "deviceId": "default",
                "label": "default - Headphone(2- Xbox Controller) (045e:02f6)"
            },
            {
                "deviceId": "communications",
                "label": "Communication - Headphone(2- Xbox Controller) (045e:02f6)"
            },
            {
                "deviceId": "c3d04828621712f9cc006c49486218aca0d89619ac9993809d5f082a2d13a6b0",
                "label": "Headphone(2- Xbox Controller) (045e:02f6)"
            },
        ],
        "other": []
    }
    */

}).catch(function (error) {

    // Failed to get a list of user devices
    console.log(error);
});

OvenLiveKit.getDevices()

Media APIs

OvenLiveKit also provides APIs to control a media stream from a user device.

<video id="myVideo"></video>

// Create instance
const ovenLivekit = OvenLiveKit.create();

// Attaching video element for playing device stream
ovenLivekit.attachMedia(document.getElementById('myVideo'));

const constraint = {
  audio: true,
  video: true
};

// Gets a device stream with a constraint that specifies the type of media to request.
ovenLivekit.getUserMedia(constraints).then(function (stream) {

    // Got device stream. Ready for streaming.
     ovenLivekit.startStreaming('wss://your_oven_media_engine:3334/app/stream?direction=send');
}).catch(function (error) {

    // Failed to get device stream.
    console.error("Error", error);
});

// Display media also works in the same way.
ovenLivekit.getDisplayMedia(constraints).then(function (stream) {

    // Got device stream. Ready for streaming.
     ovenLivekit.startStreaming('wss://your_oven_media_engine:3334/app/stream?direction=send');
}).catch(function (error) {

    // Failed to get device stream.
    console.error("Error", error);
});

instance.attachMedia(videoElement)

instance.getUserMedia(constraints)

instance.getDisplayMedia(constraints)

instance.setMediaStream(stream)

Streaming APIs

Congrats on getting the media stream from the user device and then ready to stream into OvenMediaEngine.

// Create instance
const ovenLivekit = OvenLiveKit.create();

ovenLivekit.getUserMedia().then(function () {

    const connectionConfig = {
        iceServers : null ,
        iceTransportPolicy: null,
        maxBitrate: null
    }

    // Got media stream from user device and start to stream to OvenMedieEngeine
    ovenLivekit.startStreaming(connectionUrl, connectionConfig);
});

instance.startStreaming(connectionUrl, connectionConfig)

ConnectionConfig

preferredVideoFormat
iceServers
iceTransportPolicy
maxVideoBitrate
sdp.appendFmtp

instance.stopStreaming()

For more information

License

OvenLiveKit for Web is licensed under the MIT license.

About AirenSoft

AirenSoft aims to make it easier for you to build a stable broadcasting/streaming service with Sub-Second Latency. Therefore, we will continue developing and providing the most optimized tools for smooth Sub-Second Latency Streaming.

Would you please click on each link below for details: