Skip to content

Commit

Permalink
Migrate Publisher demo app to TypeScript (#461)
Browse files Browse the repository at this point in the history 
* wip Migrate Demo apps to TypeScript

* update media types

* update connect defalut options
  • Loading branch information
@juanpiquerez
juanpiquerez authored Oct 23, 2024
1 parent 38c8176 commit 5ca10a3
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 152 deletions.
100 changes: 49 additions & 51 deletions ...t-publisher-demo/src/js/MillicastMedia.js → ...t-publisher-demo/src/js/MillicastMedia.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
"use strict";
'use strict'

import { MediaDevicesInfo, MillicastMediaOptions } from '../types/MillicastMedia.types'

/**
* @class MillicastMedia
* @classdesc It's in charge of the devices, their respective streams, and the states of those streams.
* @param {Object} options
* @param {mediaStream} options.MediaStream - the mediaStream of the selected devices.
* @param {Object} options.constraints - the selected options of the selected devices (audio and video controls).
* @param {MillicastMediaOptions} options
* @param {MediaStream} options.MediaStream - the mediaStream of the selected devices.
* @param {MediaStreamConstraints} options.constraints - the selected options of the selected devices (audio and video controls).
* {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints constraints}
* @example const millicastMedia = new MillicastMedia();
* @constructor
*/

export default class MillicastMedia {
constructor(options) {
constraints: MediaStreamConstraints
mediaStream: MediaStream
devices: MediaDevicesInfo
constructor(options: MillicastMediaOptions) {
//constructor syntactic sugar
this.mediaStream = null;
this.mediaStream = null

this.constraints = {
audio: {
Expand All @@ -26,10 +31,9 @@ export default class MillicastMedia {
height: { ideal: 720 },
frameRate: { ideal: 24 },
},
};
}
/*Apply Options*/
if (options && !!options.constraints)
Object.assign(this.constraints, options.constraints);
if (options && !!options.constraints) Object.assign(this.constraints, options.constraints)
}

/**
Expand All @@ -39,21 +43,21 @@ export default class MillicastMedia {
*/

get getDevices() {
return this.getMediaDevices();
return this.getMediaDevices()
}

getInput(kind) {
let input = null;
if (!kind) return input;
let input = null
if (!kind) return input
if (this.mediaStream) {
for (let track of this.mediaStream.getTracks()) {
if (track.kind === kind) {
input = track;
break;
input = track
break
}
}
}
return input;
return input
}

/**
Expand All @@ -63,7 +67,7 @@ export default class MillicastMedia {
*/

get videoInput() {
return this.getInput("video");
return this.getInput('video')
}

/**
Expand All @@ -73,7 +77,7 @@ export default class MillicastMedia {
*/

get audioInput() {
return this.getInput("audio");
return this.getInput('audio')
}

/**
Expand All @@ -85,38 +89,32 @@ export default class MillicastMedia {
async getMedia() {
//gets user cam and mic
try {
this.mediaStream = await navigator.mediaDevices.getUserMedia(
this.constraints
);
return this.mediaStream;
this.mediaStream = await navigator.mediaDevices.getUserMedia(this.constraints)
return this.mediaStream
} catch (error) {
console.error("Could not get Media: ", error, this.constraints);
throw error;
console.error('Could not get Media: ', error, this.constraints)
throw error
}
}

async getMediaDevices() {
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices)
throw new Error(
"Could not get list of media devices! This might not be supported by this browser."
);
throw new Error('Could not get list of media devices! This might not be supported by this browser.')

try {
const items = { audioinput: [], videoinput: [], audiooutput: [] };
const mediaDevices = await navigator.mediaDevices.enumerateDevices();
for (const device of mediaDevices)
this.addMediaDevicesToList(items, device);
this.devices = items;
const items: MediaDevicesInfo = { audioinput: [], videoinput: [], audiooutput: [] }
const mediaDevices = await navigator.mediaDevices.enumerateDevices()
for (const device of mediaDevices) this.addMediaDevicesToList(items, device)
this.devices = items
} catch (error) {
console.error("Could not get Media: ", error);
this.devices = [];
console.error('Could not get Media: ', error)
this.devices = null
}
return this.devices;
return this.devices
}

addMediaDevicesToList(items, device) {
if (device.deviceId !== "default" && items[device.kind])
items[device.kind].push(device);
if (device.deviceId !== 'default' && items[device.kind]) items[device.kind].push(device)
}

/**
Expand All @@ -126,7 +124,7 @@ export default class MillicastMedia {
*/

async changeVideo(id) {
return await this.changeSource(id, "video");
return await this.changeSource(id, 'video')
}

/**
Expand All @@ -136,19 +134,19 @@ export default class MillicastMedia {
*/

async changeAudio(id) {
return await this.changeSource(id, "audio");
return await this.changeSource(id, 'audio')
}

async changeSource(id, sourceType) {
if (!id) throw new Error("Required id");
if (!id) throw new Error('Required id')

this.constraints[sourceType] = {
...this.constraints[sourceType],
deviceId: {
exact: id,
},
};
return await this.getMedia();
}
return await this.getMedia()
}

/**
Expand All @@ -157,14 +155,14 @@ export default class MillicastMedia {
*/

muteVideo(boolean = true) {
let changed = false;
let changed = false
if (this.mediaStream) {
this.mediaStream.getVideoTracks()[0].enabled = !boolean;
changed = true;
this.mediaStream.getVideoTracks()[0].enabled = !boolean
changed = true
} else {
console.error("There is no media stream object.");
console.error('There is no media stream object.')
}
return changed;
return changed
}

/**
Expand All @@ -173,13 +171,13 @@ export default class MillicastMedia {
*/

muteAudio(boolean = true) {
let changed = false;
let changed = false
if (this.mediaStream) {
this.mediaStream.getAudioTracks()[0].enabled = !boolean;
changed = true;
this.mediaStream.getAudioTracks()[0].enabled = !boolean
changed = true
} else {
console.error("There is no media stream object.");
console.error('There is no media stream object.')
}
return changed;
return changed
}
}
86 changes: 45 additions & 41 deletions packages/millicast-publisher-demo/src/js/MillicastPublishUserMedia.ts
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,106 @@
import {Publish} from "@nx-millicast/millicast-sdk"
import MillicastMedia from "./MillicastMedia"
import { Publish } from '@nx-millicast/millicast-sdk'
import MillicastMedia from './MillicastMedia'
import { PublishConnectOptions } from 'packages/millicast-sdk/src/types/Publish.types'

export default class MillicastPublishUserMedia extends Publish {
mediaManager: MillicastMedia
constructor(options, tokenGenerator, autoReconnect) {
super(options.streamName, tokenGenerator, autoReconnect);
this.mediaManager = new MillicastMedia(options);
super(tokenGenerator, autoReconnect)
this.mediaManager = new MillicastMedia(options)
}

static async build(options, tokenGenerator, autoReconnect = true) {
const instance = new MillicastPublishUserMedia(options, tokenGenerator, autoReconnect);
await instance.getMediaStream();
return instance;
const instance = new MillicastPublishUserMedia(options, tokenGenerator, autoReconnect)
await instance.getMediaStream()
return instance
}

get constraints() {
return this.mediaManager.constraints;
return this.mediaManager.constraints
}

set constraints(constraints) {
this.mediaManager.constraints = constraints;
this.mediaManager.constraints = constraints
}

get devices() {
return this.mediaManager.getDevices;
return this.mediaManager.getDevices
}

get activeVideo() {
return this.mediaManager.videoInput;
return this.mediaManager.videoInput
}

get activeAudio() {
return this.mediaManager.audioInput;
return this.mediaManager.audioInput
}

async connect(
options = {
options: PublishConnectOptions = {
bandwidth: 0,
disableVideo: false,
disableAudio: false,
sourceId: null,
mediaStream: null,
}
) {
await super.connect({
...options,
mediaStream: this.mediaManager.mediaStream
});
await super.connect({
...options,
mediaStream: this.mediaManager.mediaStream,
})

this.webRTCPeer.on('stats', (stats) => {
console.log(stats)
})
}

async getMediaStream() {
try {
return await this.mediaManager.getMedia();
return await this.mediaManager.getMedia()
} catch (e) {
throw e;
throw e
}
}

destroyMediaStream() {
this.mediaManager.mediaStream = null;
this.mediaManager.mediaStream = null
}

updateMediaStream(type, id) {
if (type === "audio") {
if (type === 'audio') {
return new Promise((resolve, reject) => {
this.mediaManager
.changeAudio(id)
.then((stream) => {
this.mediaManager.mediaStream = stream;
this.mediaManager.mediaStream = stream
if (this.isActive()) {
this.webRTCPeer.replaceTrack(stream.getAudioTracks()[0])
}
resolve(stream);
resolve(stream)
})
.catch((error) => {
console.error("Could not update Audio: ", error);
reject(error);
});
});
} else if (type === "video") {
console.error('Could not update Audio: ', error)
reject(error)
})
})
} else if (type === 'video') {
return new Promise((resolve, reject) => {
this.mediaManager
.changeVideo(id)
.then((stream) => {
this.mediaManager.mediaStream = stream;
this.mediaManager.mediaStream = stream
if (this.isActive()) {
this.webRTCPeer.replaceTrack(stream.getVideoTracks()[0])
}
resolve(stream);
resolve(stream)
})
.catch((error) => {
console.error("Could not update Video: ", error);
reject(error);
});
});
console.error('Could not update Video: ', error)
reject(error)
})
})
} else {
return Promise.reject(`Invalid Type: ${type}`);
return Promise.reject(`Invalid Type: ${type}`)
}
}

Expand All @@ -105,12 +109,12 @@ export default class MillicastPublishUserMedia extends Publish {
}

muteMedia(type, boo) {
if (type === "audio") {
return this.mediaManager.muteAudio(boo);
} else if (type === "video") {
return this.mediaManager.muteVideo(boo);
if (type === 'audio') {
return this.mediaManager.muteAudio(boo)
} else if (type === 'video') {
return this.mediaManager.muteVideo(boo)
} else {
return false;
return false
}
}
}
Loading

0 comments on commit 5ca10a3

Please sign in to comment.