Release v0.1.4 (#63)

* Disable multiopus with H.264 * Added getStats method in PeerConnection with interval. * Refactor for get stats. Added new interval for emit events. Fix manual View test. * Added scenarios and unit tests for get peer stats. * Added scenario for complete test coverage. Refactor for reuse how to get codec information from stats. * Corrected typo. * Added documentation for get and stop Peer Stats. * Set multiopus with available payload type id * Refactor to documentation. Removed data key when returning stats. * Renamed PeerConnection method getStats to initStats. Refactor to PeerConnectionStats applied due to PR Review. Fix related tests and removed some scenarios. Refactor to documentation. * Renamed MILLICAST_STREAM_ID enviroment variable to MILLICAST_STREAM_NAME. Change streamId variables to streamName. Updated documentation. * Updated manual functional test demos for get stats. * Change some logs message related to init connection stats. * Update README Viewer example. * Update version to 0.1.4 Co-authored-by: Renzo Delfino <[email protected]>
millicast · May 27, 2021 · 960850f · 960850f
1 parent 7ffebdd
commit 960850f
Show file tree

Hide file tree

Showing 22 changed files with 805 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -67,31 +67,28 @@ try {
 `index.html`
 ```html
 <html>
-<head>
-  ...
-</head>
-<body>
-  <video id="my-video"></video>
-
-  <script src='viewer.js'></script>
-</body>
+  <head>
+    ...
+  </head>
+  <body>
+    <video id="my-video"></video>
+    
+    <script src='viewer.js'></script>
+  </body>
 </html>
 ```
 `viewer.js`
 ```javascript
 import { Director, View } from '@millicast/sdk'
 
+// Get Media Element
+const video = document.getElementById('my-video')
+
 //Define callback for generate new token
 const tokenGenerator = () => Director.getSubscriber('my-stream-name', 'my-account-id')
 
 //Create a new instance
-const millicastView = new View(streamName, tokenGenerator)
-
-//Set event handler for receive stream from publisher and add it to your <video> tag
-millicastView.on('track', (event) => {
-  const video = document.getElementById('my-video')
-  video.srcObject = event.streams[0]
-})
+const millicastView = new View(streamName, tokenGenerator, video)
 
 //Start connection to publisher
 try {

diff --git a/developer-info.md b/developer-info.md
@@ -21,7 +21,7 @@ $ npm run prepare
 Next, to build all packages add a `.env` file in both demo packages (`millicast-publisher-demo`, `millicast-viewer-demo` & `millicast-chromecast-receiver`). You can find the following example in `.env.sample`:
 ```sh
 # Make a .env file with the following vars
-MILLICAST_STREAM_ID=test
+MILLICAST_STREAM_NAME=test
 MILLICAST_ACCOUNT_ID=test
 MILLICAST_PUBLISH_TOKEN=test
 ```

diff --git a/packages/millicast-chromecast-receiver/.env.sample b/packages/millicast-chromecast-receiver/.env.sample
@@ -1,3 +1,3 @@
 # Make a .env file with the following vars
-MILLICAST_STREAM_ID=test
+MILLICAST_STREAM_NAME=test
 MILLICAST_ACCOUNT_ID=test
diff --git a/packages/millicast-chromecast-receiver/src/viewer.js b/packages/millicast-chromecast-receiver/src/viewer.js
@@ -14,15 +14,15 @@ const removeStream = () => {
   video.srcObject = null
 }
 
-const subscribe = async (streamId, streamAccountId) => {
-  const tokenGenerator = () => Director.getSubscriber(streamId, streamAccountId)
-  const millicastView = new View(streamId, tokenGenerator)
+const subscribe = async (streamName, streamAccountId) => {
+  const tokenGenerator = () => Director.getSubscriber(streamName, streamAccountId)
+  const millicastView = new View(streamName, tokenGenerator)
   millicastView.on('broadcastEvent', (event) => {
     const layers = event.data.layers !== null ? event.data.layers : {}
     if (event.name === 'layers' && Object.keys(layers).length <= 0) {
       // call play logic or being reconnect interval
       close().then(() => {
-        subscribe(streamId, streamAccountId)
+        subscribe(streamName, streamAccountId)
       })
       console.error('Feed no longer found.')
     }
@@ -42,7 +42,7 @@ const subscribe = async (streamId, streamAccountId) => {
     await millicastView.connect()
   } catch (error) {
     close().then(() => {
-      subscribe(streamId, streamAccountId)
+      subscribe(streamName, streamAccountId)
     })
     console.error(error)
   }
@@ -59,9 +59,9 @@ player.setMediaElement(document.querySelector('#player'))
 player.setMessageInterceptor(
   cast.framework.messages.MessageType.LOAD, loadRequestData => {
     const media = loadRequestData.media
-    const { streamId, streamAccountId } = media.customData
+    const { streamName, streamAccountId } = media.customData
 
-    subscribe(streamId, streamAccountId)
+    subscribe(streamName, streamAccountId)
 
     loadRequestData.media.contentUrl = 'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4'
     loadRequestData.media.contentType = 'video/mp4'

diff --git a/packages/millicast-publisher-demo/.env.sample b/packages/millicast-publisher-demo/.env.sample
@@ -1,4 +1,4 @@
 # Make a .env file with the following vars
-MILLICAST_STREAM_ID=test
+MILLICAST_STREAM_NAME=test
 MILLICAST_ACCOUNT_ID=test
 MILLICAST_PUBLISH_TOKEN=test
diff --git a/packages/millicast-publisher-demo/README.md b/packages/millicast-publisher-demo/README.md
@@ -4,7 +4,7 @@
 Add a `.env` file in current path. You can find the following example in `.env.sample`:
 ```sh
 # Make a .env file with the following vars
-MILLICAST_STREAM_ID=test
+MILLICAST_STREAM_NAME=test
 MILLICAST_ACCOUNT_ID=test
 MILLICAST_PUBLISH_TOKEN=test
 ```

diff --git a/packages/millicast-publisher-demo/src/publisher.js b/packages/millicast-publisher-demo/src/publisher.js
@@ -3,7 +3,7 @@ import { Director, Logger, StreamEvents } from "@millicast/sdk"
 
 window.Logger = Logger
 
-const streamId = process.env.MILLICAST_STREAM_ID
+const streamName = process.env.MILLICAST_STREAM_NAME
 const accountId = process.env.MILLICAST_ACCOUNT_ID
 const publishToken = process.env.MILLICAST_PUBLISH_TOKEN
 const disableVideo = false
@@ -73,7 +73,7 @@ document.addEventListener("DOMContentLoaded", async (event) => {
 
   // Add UserCount event listener
   const events = await StreamEvents.init()
-  events.onUserCount(accountId, streamId, ({count}) => {
+  events.onUserCount(accountId, streamName, ({count}) => {
     userCount.innerHTML = count
   })
 
@@ -124,8 +124,8 @@ document.addEventListener("DOMContentLoaded", async (event) => {
 
 
   /////////////////////////
-  const tokenGenerator = () => Director.getPublisher(publishToken, streamId)
-  const millicastPublishUserMedia = await MillicastPublishUserMedia.build({ streamName: streamId }, tokenGenerator, true)
+  const tokenGenerator = () => Director.getPublisher(publishToken, streamName)
+  const millicastPublishUserMedia = await MillicastPublishUserMedia.build({ streamName }, tokenGenerator, true)
   let selectedBandwidthBtn = document.querySelector('#bandwidthMenuButton');
   let bandwidth = 0
 
@@ -354,7 +354,7 @@ document.addEventListener("DOMContentLoaded", async (event) => {
       href = href.substring(0, href.lastIndexOf('/') + 1);
     }
 
-    let viewerUrl = `https://viewer.millicast.com/v2?streamId=${accountId}/${streamId}`;
+    let viewerUrl = `https://viewer.millicast.com/v2?streamId=${accountId}/${streamName}`;
 
     if (disableVideo === true) {
       viewerUrl = `${viewerUrl}&disableVideo=${disableVideo}`

diff --git a/packages/millicast-sdk/package-lock.json b/packages/millicast-sdk/package-lock.json
diff --git a/packages/millicast-sdk/package.json b/packages/millicast-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@millicast/sdk",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "SDK for building a realtime broadcaster using the Millicast platform.",
   "keywords": [
     "sdk",

diff --git a/packages/millicast-sdk/src/PeerConnection.js b/packages/millicast-sdk/src/PeerConnection.js
@@ -1,5 +1,7 @@
 import axios from 'axios'
 import EventEmitter from 'events'
+import reemit from 're-emitter'
+import PeerConnectionStats, { peerConnectionStatsEvents } from './PeerConnectionStats'
 import SdpParser from './utils/SdpParser'
 import UserAgent from './utils/UserAgent'
 import Logger from './Logger'
@@ -25,6 +27,7 @@ export default class PeerConnection extends EventEmitter {
     super()
     this.sessionDescription = null
     this.peer = null
+    this.peerConnectionStats = null
     this.RTCOfferOptions = {
       offerToReceiveVideo: true,
       offerToReceiveAudio: true
@@ -61,6 +64,7 @@ export default class PeerConnection extends EventEmitter {
     logger.info('Closing RTCPeerConnection')
     this.peer?.close()
     this.peer = null
+    this.stopStats()
     this.emit(webRTCEvents.connectionStateChange, 'closed')
   }
 
@@ -318,6 +322,62 @@ export default class PeerConnection extends EventEmitter {
   getTracks () {
     return this.peer?.getSenders()?.map((sender) => sender.track)
   }
+
+  /**
+   * Initialize the statistics monitoring of the RTCPeerConnection.
+   * @param {Number} interval - Interval in seconds of how often it should get stats.
+   * Should be greater or equals to 1 second.
+   * @fires PeerConnection#stats
+   * @example peerConnection.initStats(1)
+   * @example
+   * import Publish from '@millicast/sdk'
+   *
+   * //Initialize and connect your Publisher
+   * const millicastPublish = new Publish(streamName, tokenGenerator)
+   * await millicastPublish.connect(options)
+   *
+   * //Initialize get stats with 2 seconds interval
+   * millicastPublish.webRTCPeer.initStats(2)
+   *
+   * //Capture new stats from event every 2 seconds
+   * millicastPublish.webRTCPeer.on('stats', (stats) => {
+   *   console.log('Stats from event: ', stats)
+   * })
+   * @example
+   * import View from '@millicast/sdk'
+   *
+   * //Initialize and connect your Viewer
+   * const millicastView = new View(streamName, tokenGenerator)
+   * await millicastView.connect()
+   *
+   * //Initialize the get stats with 2 seconds interval
+   * millicastView.webRTCPeer.initStats(2)
+   *
+   * //Capture new stats from event every 2 seconds
+   * millicastView.webRTCPeer.on('stats', (stats) => {
+   *   console.log('Stats from event: ', stats)
+   * })
+   */
+  initStats (interval) {
+    if (this.peerConnectionStats) {
+      logger.warn('Cannot init peer stats: Already initialized')
+    } else if (this.peer) {
+      this.peerConnectionStats = new PeerConnectionStats(this.peer)
+      this.peerConnectionStats.init(interval)
+      reemit(this.peerConnectionStats, this, [peerConnectionStatsEvents.stats])
+    } else {
+      logger.warn('Cannot init peer stats: RTCPeerConnection not initialized')
+    }
+  }
+
+  /**
+   * Stops the monitoring of RTCPeerConnection statistics.
+   * @example peerConnection.stopStats()
+   */
+  stopStats () {
+    this.peerConnectionStats?.stop()
+    this.peerConnectionStats = null
+  }
 }
 
 const isMediaStreamValid = mediaStream =>