videojs-webrtc-plugin

Plugin for viewing streams located on the ant-media server. There is also a function to change the resolution of the stream

Table of Contents

• Installation
• Issues
• Usage
  • Source Object
    • streamUrl
    • iceServers
  • <script> Tag
  • Browserify/CommonJS
  • RequireJS/AMD
  • Handling error-callbacks
• License

Installation

npm install --save @antmedia/videojs-webrtc-plugin

Issues

Please create issues at @ant-media/Ant-Media-Server

Usage

To include videojs-webrtc-plugin on your website or web application, use any of the following methods.

Source Object

streamUrl

Ant-MediaServer stream address format:

ws://[ant-address]/[app]/[streamId].webrtc?token=[token(opt)]&subscriberId=[subscriberId(opt)]&subscriberCode=[TOTP-code(opt)]

link example:

ws://12.23.322.157:5080/LiveApp/stream1.webrtc

parameters:

• token (optional) - a one-time token generated for the stream (in case the stream is protected by the one-time token protection mechanism
• subscriberId (optional) - subscriber Id. Required if the stream is protected by a TOTP password
• subscriberCode (optional) - generated TOTP password. Required if the stream is protected by a TOTP password

iceServers

Array of Ice-servers (STUN, TURN) in JSON string format to establish a WebRTC connection example:

'[ { "urls": "stun:stun1.l.google.com:19302" } ]'

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-webrtc-plugin.min.js"></script>

<div id="video_container">
    <video id=video-player width=960 height=540 class="video-js vjs-default-skin" controls>
        <source
           src="ws://localhost:5080/LiveApp/stream1.webrtc" iceServers = '[ { "urls": "stun:stun1.l.google.com:19302" } ]'
           >
      </video>
</div>
<script>
  var player = videojs('my-video');
</script>

Browserify/CommonJS

When using with Browserify, install videojs-webrtc-plugin via npm and require the plugin as you would any other module.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-webrtc-plugin');

var player = videojs('my-video');

player.src({
  src: 'ws://localhost:5080/LiveApp/stream1.webrtc',
  iceServers: '[ { "urls": "stun:stun1.l.google.com:19302" } ]'
});

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-webrtc-plugin'], function(videojs) {
  var player = videojs('my-video');

  player.src({
    src: 'ws://localhost:5080/LiveApp/stream1.webrtc',
    iceServers: '[ { "urls": "stun:stun1.l.google.com:19302" } ]'
  });
});

Handling error-callbacks

Ant-MediaServer has functionality to handle errors coming from the backend. To catch an error, you need to subscribe to the event "ant-error":

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-webrtc-plugin.min.js"></script>
<script>
  var player = videojs('my-video');

  player.src({
    src: 'ws://localhost:5080/LiveApp/stream1.webrtc',
    iceServers: '[ { "urls": "stun:stun1.l.google.com:19302" } ]'
  });
  player.on('ant-error', function(event, errors) {
    console.log(errors);
  });
</script>

License

MIT. Copyright (c) Ant Media