refactor: update webrtc with new web-utils version

Use now Connect.Params.endPoint instead of Connect.Params.host
Fix all the comments and new references in the code and Readme

BREAKING CHANGE: Change Connect.Params.host to Connect.Params.endPoint

README.md

@@ -48,7 +48,7 @@ import * as WebRTC from '@ceeblue/webrtc-client';
 
 ### Publish a stream
 
-To publish the stream `<streamName>` to `<endpoint>`, use the [Streamer](./src/Streamer.ts) class and the variables you saved while setting up the stream in the dashboard [Requirements](#requirements). For a full example, see push.html in [Examples](#examples).
+To publish the stream `<streamName>` to `<endPoint>`, use the [Streamer](./src/Streamer.ts) class and the variables you saved while setting up the stream in the dashboard [Requirements](#requirements). For a full example, see push.html in [Examples](#examples).
 
 ```javascript
 import { Streamer } from '@ceeblue/webrtc-client';
@@ -62,7 +62,7 @@ streamer.onStop = _ => {
 }
 const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
 streamer.start(stream, {
-   host: <endpoint>,
+   endPoint: <endPoint>,
    streamName: <streamName>,
    iceServer: {
       urls: ['turn:' + <endPoint> + ':3478?transport=tcp', 'turn:' + <endPoint> + ':3478'],
@@ -88,7 +88,7 @@ player.onStop = _ => {
    console.log('stop playing');
 }
 player.start({
-   host: <endPoint>,
+   endPoint: <endPoint>,
    streamName: <streamName>,
    iceServer: {
       urls: ['turn:' + <endPoint> + ':3478?transport=tcp', 'turn:' + <endPoint> + ':3478'],
@@ -114,15 +114,15 @@ To understand how to use the library through examples, we provide three illustra
 2. Navigate to the specified address in your browser, making sure to replace any placeholders in the URL with the variables you have copied during the [stream setup](#requirements) in the dashboard.
 
     ```html
-    http://localhost:8081/examples/streamer.html?host=<endpoint>&stream=<streamName>
+    http://localhost:8081/examples/streamer.html?host=<endPoint>&stream=<streamName>
     ```
 
 3. Click on **Start streaming**. Upon doing so, a live stream from your webcam will initiate. Should your browser request permission to access your camera, ensure to grant it.
 
 4. In the address bar of a separate browser window, enter the following address, making sure to replace the placeholders in the URL with the variables you have copied while configuring the [stream setup](#requirements) in the dashboard.
 
     ```html
-    http://localhost:8081/examples/player.html?host=<endpoint>&stream=<streamName>
+    http://localhost:8081/examples/player.html?host=<endPoint>&stream=<streamName>
     ```
 
 5. Click **Play** to start watching the live stream.

examples/player-with-timed-metadata.html

@@ -29,7 +29,7 @@ <h2>WebRTC Client Timed Metadata Player Example</h2>
             const videoElement = document.getElementById('video');
 
             const options = Util.options();
-            const host = new NetAddress(options.host || location.host, 443).toString();
+            const host = new NetAddress(options.host || location.host, 443);
             const streamName = options.stream;
             videoElement.onloadeddata = () => {
                 videoElement.play();
@@ -39,7 +39,7 @@ <h2>WebRTC Client Timed Metadata Player Example</h2>
                 videoElement.srcObject = stream;
             };
             player.start({
-                host,
+                endPoint: host.toString(),
                 streamName,
                 iceServer: {
                     urls: ['turn:' + host.domain + ':3478?transport=tcp', 'turn:' + host.domain + ':3478'],

examples/player.html

@@ -223,7 +223,7 @@ <h3 class="text-center">WebRTC Client Player Example</h3>
                         };
                         this.player.start(
                             {
-                                host:this.host.toString(),
+                                endPoint:this.host.toString(),
                                 streamName: this.streamName,
                                 accessToken: this.accessToken,
                                 iceServer: {

examples/streamer.html

@@ -367,7 +367,7 @@ <h4 class="text-center font-weight-bold">On Air</h4>
 
                                 this.streamer.start(stream,
                                     {
-                                        host:this.host.toString(),
+                                        endPoint:this.host.toString(),
                                         streamName: this.streamName,
                                         accessToken: this.accessToken,
                                         iceServer: {

package.json

@@ -41,9 +41,6 @@
         "node": ">=16",
         "npm": ">=7"
     },
-    "dependencies": {
-        "@ceeblue/web-utils": "^1.2.0"
-    },
     "devDependencies": {
         "@html-eslint/eslint-plugin": "~0.22.0",
         "@html-eslint/parser": "~0.22.0",
@@ -79,5 +76,8 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "dependencies": {
+        "@ceeblue/web-utils": "^2.2.0"
     }
 }

src/Player.ts

@@ -21,7 +21,7 @@ const RECONNECTION_TIMEOUT: number = 1000;
 /**
  * Use Player to start playing a WebRTC stream.
  * You can use a controllable version using a `WSController` as connector, or change it to use a `HTTPConnector` (HTTP WHEP).
- * By default it uses a `WSController` excepting if on {@link Player.start} you use a {@link ConnectParams.host} prefixed with a `http://` protocol.
+ * By default it uses a `WSController` excepting if on {@link Player.start} you use a {@link Connect.Params.endPoint} prefixed with a `http://` protocol.
  * With a controllable connector you can change track during the playback, what is not possible with a HTTP(WHEP) connector.
  *
  * In addition then a player with a controllable connector uses a MultiBitrate algorithm to switch track automatically
@@ -44,7 +44,7 @@ const RECONNECTION_TIMEOUT: number = 1000;
  * player.videoTrack = 1;
  * // start playback
  * player.start({
- *    host: address, // if address is prefixed by `http://` it uses a HTTPConnector (HTTP-WHEP) if Player is build without contructor argument
+ *    endPoint: address, // if address is prefixed by `http://` it uses a HTTPConnector (HTTP-WHEP) if Player is build without contructor argument
  *    streamName: 'as+bc3f535f-37f3-458b-8171-b4c5e77a6137'
  * });
  * // Tracks are in a MBR mode: video track 1 can change regarding network congestion
@@ -251,21 +251,21 @@ export class Player extends EventEmitter implements ILog {
      * Constructs a new Player instance, optionally with a custom connector
      * This doesn't start the playback, you must call {@link Player.start} method
      * By default if no connector is indicated it uses a  {@link WSController} (WebSocket {@link IController})
-     * excepting if {@link ConnectParams.host} is prefixed with a `http://` protocol in such case it uses
+     * excepting if {@link Connect.Params.endPoint} is prefixed with a `http://` protocol in such case it uses
      * instead a {@link HTTPConnector} (HTTP {@link IConnector}). To force a HTTPConnector build explicitly
      * with {@link HTTPConnector} as Connector argument.
      * @param Connector Connector class to use for signaling, or nothing to let's {@link Player.start} method determines it automatically.
      * @example
      * // Default build
      * const player = new Player();
      * player.start({
-     *    host: address, // if address is prefixed by `http://` it uses a HTTPConnector (HTTP-WHIP), otherwise it uses a WSController (WebSocket)
+     *    endPoint: address, // if address is prefixed by `http://` it uses a HTTPConnector (HTTP-WHIP), otherwise it uses a WSController (WebSocket)
      *    streamName: 'as+bc3f535f-37f3-458b-8171-b4c5e77a6137'
      * });
-     * // Force connector selection whatever the address used in host
+     * // Force connector selection whatever the address used in endPoint
      * const player = new Player(isWHIP ? HTTPConnector : WSController);
      * player.start({
-     *   host: address, // optional protocol prefix has no incidence on connector selection
+     *   endPoint: address, // optional protocol prefix has no incidence on connector selection
      *  streamName: 'as+bc3f535f-37f3-458b-8171-b4c5e77a6137'
      * })
      */
@@ -289,9 +289,9 @@ export class Player extends EventEmitter implements ILog {
 
     /**
      * Starts playing the stream
-     * The connector is determined automatically from {@link ConnectParams.host} if not forced in the constructor.
+     * The connector is determined automatically from {@link Connect.Params.endPoint} if not forced in the constructor.
      *
-     * Instead to use a {@link ConnectParams} you can prefer use a already built {@link StreamMetadata} instance to
+     * Instead to use a {@link Connect.Params} you can prefer use a already built {@link StreamMetadata} instance to
      * the same end-point, it allows to discover tracks in amount and initialize track selection to start playback.
      *
      * The `multiBitrate` option can take three different types of value:
@@ -307,12 +307,12 @@ export class Player extends EventEmitter implements ILog {
      * @example
      * // Default start with MBR activated
      * player.start({
-     *    host: address,
+     *    endPoint: address,
      *    streamName: 'as+bc3f535f-37f3-458b-8171-b4c5e77a6137'
      * });
      * // Start with selected initial track, in using a StreamMetadata object preinitialized
      * const streamMetadata = new StreamMetadata({
-     *    host: address,
+     *    endPoint: address,
      *    streamName: 'as+bc3f535f-37f3-458b-8171-b4c5e77a6137'
      * });
      * streamMetadata.onMetadata = metadata => {
@@ -352,7 +352,7 @@ export class Player extends EventEmitter implements ILog {
         }
         this._audioTrackFixed = false;
         this._videoTrackFixed = false;
-        this._connector = new (this.Connector || (params.host.startsWith('http') ? HTTPConnector : WSController))(
+        this._connector = new (this.Connector || (params.endPoint.startsWith('http') ? HTTPConnector : WSController))(
             params
         );
         this._connector.onLog = log => this.onLog('Signaling: ' + log);

src/Streamer.ts

@@ -16,7 +16,7 @@ import { ABRLinear } from './abr/ABRLinear';
  * Use Streamer to broadcast to a WebRTC server.
  *
  * You can use a controllable version using a `WSController` as connector, or change it to use a `HTTPConnector` (HTTP WHIP).
- * By default it uses a `WSController` excepting if on {@link Streamer.start} you use a {@link ConnectParams.host} prefixed with a `http://` protocol.
+ * By default it uses a `WSController` excepting if on {@link Streamer.start} you use a {@link Connect.Params.endPoint} prefixed with a `http://` protocol.
  * With a controllable connector you can change video bitrate during the streaming, what is not possible with a HTTP(WHIP) connector.
  *
  * @example
@@ -32,7 +32,7 @@ import { ABRLinear } from './abr/ABRLinear';
  * .getUserMedia({ audio: true, video: true })
  * .then(stream => {
  *    streamer.start(stream, {
- *       host: address, // if address is prefixed by `http://` it uses a HTTPConnector (HTTP-WHIP) if Streamer is build without contructor argument
+ *       endPoint: address, // if address is prefixed by `http://` it uses a HTTPConnector (HTTP-WHIP) if Streamer is build without contructor argument
  *       streamName: 'as+bc3f535f-37f3-458b-8171-b4c5e77a6137'
  *    });
  *    ...
@@ -225,7 +225,7 @@ export class Streamer extends EventEmitter implements ILog {
 
     /**
      * Starts broadcasting the stream
-     * The connector is determined automatically from {@link ConnectParams.host} if not forced in the constructor.
+     * The connector is determined automatically from {@link Connect.Params.endPoint} if not forced in the constructor.
      *
      * The `adaptiveBitrate` option can take three different types of value:
      * - A {@link ABRParams} parameters to configure the default ABRLinear implementation
@@ -242,7 +242,7 @@ export class Streamer extends EventEmitter implements ILog {
         // Connector
         let abr: ABRAbstract;
         this._videoBitrateFixed = false;
-        this._connector = new (this.Connector || (params.host.startsWith('http') ? HTTPConnector : WSController))(
+        this._connector = new (this.Connector || (params.endPoint.startsWith('http') ? HTTPConnector : WSController))(
             params,
             stream
         );

src/connectors/HTTPConnector.ts

@@ -12,12 +12,12 @@ import { SIPConnector } from './SIPConnector';
  * using WHIP (WebRTC HTTP Ingest Protocol) or WHEP (WebRTC HTTP Egress Protocol).
  * @example
  * // Listener channel (no initial 'stream' parameter), listen to a stream without sending data
- * const connection = new HTTPConnector({host, streamName});
+ * const connection = new HTTPConnector({endPoint, streamName});
  * // we get the media stream from server
  * connection.onOpen = stream => videoElement.srcObject = stream;
  *
  * // Streamer channel (with initial 'stream' parameter), sends and receives media streams
- * const connection = new HTTPConnector({host, streamName}, {stream: await navigator.mediaDevices.getUserMedia()});
+ * const connection = new HTTPConnector({endPoint, streamName}, {stream: await navigator.mediaDevices.getUserMedia()});
  * // the media stream here is our local camera as passed in the above constructor
  * connection.onOpen = stream => {}
  */

src/connectors/SIPConnector.ts

@@ -82,7 +82,7 @@ export abstract class SIPConnector extends EventEmitter implements IConnector {
     }
 
     private _streamName: string;
-    private _host: string;
+    private _endPoint: string;
     private _stream?: MediaStream;
     private _peerConnection?: RTCPeerConnection;
     private _closed: boolean;
@@ -99,7 +99,7 @@ export abstract class SIPConnector extends EventEmitter implements IConnector {
         super();
         this._closed = false;
         this._streamName = connectParams.streamName;
-        this._host = connectParams.host;
+        this._endPoint = connectParams.endPoint;
         this._stream = stream;
         this._connectionInfosTime = 0;
         this._codecs = new Set<string>();
@@ -210,7 +210,7 @@ export abstract class SIPConnector extends EventEmitter implements IConnector {
     protected _open(iceServer?: RTCIceServer) {
         // If iceServer is not provided, use the default one
         if (!iceServer) {
-            const domain = new NetAddress(this._host, 443).domain;
+            const domain = new NetAddress(this._endPoint, 443).domain;
             iceServer = {
                 urls: ['turn:' + domain + ':3478?transport=tcp', 'turn:' + domain + ':3478'],
                 username: 'csc_demo',

src/connectors/WSController.ts

@@ -13,11 +13,11 @@ import { SIPConnector } from './SIPConnector';
  * using WebSocket custom signaling and keep that connection open for communication.
  * @example
  * // Listener channel (no 'stream' parameter), listen to a stream without sending data
- * const connection = new WSController({host, streamName});
+ * const connection = new WSController({endPoint, streamName});
  * connection.onOpen = stream => videoElement.srcObject = stream;
  *
  * // Streamer channel (with 'stream' parameter), sends and receives media streams
- * const connection = new WSController({host, streamName}, {stream: await navigator.mediaDevices.getUserMedia()});
+ * const connection = new WSController({endPoint, streamName}, {stream: await navigator.mediaDevices.getUserMedia()});
  * connection.onOpen = stream => {}
  */
 export class WSController extends SIPConnector implements IController {

src/metadata/StreamMetadata.ts

@@ -14,7 +14,7 @@ const sortByMAXBPS = (track1: MTrack, track2: MTrack) => track2.maxbps - track1.
  *  - the list of tracks and their properties,
  *  - the list of availables sources and their properties,
  * @example
- * const streamMetadata = new StreamMetadata(Connect.buildURL(host, streamName));
+ * const streamMetadata = new StreamMetadata(Connect.buildURL(endPoint, streamName));
  * streamMetadata.onMetadata = metadata => {
  *    console.log(metadata);
  * }
@@ -59,7 +59,7 @@ export class StreamMetadata extends EventEmitter {
     }
 
     /**
-     * Returns the ConnectParams object containing the connection parameters
+     * Returns the {@link Connect.Params} object containing the connection parameters
      */
     get connectParams(): Connect.Params {
         return this._connectParams;

src/metadata/WSStreamData.ts

@@ -10,7 +10,7 @@ import { IStreamData } from './IStreamData';
 /**
  * WSStreamData is the WebSocket implementation of IStreamData
  * @example
- * const streamData = new WSStreamData({host, streamName});
+ * const streamData = new WSStreamData({endPoint, streamName});
  * streamData.tracks = [0, 1]; // subscribe to data tracks 0 and 1
  * streamData.onData = time, track, data => {
  *    console.log(`Data received on track ${track} at ${time} : ${Util.stringify(data)}`);