OvenLiveKit for Web is a JavaScript-based Live Streaming Encoder
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.
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.
<script src="https://cdn.jsdelivr.net/npm/ovenlivekit@latest/dist/OvenLiveKit.min.js"></script>
$ npm install ovenlivekit
import OvenLiveKit from 'ovenlivekit'
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');
});
You can see a quick demo in action by cloning the repository.
$ git clone https://github.com/AirenSoft/OvenLiveKit-Web.git
$ cd OvenLiveKit-Web
$ npm install
$ npm run start
Initialization and destroying instance
OvenLiveKit.create()
Configuration
instance.remove()
Input device listing
OvenLiveKit.getDevices()
Media APIs
instance.attachMedia(videoElement)
instance.getUserMedia()
instance.getDisplayMedia()
instance.setMediaStream(mediaStream)
Streaming APIs
instance.startStreaming()
instance.stopStreaming()
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
getUserMedia
, getDisplayMedia
, webSocket
, or peerConnection
.callbacks.connected
RTCPeerConnection.iceConnectionState
becomes connected
.callbacks.connectionClosed
ice
| websocket
) Notes which connection is closed.onclose
event occurs, or when RTCPeerConnection.iceConnectionState
changes to failed
, disconnected
, or closed
.callbacks.iceStateChange
RTCPeerConnection.iceConnectionState
changes.instance.remove()
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()
videoinput
, audioinput
, audiooutput
, other
is available input/output devices. You can use deviceId
to specify a device to streaming or label
to make device selection UI.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)
<video>
elementinstance.getUserMedia(constraints)
constraints
parameter. The device ID to be used in the constraints
parameter can also be obtained from OvenLiveKit.getDevices()
.constraints
parameter. However, if you want to control the device stream strictly (e.g., specify input devices, video resolution, video frame rates), you can control it by passing the constraints parameter.instance.getDisplayMedia(constraints)
instance.setMediaStream(stream)
setMediaStream
function is designed to let developers directly attach an external or pre-existing MediaStream. This can be particularly useful when you're sourcing the stream not directly from user input devices, but other origins.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()
OvenLiveKit for Web is licensed under the MIT license.
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: