@reactoo/watchtogether-sdk-js 2.5.13 → 2.5.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/watchtogether-sdk.js +8 -8
  2. package/dist/watchtogether-sdk.min.js +2 -2
  3. package/example/audio_controls/audio_controls.html +200 -0
  4. package/example/audio_controls/audiocontrols.js +217 -0
  5. package/package.json +1 -1
  6. package/src/index.js +2 -2
  7. package/src/models/utils.js +26 -38
  8. package/src/modules/wt-auth.js +2 -2
package/example/audio_controls/audio_controls.html ADDED
@@ -0,0 +1,200 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>The Example</title>
6
+ <script src="./audiocontrols.js"></script>
7
+ <script src="../../dist/watchtogether-sdk.js"></script>
8
+ </head>
9
+ <body style="padding: 0; margin: 0; margin-top: 20px">
10
+
11
+ <div style="display: flex">
12
+ <div style="flex: 0 0 50%; text-align: center">
13
+ <div id="input-container" style="display: none">
14
+ <textarea id="input" style="width: 80%; height: 500px; padding: 0"></textarea>
15
+ <br>
16
+ <button onclick="applyAudioControlsObject()" style="width: 80%">Apply audio controls object</button>
17
+ </div>
18
+ </div>
19
+ <div style="flex: 0 0 50%; text-align: center">
20
+ <select id="audio-devices" style="width: 80%" onchange="selectedAudioDeviceId = this.value"></select>
21
+ <br>
22
+ <select id="video-devices" style="width: 80%" onchange="selectedVideoDeviceId = this.value"></select>
23
+ <button style="width: 80%" onclick="getDevicesPermissionAndEnumerateDevices()">Enumerate devices</button>
24
+
25
+ <br><br><br><br>
26
+
27
+ <div id="stream-container" style="display: none">
28
+ <div style="width: 80%; margin-left: auto; margin-right: auto">
29
+ <video id="stream" style="width: 100%; height: 300px; background-color: black; object-fit: contain" autoplay></video>
30
+ </div>
31
+ <button style="width: 80%" onclick="attachStream()">Attach stream to video element</button>
32
+ <br>OR<br>
33
+ <label for="room-id">Room ID : </label>
34
+ <input id="room-id" size="35" onchange="roomId = this.value">
35
+ <button style="width: 80%" onclick="sendStreamToRoom()">Send stream to room</button>
36
+ <br>
37
+ <button id="producer-link" style="width: 80%" onclick="goToProducer()">Producer preview</button>
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ <script>
43
+ let audioControlsObject = {
44
+ enabled: true,
45
+ gain: {
46
+ value: 1,
47
+ decibels: 0
48
+ },
49
+ equalizer: {
50
+ lowshelf: {
51
+ frequency: 220,
52
+ gain: 0
53
+ },
54
+ peaking: {
55
+ frequency: 2400,
56
+ gain: 0,
57
+ q: 0.3,
58
+ qType: "low"
59
+ },
60
+ highshelf: {
61
+ frequency: 12000,
62
+ gain: 0
63
+ }
64
+ },
65
+ compressor: {
66
+ threshold: 0,
67
+ ratio: 2,
68
+ knee: 2,
69
+ attack: 0.001,
70
+ release: 0.15,
71
+ speed: "medium"
72
+ }
73
+ };
74
+
75
+ let roomId = "03159020-59a8-4d10-a801-8aef895141a3";
76
+ let sdkInstance = null;
77
+ let roomSession = null;
78
+
79
+ let audioControls = null;
80
+
81
+ let enumeratedAudioDevices = null;
82
+ let enumeratedVideoDevices = null;
83
+ let selectedAudioDeviceId = null;
84
+ let selectedVideoDeviceId = null;
85
+
86
+ const inputContainerElement = document.getElementById('input-container');
87
+ const inputElement = document.getElementById('input');
88
+ const audioDevicesSelectElement = document.getElementById("audio-devices");
89
+ const videoDevicesSelectElement = document.getElementById("video-devices");
90
+ const streamContainerElement = document.getElementById('stream-container');
91
+ const streamElement = document.getElementById('stream');
92
+ const roomIdInputElement = document.getElementById('room-id');
93
+ const producerLinkElement = document.getElementById('producer-link');
94
+
95
+ document.addEventListener("DOMContentLoaded", function() {
96
+ audioControls = new AudioControls();
97
+ inputElement.value = JSON.stringify(audioControlsObject, null, 2);
98
+ });
99
+
100
+ function applyAudioControlsObject() {
101
+ audioControlsObject = JSON.parse(inputElement.value);
102
+ audioControls.setParametersFromAudioControlsObject(audioControlsObject);
103
+ }
104
+
105
+ function enumerateDevices() {
106
+ enumeratedAudioDevices = [];
107
+
108
+ return navigator.mediaDevices.enumerateDevices()
109
+ .then(devices => {
110
+ enumeratedAudioDevices = [];
111
+ enumeratedVideoDevices = [];
112
+
113
+ devices.forEach(device => {
114
+ const deviceDetail = {
115
+ id: device.deviceId,
116
+ label: device.label
117
+ };
118
+
119
+ if (device.kind === 'audioinput') {
120
+ enumeratedAudioDevices.push(deviceDetail);
121
+ }
122
+
123
+ if (device.kind === 'videoinput') {
124
+ enumeratedVideoDevices.push(deviceDetail);
125
+ }
126
+ });
127
+ });
128
+ }
129
+
130
+ function getUserMedia(audioDeviceId, videoDeviceId) {
131
+ const constraints = {
132
+ audio: audioDeviceId ? {deviceId: {exact: audioDeviceId}} : true,
133
+ video: {frameRate: {ideal: 10, max: 20}, width: {ideal: 320, max: 480}, height: {ideal: 240, max: 360}}
134
+ };
135
+
136
+ if (videoDeviceId) {
137
+ constraints.video.deviceId = {exact: videoDeviceId};
138
+ }
139
+
140
+ return navigator.mediaDevices.getUserMedia(constraints);
141
+ }
142
+
143
+ function getDevicesPermissionAndEnumerateDevices() {
144
+ getUserMedia()
145
+ .then(stream => stream.getTracks().forEach(key => stream.removeTrack(key)))
146
+ .then(() => enumerateDevices())
147
+ .then(() => {
148
+ while (audioDevicesSelectElement.firstChild) {
149
+ audioDevicesSelectElement.removeChild(audioDevicesSelectElement.lastChild);
150
+ }
151
+ while (videoDevicesSelectElement.firstChild) {
152
+ videoDevicesSelectElement.removeChild(videoDevicesSelectElement.lastChild);
153
+ }
154
+
155
+ enumeratedAudioDevices.forEach(device => {
156
+ const optionElement = document.createElement('option');
157
+ optionElement.value = device.id;
158
+ optionElement.innerHTML = device.label;
159
+ audioDevicesSelectElement.appendChild(optionElement);
160
+ });
161
+ enumeratedVideoDevices.forEach(device => {
162
+ const optionElement = document.createElement('option');
163
+ optionElement.value = device.id;
164
+ optionElement.innerHTML = device.label;
165
+ videoDevicesSelectElement.appendChild(optionElement);
166
+ });
167
+
168
+ inputContainerElement.style.display = "block";
169
+ streamContainerElement.style.display = "block";
170
+
171
+ roomIdInputElement.value = roomId;
172
+ });
173
+ }
174
+
175
+ function attachStream () {
176
+ getUserMedia(selectedAudioDeviceId, selectedVideoDeviceId).then(stream => {
177
+ streamElement.srcObject = audioControls.setStream(stream);
178
+ });
179
+ }
180
+
181
+ function sendStreamToRoom () {
182
+ getUserMedia(selectedAudioDeviceId, selectedVideoDeviceId).then(stream => {
183
+ sdkInstance = WatchTogetherSDK({debug:true, storagePrefix: "user_1"})();
184
+ sdkInstance.auth.deviceLogin("user_1")
185
+ .then(() => sdkInstance.room.createSession({roomId}))
186
+ .then(session => {
187
+ roomSession = session;
188
+ return Promise.all([session, session.connect()])
189
+ })
190
+ .then(([session, _]) => session.publishLocal(audioControls.setStream(stream), {getStreamIfEmpty: false}));
191
+ });
192
+ }
193
+
194
+ function goToProducer() {
195
+ window.open('https://producer.reactoo.com/#/detail/room-monitor/' + roomId, '_blank').focus();
196
+ }
197
+ </script>
198
+
199
+ </body>
200
+ </html>
package/example/audio_controls/audiocontrols.js ADDED
@@ -0,0 +1,217 @@
1
+ // https://createjs.com/docs/soundjs/files/soundjs_webaudio_WebAudioPlugin.js.html
2
+ // https://mdn.github.io/webaudio-examples/compressor-example/
3
+ // https://codepen.io/webciter/pen/WNbPyrY
4
+
5
+ let ac = window.AudioContext || window.webkitAudioContext;
6
+
7
+ class AudioControls {
8
+
9
+ audioContext;
10
+
11
+ eventListeners;
12
+
13
+ streamSource;
14
+ gainNode;
15
+ equalizerNodes; // List of nodes
16
+ compressorNode;
17
+ streamDestination;
18
+
19
+ gainDefaultParameters = {
20
+ gain: 1
21
+ };
22
+ // frequency - The middle of the frequency range getting a boost or an attenuation.
23
+ // Q (only applied to peaking, others ignore it) - from 0.0001 to 1000 - The width of the frequency band. The greater the Q value, the smaller the frequency band.
24
+ // gain - from -40 to 40 db - The boost, in dB, to be applied; if negative, it will be an attenuation.
25
+ // type - must be read only
26
+ equalizerDefaultParameters = [
27
+ {frequency: 220, gain: 0, type: 'lowshelf'}, // Frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged.
28
+ {frequency: 2400, gain: 0, type: 'peaking', Q: 0.3}, // Frequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged.
29
+ {frequency: 12000, gain: 0, type: 'highshelf'} // Frequencies higher than the frequency get a boost or an attenuation; frequencies lower than it are unchanged
30
+ ];
31
+ compressorDefaultParameters = {
32
+ threshold: 0, // from -100 to 0 0 - compression will start at 0db - no compression
33
+ knee: 30, // from 0 to 40 0 - hard knee - no smooth transition to compression
34
+ ratio: 2, // from 1 to 20 1 - ratio 1:1 will not affect anything
35
+ attack: 0.001, // from 0 to 1 0 - no time required to reduce the gain by 10 dB
36
+ release: 0.15, // from 0 to 1 0 - no time required to increase the gain by 10 dB
37
+ };
38
+
39
+ constructor() {
40
+ this.audioContext = new ac();
41
+
42
+ this.streamDestination = this.audioContext.createMediaStreamDestination();
43
+
44
+ this.compressorNode = this.audioContext.createDynamicsCompressor();
45
+ this.setCompressorParameters(this.compressorDefaultParameters);
46
+ this.compressorNode.connect(this.streamDestination);
47
+
48
+ this.equalizerNodes = this.equalizerDefaultParameters.map( parameters => {
49
+ const biquadFilter = this.audioContext.createBiquadFilter();
50
+ biquadFilter.type = parameters.type;
51
+
52
+ return biquadFilter;
53
+ });
54
+ this.equalizerDefaultParameters.forEach( parameters => {
55
+ this.setEqualizerParameters(parameters);
56
+ });
57
+ this.equalizerNodes.forEach( (node, nodeIndex) => {
58
+ if (nodeIndex < this.equalizerNodes.length - 1) {
59
+ node.connect(this.equalizerNodes[nodeIndex + 1]);
60
+ } else {
61
+ node.connect(this.compressorNode);
62
+ }
63
+ });
64
+
65
+ this.gainParameters = {...this.gainDefaultParameters};
66
+ this.gainNode = this.audioContext.createGain();
67
+ this.setGain(this.gainParameters.gain);
68
+ this.gainNode.connect(this.equalizerNodes[0]);
69
+
70
+ this.streamSource = null;
71
+
72
+ this.eventListeners = {};
73
+
74
+ document.body.addEventListener('click', () => {
75
+ this.resume();
76
+ }, { once: true });
77
+ }
78
+
79
+ emit (label, ...args) {
80
+ let callbacks = this.eventListeners[label];
81
+ if(callbacks) {
82
+ callbacks.forEach(callback => callback.apply(null, args))
83
+ }
84
+ }
85
+
86
+ addEventListener (event, fn) {
87
+ if(!this.eventListeners[event]) {
88
+ this.eventListeners[event] = []
89
+ }
90
+ this.eventListeners[event].push(fn);
91
+ }
92
+
93
+ removeEventListener (event, fn) {
94
+ if(!this.eventListeners[event]) {
95
+ return
96
+ }
97
+ let index = this.eventListeners[event].findIndex(listener => listener === fn);
98
+ if(index > -1) {
99
+ this.eventListeners[event].splice(index, 1);
100
+ }
101
+ }
102
+
103
+ clearEventListeners () {
104
+ for(let key in this.eventListeners) {
105
+ this.eventListeners[key].length = 0;
106
+ }
107
+ }
108
+
109
+ render() {
110
+ this.drawId = setTimeout(() => {
111
+ this.emit('compressorReduction', this.compressorNode.reduction);
112
+ this.render();
113
+ }, 1000 / 10)
114
+ }
115
+
116
+ startRenderLoop() {
117
+ clearTimeout(this.drawId);
118
+ this.render();
119
+ }
120
+
121
+ stopRenderLoop() {
122
+ clearTimeout(this.drawId);
123
+ }
124
+
125
+ setStream(stream) {
126
+ if (this.streamSource) {
127
+ this.streamSource.disconnect(this.gainNode);
128
+ }
129
+
130
+ this.streamSource = this.audioContext.createMediaStreamSource(stream);
131
+ this.streamSource.connect(this.gainNode);
132
+
133
+ this.resume();
134
+
135
+ // this.streamDestination.stream.getVideoTracks().forEach(t => this.streamDestination.stream.removeTrack(t));
136
+ // stream.getVideoTracks().forEach(t => {
137
+ // this.streamDestination.stream.addTrack(t)
138
+ // });
139
+ // return this.streamDestination.stream;
140
+
141
+ const finalStream = new MediaStream();
142
+
143
+ const [videotrack] = stream.getVideoTracks();
144
+ if(videotrack) {
145
+ finalStream.addTrack(videotrack);
146
+ }
147
+
148
+ const [audiotrack] = this.streamDestination.stream.getAudioTracks();
149
+ if(audiotrack) {
150
+ finalStream.addTrack(audiotrack);
151
+ }
152
+
153
+ // https://stackoverflow.com/a/63844077
154
+ // new Audio().srcObject = stream;
155
+ // new Audio().srcObject = finalStream;
156
+
157
+ return finalStream;
158
+ }
159
+
160
+ resume() {
161
+ if (this.audioContext.state === 'suspended') {
162
+ this.audioContext.resume();
163
+ this.startRenderLoop();
164
+ }
165
+ }
166
+
167
+ setGain(gain) {
168
+ this.gainNode.gain.setValueAtTime(gain, Math.floor(this.audioContext.currentTime));
169
+ }
170
+
171
+ setEqualizerParameters(equalizerParameters, nodeType) {
172
+ const nodeIndex = ['lowshelf', 'peaking', 'highshelf'].findIndex(e => e === nodeType || e === equalizerParameters.type);
173
+
174
+ if (nodeIndex !== -1) {
175
+ ['frequency', 'gain', 'Q'].forEach( parameterName => {
176
+ if (equalizerParameters.hasOwnProperty(parameterName) && equalizerParameters[parameterName] !== undefined) {
177
+ this.equalizerNodes[nodeIndex][parameterName].value = equalizerParameters[parameterName];
178
+ }
179
+ });
180
+ }
181
+ }
182
+
183
+ setCompressorParameters(compressorParameters) {
184
+ ['threshold', 'knee', 'ratio', 'attack', 'release'].forEach( parameterName => {
185
+ if (compressorParameters.hasOwnProperty(parameterName) && compressorParameters[parameterName] !== undefined) {
186
+ this.compressorNode[parameterName].value = compressorParameters[parameterName];
187
+ }
188
+ });
189
+ }
190
+
191
+ setParametersFromAudioControlsObject(audioControlsObject) {
192
+ if (audioControlsObject.enabled) {
193
+ this.setGain(audioControlsObject.gain.value);
194
+ Object.keys(audioControlsObject.equalizer)
195
+ .forEach(type => this.setEqualizerParameters(audioControlsObject.equalizer[type], type));
196
+ this.setCompressorParameters(audioControlsObject.compressor);
197
+ } else {
198
+ this.setGain(this.gainParameters.gain);
199
+ this.equalizerDefaultParameters
200
+ .forEach( p => this.setEqualizerParameters(p));
201
+ this.setCompressorParameters(this.compressorDefaultParameters);
202
+ }
203
+ }
204
+
205
+ destroy() {
206
+ this.stopRenderLoop();
207
+ this.streamSource.disconnect(this.gainNode);
208
+ this.audioContext.close();
209
+ }
210
+ }
211
+
212
+ // Uncomment this to use in VUE
213
+ // export default {
214
+ // install: function(Vue) {
215
+ // Object.defineProperty(Vue.prototype, '$audiocontrols', { value: AudioControls });
216
+ // }
217
+ // }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reactoo/watchtogether-sdk-js",
3
- "version": "2.5.13",
3
+ "version": "2.5.16",
4
4
  "description": "Javascript SDK for Reactoo",
5
5
  "main": "src/index.js",
6
6
  "unpkg": "dist/watchtogether-sdk.min.js",
package/src/index.js CHANGED
@@ -41,9 +41,9 @@ function WatchTogether(modules = {}, instanceType, debug, playerFactory, provide
41
41
  this.utils = utils;
42
42
  }
43
43
 
44
- let watchTogether = function ({debug = true, isProduction = true, language = 'en-GB', storagePrefix = "reactoo_", apiUrl = null} = {}) {
44
+ let watchTogether = function ({debug = true, language = 'en-GB', storagePrefix = "reactoo_", apiUrl = null} = {}) {
45
45
  let room = new Room(debug);
46
- let auth = new Auth(debug, isProduction, language, storagePrefix, apiUrl);
46
+ let auth = new Auth(debug, language, storagePrefix, apiUrl);
47
47
  let iot = new Iot(debug);
48
48
 
49
49
  return ({instanceType = 'reactooDemo', playerFactory = null, providerAuth = null} = {}) => {
package/src/models/utils.js CHANGED
@@ -1,44 +1,32 @@
1
1
  'use strict';
2
2
 
3
3
  export default {
4
- getUserStream(hasVideo, isHd, aDeviceId, vDeviceId, lfps, simpleConstraints, muteAudio = false, muteVideo = false) {
5
- let fullConstraints, audioOnlyConstraints;
6
- if(simpleConstraints) {
7
- fullConstraints = {
8
- audio: true,
9
- video: true
10
- };
11
- audioOnlyConstraints = {
12
- audio: true
13
- };
14
- }
15
- else {
16
- fullConstraints = {
17
- audio: {
18
- ...(aDeviceId && {deviceId: {exact:aDeviceId}}),
19
- autoGainControl: false,
20
- echoCancellation: true,
21
- noiseSuppression: true,
22
- channelCount: 1
23
- },
24
- video: {
25
- ...(vDeviceId && {deviceId: {exact:vDeviceId}}),
26
- facingMode: {ideal: "user"},
27
- ...(lfps ? {frameRate: { ideal: 10, max: 30 }} : {frameRate: { ideal: 24, max: 30 }}),
28
- width: {ideal: isHd ? 1280 : 320},
29
- height: {ideal: isHd ? 720 : 240},
30
- }
31
- };
32
- audioOnlyConstraints = {
33
- audio: {
34
- ...(aDeviceId && {deviceId: {exact:aDeviceId}}),
35
- autoGainControl: false,
36
- echoCancellation: true,
37
- noiseSuppression: true,
38
- channelCount: 1
39
- }
40
- };
41
- }
4
+ getUserStream({hasVideo, isHd, aDeviceId, vDeviceId, lfps, autoGainControl = false, muteAudio = false, muteVideo = false} = {}) {
5
+ let fullConstraints = {
6
+ audio: {
7
+ ...(aDeviceId && {deviceId: {exact:aDeviceId}}),
8
+ autoGainControl,
9
+ echoCancellation: true,
10
+ noiseSuppression: true,
11
+ channelCount: 1
12
+ },
13
+ video: {
14
+ ...(vDeviceId && {deviceId: {exact:vDeviceId}}),
15
+ facingMode: {ideal: "user"},
16
+ ...(lfps ? {frameRate: { ideal: 10, max: 30 }} : {frameRate: { ideal: 24, max: 30 }}),
17
+ width: {ideal: isHd ? 1280 : 320},
18
+ height: {ideal: isHd ? 720 : 240},
19
+ }
20
+ };
21
+ let audioOnlyConstraints = {
22
+ audio: {
23
+ ...(aDeviceId && {deviceId: {exact:aDeviceId}}),
24
+ autoGainControl,
25
+ echoCancellation: true,
26
+ noiseSuppression: true,
27
+ channelCount: 1
28
+ }
29
+ };
42
30
 
43
31
  return navigator.mediaDevices.getUserMedia(hasVideo ? fullConstraints : audioOnlyConstraints)
44
32
  .then(stream => {
package/src/modules/wt-auth.js CHANGED
@@ -4,7 +4,7 @@ import emitter from './wt-emitter';
4
4
 
5
5
  class Auth {
6
6
 
7
- constructor(enableDebugFlag, isProduction = true, language = 'en-GB', storagePrefix = "", apiUrl = null) {
7
+ constructor(enableDebugFlag, language = 'en-GB', storagePrefix = "", apiUrl = null) {
8
8
 
9
9
  this.ID_TOKEN = `${storagePrefix !== "" ? storagePrefix+'_':''}rwt_idToken`;
10
10
  this.ACCESS_TOKEN = `${storagePrefix !== "" ? storagePrefix+'_':''}rwt_accessToken`;
@@ -22,7 +22,7 @@ class Auth {
22
22
  this.__isRefreshing = false;
23
23
  this.__isLogged = null;
24
24
  this.__parsedJwt = null;
25
- this.__specUrl = apiUrl ? apiUrl : (isProduction === true ? config.apiUrl : config.devApiUrl);
25
+ this.__specUrl = apiUrl ? apiUrl : config.apiUrl;
26
26
  this.__client = this.initialize(true);
27
27
  }
28
28