Supported Codecs

  • H264, VP8, VP9 video codecs.
  • Opus audio codec.

Supported Servers

WebRTC Streaming Configuration

Publisher Configuration

To enable a player as a publisher set the player needs the publisher config enabled.

{
    "rtc": {
        "publisher": true
    }
}

Configuring stream name and server application

{
    clip: {
        "live": true,
        "sources": [
            { "type": "application/webrtc", "src": "myStream", "appName": "webrtc"}
        ]
    }
}

Server Configuration

The server config, sets up WebRTC connectivity with a particular server.

  • antmedia
  • wowza
  • kurento
  • dolbyio
  • kinesisvideo
  • ovenmedia
  • unrealmedia
  • antmedia-conference
  • wowza-conference
  • kurento-conference
  • dolbyio-conference
  • ovenmedia-conference

Options

Here is a list of the configuration options:

Property Description Default
publisher Enable the player as the publisher. Which enables the full WebRTC encoder publishing application. false
serverURL The host of the websocket service. For Wowza the url is configured from the host.
userData Custom data to send to the Wowza server. This can be used in the custom websocket for authentication.
server The server type. For conferencing, configure with the postfix -conference. wowza
debug Turns on full peer connection debug logging. false
prefferedCodecs A codecs filter for the preferred codec. For Wowza H264 requires a level filter. {
"audio": {
"codec": "opus",
},
"video": {
"codec": "H264",
"level": "42e01f"
}
}
opus Opus codec configs { "stereo": 1 }
ui CSS selectors for managing external select menus with data and control of WebRTC and media options. Disable this if using external controls with the device data provided. {
"audioInput": "audioSource",
"audioOutput": "audioOutput",
"videoSource": "videoSource",
"bandwidth": "bandwidth",
"resolution": "resolution",
"rates": "rates",
"container": "#encoder-menu"
}
dataCallback To manage the encoder controls externally, the device data is provided in this callback to build the device menus. And return with the configured options.
autoStartDevice Enable to auto activate the device on initialisation. Or turned on when clicking the player. false
maxBitrateBitrate Configure an initial max bitrate bitrate. This is required for Chrome to function with Wowza. 2000
minVideoBitrate Minimum video bitrate. Used on Chrome only. Wowza requires it to be the max bitrate. 2000
startVideoBitrate Starting video bitrate. Used on Chrome only. 300
audioVideoBitrate Audio codec bitrate. 64
recording Enable recording of the local stream with a download option. Config requires the filename for the download and the mimetype and codec. For H264 use video/mp4 and H264 as the codec. server enables server side recording commands.
pcConstraints Set browser specific Peer connection options.
toggleScreen Enable camera / share screen switching features. false
floatedControls Move all the controls buttons to underneath the player. false
transportTcp Enable TCP transport for OvenMediaEngine false
seperateScreen For video conference, start screen sharing as a seperate stream from the camera.
publishToken JWT or other signed token to authenticate Wowza publishing using a custom provider module.
subscribeToken JWT or other signed token to authenticate Wowza subscribing using a custom provider module.
peerStats Enable peer stats collection false
peerStatsInterval the interval for stats collection in ms 5000
echoCancellation Audio echo cancellation true
noiseSuppression Audio noise suppression true
roomName Conferencing room name required for some servers
adhocHls Conferencing subscribe as HLS for Adhoc RTMP streams false
tokenService Callback with a Promise to refresh a publishToken for Wowza publishing
meterAutoStart Auto start the audio meter. When the audio meter is hidden in settings use the api methods to toggle on and off for performance reasons. true

Peer Connection Options

{
    "optional": [
        { "googIPv6": true },
        { "googImprovedWifiBwe": true },
        { "googDscp": true },
        { "googSuspendBelowMinBitrate": true },
        { "googScreencastMinBitrate": 300 },
        { "googCombinedAudioVideoBwe": true },
        //turn off resolution changes
        { "googCpuOveruseDetection": false },
        { "googCpuOveruseEncodeUsage": false },
        { "googCpuUnderuseThreshold": 55 },
        { "googCpuOverUseThreshold": 85 }
    ]
}

Enable Stream Recording

{
    "mimeType": "video/webm",
    "codec": "VP9",
    "name": "recording1"
}

WebRTC Group Call Conferencing Options

Property Description Default
studioMode Enable / disable conference studio mode. In studio mode participants first join a lobby. true
container The container that wraps the room and featured container.
roomContainer The container for the participants added to the room.
featuredContainer The container for the featured participant.
lobbyContainer The container selector for participants joining the conference lobby.
playerTemplate The player container template.
lobbyPlayerTemplate The lobby player container template.
mergerContainer The container selector for the WebGL video merger for broadcasting and recording group conferences.
bgImage The background image to use as a texture for the video merger view.
autoPublish Automatic broadcast the video merger stream when the master is publishing.
host Enable participant as the conferencing master. This enables the conferencing api methods.
hlsTemplate When using Wowza. The HLS url template to use when subscribing in a group call as HLS. https://{serverURL}/{appName}/{streamName}/playlist.m3u8
dashTemplate When using Wowza. Configure a dash template to subscribe to either RTMP or server side streams.
subscribeHls Set to true to subscribe to remote participants in a group call as HLS instead of WebRTC.
peerSubscribe Required for Kurento group call conferencing.
maxWidth Maximum width for the conferencing merger WebGL renderer 1280
maxHeight Maximum height for the conferencing merger WebGL renderer 720
layoutStates A set of room layout states css selectored that can be updated on the room. This changes the layout of the featured participant mode. And stretched mode for two or three participants. ["stretch", "right", "bottom", "room-default", "overlayed"]
stalledInterval The interval to checked for stalled peer subscribes 5000
fullscreenFeatured Enable featuring participants using the fullscreen player button true
subscribeMerger Enable participat as a merger stream subscriber false

Subscriber Options

Property Description Default
serverURL The host of the websocket service. For Wowza the url is configured from the host.
server The server type. For now Wowza is supported with other signalling servers after. wowza
userData Custom data to send to the Wowza server.
debug Turn on internal peering logs. false

Virtual Background Removal Plugin Options

Property Description Default
renderType The background rendering type. Either mediapipe, or screen mediapipe
bgImage url to the background image to use as a video background.
bgImage The background poster image for the background texture of the video rendering.
backgroundColor Set a background color instead of a background image.
scaledWidth The width to scale the video to when switching to screensharing as the background. In a percentage of the screen width.
maxHeight a max height to set the rendering canvas. A canvas stream uses software encoding therefore more cpu in 1080p so a height restriction is needed for efficient cpu usage.

Player API Methods

Mathod Description Arguments
togglePublish Toggle publishing
toggleRecord Toggle local or server recording
toggleDevices Toggle media devices on / off
startDevice Start the media device
toggleAudio Mute / unmute audio tracks
toggleVideo Toggle video tracks off / on
toggleScreenShare Launch screen sharing
send Send data over a data channel for servers that support it.
sendSignalMessage Send a message over websocket
getDevices Get the available devices in a map list
getDevice Get a specific device with a specific media constraint and specificed by an index constraint, videoIndex, audioIndex
setStream Replace the stream with a specific MediaStream MediaStream
setVideoStream Replace the video track with a specific MediaStream track videostream
setAudioGain Set the output publish audio gain of 0-1 audiogain
downloadRecording For local recording download the generated recording
getParticipants Get available conferencing participants
getParticipant Get a specific participant specified by the stream name
featureParticipant Make a participant the speaker. Specified by selected participant or argument. name
removeFeaturedParticipant Remove a participant the speaker. Specified by selected participant or argument. name
toggleMuteParticipant Mute a participant. Specified by selected participant or argument. name
addToRoom Add participant to the room from the lobby in conference studio mode name
removeFromRoom Remove participant from the room name
startPlaylistStream Start server playlist when using Wowza name, playlist
stopPlaylistStream Stop server playlist name

updateRoomConfig | Updates the room configuration signalled to other participants with any json config. getRoomConfig | Gets the current room config signalled to the server. setRoomState | Sets the current room state layout. For changing position of participants in featured view and stretched view. getRoomState | Get the current room state sendRoomMessage | Signal a custom message to the room getParticipants | Get the current participants added to the room. getLobbyParticipants | Get the current lobby participants. getParticipant | Get information for the current room participant. getLobbyParticipant | Get information for the current lobby participant. startMeter | Enable the audio meter stopMeter | Disable the audio meter toggleAudioMeter | Toggle the audio meter on and off

Wowza WebRTC Configuration

Provided is a set of example configs for wowza with install script to get the WebRTC signal server working. Provided is a script to convert PEM SSL certificates into JKS format for Wowza.

An SSL certificate is required to be configured into the Secure SSL provider config inside VHost.xml.

The Websocket provider also needs to be configured inside VHost.xml

Enable Wowza Websocket

Enabled within the SSL host within the VHost.xml

<HTTPProvider>
    <BaseClass>com.wowza.wms.webrtc.http.HTTPWebRTCExchangeSessionInfo</BaseClass>
    <RequestFilters>*webrtc-session.json</RequestFilters>
    <AuthenticationMethod>none</AuthenticationMethod>
</HTTPProvider>

Rest api for server recording

Enable a custom api http provider for server recording for publishers.

<HTTPProvider>
    <BaseClass>org.electroteque.StreamRecorderProvider</BaseClass>
    <RequestFilters>*api</RequestFilters>
    <AuthenticationMethod>none</AuthenticationMethod>
</HTTPProvider>

Enable Custom Wowza Websocket

Provided is a custom websocket Wowza project to enable stream authentication.

<HTTPProvider>
    <BaseClass>org.electroteque.webrtc.HTTPProviderGroupCallWebSocket</BaseClass>
    <RequestFilters>*webrtc-room-session.json</RequestFilters>
    <AuthenticationMethod>none</AuthenticationMethod>
</HTTPProvider>

Wowza WebRTC Conferencing Configuration

To enable the conferencing examples. The supplied WebRTCCustomSignalServer Wowza IDE project, needs to be imported and built to be configured and loaded.

This provides the custom WebRTC signal server for WebRTC publishing with token protection. Another WebSocket provider is for group call signal messaging and to notify when a WebRTC publish begins.

<HTTPProvider>
    <BaseClass>org.electroteque.webrtc.HTTPWebRTCExchangeSessionInfoCustom</BaseClass>
    <RequestFilters>*webrtc-session.json</RequestFilters>
    <AuthenticationMethod>none</AuthenticationMethod>
</HTTPProvider>
<HTTPProvider>
    <BaseClass>org.electroteque.webrtc.HTTPProviderGroupCallWebSocket</BaseClass>
    <RequestFilters>*webrtc-room-session.json</RequestFilters>
    <AuthenticationMethod>none</AuthenticationMethod>
</HTTPProvider>

Wowza Security Token

JWT Token support makes used of RSA certificates for authentication. That need to be hosted in Wowza and on the application server end.

Supplied is an example spring application to generate the JWT tokens using RSA certificates supplying an expiry and an issuer.

Ant Media Server Options

For publish and subscribe stream tokens and video conferencing interval settings.

Property Description Default
roomCheckInterval Interval to check for new participant streams 5000
pingInterval Server keep alive interval 30000
enablePing Enable keep alive poller false
mode Publishing mode legacy
token Publish / subscribe stream token
subscriberId Used to generate thesecurity OTP code
subscriberCode The security OTP code
apiKey The JWT key for the rest service. Required for server side recording

Ant Media Server WebRTC Configuration

SSL is required to be configured for WebRTC to function. Ant Media supplies a helper script to import an SSL certificate and private key into the server host configs.

Documentation for SSL setup.

For Letsencrypt SSL configuration , the helper script generates this internally. This requires port 80 external access for the verification server.

sudo ./enable_ssl.sh -d example.com

If the verification server is inaccessible. A DNS verification is possible to be imported into the script. Letsencrypt scripts are supplied for generating these certificates.

certbot -d example.com -m [email protected] --manual --preferred-challenges dns certonly

Import external generated certificates

sudo ./enable_ssl.sh -f yourdomain.crt -p yourdomain.key -c yourdomainchain.crt -d yourdomain.com

Dolby.io Options

{
    "dolbyio": {
        "accountId": "",
        "publishToken": "",
        "subToken": ""
    }
}
Property Description Default
accountId Dolby.io account id shown in the api key section.
publishToken The publishing token created in the api section. This is used for generating the signal server url unless supplied using serverURL
subToken Subscriber token generated by the backend using the secret key and Dolby.io api. This is used when authenticated subscriber is enabled for the publish token.
userData Custom data to send to the Wowza server.
debug Turn on internal peering logs. false

Dolby.io WebRTC Configuration

In the Dolby.io console. A streamname is required to be added. This will generate a publish key. A wildcard asterix can be used to link a publish key to any stream name. Click the Token Required next to the Secure Viewer section. This turns on token authentication for subscribers.

Dolby.io Console

After adding a stream. A Publish key and Account ID is displayed to configure the publisher and subscriber with.

Dolby.io Console

Generating Subscriber Token

Using the Dolby.io API. A subscriber token can be generated with domain restriction. This requires the Secret Key which is different to the Publish Key. A helper script is supplied to generate these tokens and test the tokens work with the api.

curl -H "Authorization: Bearer secretkey" -H "Content-Type: application/json" https://api.millicast.com/api/subscribe_token -d '{"label": "LiveStreamLabel", "streams": [{"streamName": "StreamName"}], "allowedOrigins": ["*.domain.com"]}'

Ovenmedia Engine Options

For publish and subscribe stream tokens and tcp connection settings.

Property Description Default
transportTcp Enable TCP transport. Seems to be required for the Docker image. false
policy Signed Policy token for stream security

AWS Kinesis Options

Supplied is lambda and authorizer scripts to handle the signal channel ice servers and signed WebSocket url. Supplied is scripts to generate encrypted JWE tokens for the token authorizer. JWE provides encrypted token payloads.

"kinesisvideo": {
            "publishUrl": "https://api.electroteque.org/publish",
            "publishToken": "eyJhbGciOiJBMjU2S1ciLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIn0.jtz-Wru3hxJlLmaBcgPzHgLwn-wPHEgo_cRRFg6DhR0toIHFBPmKXDUTaVlG_jBCo9TQ8VPFXoI03UK4QBOYXcKdgog0EOf7._TKhqyvVDOkZLw83ObkXVg.NFTZe7zRQH-syEC6Zn2izADtOdbM6tGyrGycfd7DYh3M7npPdXltMu50uQG8Q-A-09p4-TimibbevbxxShBjTaCGwZBMfevdQW6KNQiLXAFQSP2rlqfTK-Kf-cT-RZ3_VeeGopbWhzJ-AJbwVDV3_uQ8R0yPP2TanfBiy8etb5mNzqexbqRp5PFI7P54amcj.qmVpOoZi1mByhN88n8Jl_7Rune9cTnBNTf6neWrpEQE",
}
"kinesisvideo": {
            "subscribeUrl": "https://api.electroteque.org/subscribe",
            "subscribeToken": "eyJhbGciOiJBMjU2S1ciLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIn0.acMKeL-pp0aAxlYeV3C3YzqxgCq2uPnBlEae7SCsV3ic4nBQt207lfL1-XinVvVHXUVkG2r3-S2TFtsbNNchhNscFH_FiVxh.qZ9fmfleXUtXfvHChFwPNg.Zx_9MSy4osZsT0VUYZF3C9Mknc8o3vigrcVZUboO9TBWZu8DpUdxBmR3ddA4Dk--Zjl6_5un9nBXD7z2ZKMbjsaqT2w4udI9WNjOstpSFjhbtC6e7laOfBv2ZIeKGfkk8ogZ3ZnYyXlyU6zM1nAvKfD3DezTCPzVQbHMa5N6bOlYJce4lCl_2wwWtgi-NFfBv8z-ZrcOzxlx9HrqUqUyAA.fybw2HIJANCYuaKli1I2xbt3606WdyGqeYADVLvh2LE"
}
"kinesisvideo": {
            "credentials": {
                "accessKeyId": "",
                "secretAccessKey": ""
            }
}
Property Description Default
region The AWS region for the signalling channel.
publishToken The publishing token for custom AWS Lambda authorizer.
subcribeToken The viewer subscriber token for custom AWS Lambda authorizer.
accessKeyId The AWS access key id
secretAccessKey The AWS secret key

Kurento WebRTC Configuration

Kurento Media Server comes in two parts. The Kurento Media Server and a java / node JSONRPC client WebSocket server.

Provided is a one to many application aswell as a group call application to run the group call example.

The one to many application endpoint is one2many

The group call application endpoint is groupcall

Start the Kurento server first with

export MAKEFLAGS="-j$(nproc)"
./bin/kms-build-run.sh

Start the Kurento client Websocket server with

mvn -U clean spring-boot:run -Dkms.url=wss://localhost:8433/kurento

Unreal Media Options

Property Description Default
transportTcp Enable tcp ice candidate communication.
sinportPort Enable ice candidate communication over a single port.
publicIp The public ip of the server for ice candidate resolving.
publishToken The password used for publishing
secureToken The token for playback security.

Vue.JS Support

Vue.JS 2 is supported. The plugin needs to be treated as a 3rd party script and loaded externally before initializing the player. The CSS can be imported as normal. A window variable videojs is required. Example documentation is provided. Example documentation.

<template>
  <div>
    <video autoplay muted playsinline webkit-playsinline ref="videoPlayer" class="video-js"/>
  </div>
</template>

<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import { loadScript } from "vue-plugin-load-script";
import videojs, {VideoJsPlayer} from 'video.js';
import "video.js/dist/video-js.css";


declare module 'video.js' {
  export interface VideoJsPlayer {
    rtcsubscriber: (options?: Partial<any>) => any;
  }
}

declare global {
    interface Window { videojs: any }
}

@Component
export default class App extends Vue {
  @Ref("videoPlayer") private videoPlayerEl!: HTMLVideoElement;
  private videoJsPlayer!: VideoJsPlayer;

  beforeCreate() {
    window.videojs = videojs;
  }

  mounted() {
    //load plugin then initialize player
    loadScript("js/webrtc-subscriber-7.10.1.js")
    .then(() => {
      this.videoJsPlayer = videojs(this.videoPlayerEl, {
        aspectRatio: "16:9",
        controls: true,
        liveui: true,
        "sources": [
            { "type": "application/webrtc", "src": "myStream", "appName": "webrtc"},
            { "type": "application/x-mpegurl", "src": "http://rtc.electroteque.org:1935/webrtc/myStream_360p/playlist.m3u8"}
        ],
        plugins: {
          "rtcsubscriber": {
                "applicationName": "webrtc",
                "debug": true,
                "server": "antmedia",
                "server": "wowza",
                "serverURL": "rtc.electroteque.org"
            }
        }

      });
    })
    .catch(() => {
      // Failed to fetch script
    });




  }

  beforeDestroy() {
    if (this.videoJsPlayer) {
      this.videoJsPlayer.dispose()
    }
  }
}
</script>
<style lang="scss">


</style>