npm - @reactoo/watchtogether-sdk-js - Versions diffs - 2.6.79 → 2.6.81 - Mend

@reactoo/watchtogether-sdk-js 2.6.79 → 2.6.81

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

package/dist/watchtogether-sdk.js +2 -2
package/dist/watchtogether-sdk.min.js +2 -2
package/example/bulk_join_room/affiliation/country/affiliation-data.json +621 -207
package/example/bulk_join_room/bulk_join_room_2.html +1 -1
package/package.json +1 -1
package/src/modules/wt-room.js +2 -2
package/example/audio_controls/audio_controls.html +0 -200
package/example/audio_controls/audiocontrols.js +0 -230

package/example/bulk_join_room/bulk_join_room_2.html CHANGED Viewed

@@ -790,7 +790,7 @@
         fetch('./affiliation/country/affiliation-data.json').then(response => response.json())
             .then(countries => {
                 participants.filter(p => p).forEach(participant => {
-                    const continentCountries = continent ? countries.filter(country => country.continent === continent) : countries;
+                    const continentCountries = continent ? countries.filter(country => country.data.continent === continent) : countries;
                     const randomCountry = continentCountries[Math.floor(Math.random()*continentCountries.length)];
                     participant.sdkInstance.user.getUserSelf()

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@reactoo/watchtogether-sdk-js",
-  "version": "2.6.79",
+  "version": "2.6.81",
   "description": "Javascript SDK for Reactoo",
   "main": "src/index.js",
   "unpkg": "dist/watchtogether-sdk.min.js",

package/src/modules/wt-room.js CHANGED Viewed

@@ -1584,7 +1584,7 @@ class RoomSession {
 							: this.simulcastMode;
 						const failedAttempts = p.webrtcStuff.simulcastSwitchFailedAttempts[mid] || 0;
-						if((simulcastMode === 'auto' && !manualSelectedSubstream) || failedAttempts > 3) {
+						if((simulcastMode === 'auto' && !manualSelectedSubstream) /* || failedAttempts > 3 */) {
 							// do nothing
 						}
@@ -3020,7 +3020,7 @@ class RoomSession {
 						this._abortController.signal.removeEventListener('abort', abortResponse);
 						this.ws.removeEventListener('message', parseResponse);
 						reject('timeout');
-					}, 2000);
+					}, 5000);
 					this.sendMessage(handleId, {
 						"body": {

package/example/audio_controls/audio_controls.html DELETED Viewed

@@ -1,200 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="utf-8">
-	<title>The Example</title>
-	<script src="./audiocontrols.js"></script>
-	<script src="../../dist/watchtogether-sdk.js"></script>
-</head>
-<body style="padding: 0; margin: 0; margin-top: 20px">
-<div style="display: flex">
-	<div style="flex: 0 0 50%; text-align: center">
-		<div id="input-container" style="display: none">
-			<textarea id="input" style="width: 80%; height: 500px; padding: 0"></textarea>
-			<br>
-			<button onclick="applyAudioControlsObject()" style="width: 80%">Apply audio controls object</button>
-		</div>
-	</div>
-	<div style="flex: 0 0 50%; text-align: center">
-		<select id="audio-devices" style="width: 80%" onchange="selectedAudioDeviceId = this.value"></select>
-		<br>
-		<select id="video-devices" style="width: 80%" onchange="selectedVideoDeviceId = this.value"></select>
-		<button style="width: 80%" onclick="getDevicesPermissionAndEnumerateDevices()">Enumerate devices</button>
-		<br><br><br><br>
-		<div id="stream-container" style="display: none">
-			<div style="width: 80%; margin-left: auto; margin-right: auto">
-				<video id="stream" style="width: 100%; height: 300px; background-color: black; object-fit: contain" autoplay></video>
-			</div>
-			<button style="width: 80%" onclick="attachStream()">Attach stream to video element</button>
-			<br>OR<br>
-			<label for="room-id">Room ID : </label>
-			<input id="room-id" size="35" onchange="roomId = this.value">
-			<button style="width: 80%" onclick="sendStreamToRoom()">Send stream to room</button>
-			<br>
-			<button id="producer-link" style="width: 80%" onclick="goToProducer()">Producer preview</button>
-		</div>
-	</div>
-</div>
-<script>
-	let audioControlsObject = {
-		enabled: true,
-		gain: {
-			value: 1,
-			decibels: 0
-		},
-		equalizer: {
-			lowshelf: {
-				frequency: 220,
-				gain: 0
-			},
-			peaking: {
-				frequency: 2400,
-				gain: 0,
-				q: 0.3,
-				qType: "low"
-			},
-			highshelf: {
-				frequency: 12000,
-				gain: 0
-			}
-		},
-		compressor: {
-			threshold: 0,
-			ratio: 2,
-			knee: 2,
-			attack: 0.001,
-			release: 0.15,
-			speed: "medium"
-		},
-		delay: 0,
-	};
-	let roomId = "03159020-59a8-4d10-a801-8aef895141a3";
-	let sdkInstance = null;
-	let roomSession = null;
-	let audioControls = null;
-	let enumeratedAudioDevices = null;
-	let enumeratedVideoDevices = null;
-	let selectedAudioDeviceId = null;
-	let selectedVideoDeviceId = null;
-	const inputContainerElement = document.getElementById('input-container');
-	const inputElement = document.getElementById('input');
-	const audioDevicesSelectElement = document.getElementById("audio-devices");
-	const videoDevicesSelectElement = document.getElementById("video-devices");
-	const streamContainerElement = document.getElementById('stream-container');
-	const streamElement = document.getElementById('stream');
-	const roomIdInputElement = document.getElementById('room-id');
-	document.addEventListener("DOMContentLoaded", function() {
-		audioControls = new AudioControls();
-		inputElement.value = JSON.stringify(audioControlsObject, null, 2);
-	});
-	function applyAudioControlsObject() {
-		audioControlsObject = JSON.parse(inputElement.value);
-		audioControls.setParametersFromAudioControlsObject(audioControlsObject);
-	}
-	function enumerateDevices() {
-		enumeratedAudioDevices = [];
-		return navigator.mediaDevices.enumerateDevices()
-			.then(devices => {
-				enumeratedAudioDevices = [];
-				enumeratedVideoDevices = [];
-				devices.forEach(device => {
-					const deviceDetail = {
-						id: device.deviceId,
-						label: device.label
-					};
-					if (device.kind === 'audioinput') {
-						enumeratedAudioDevices.push(deviceDetail);
-					}
-					if (device.kind === 'videoinput') {
-						enumeratedVideoDevices.push(deviceDetail);
-					}
-				});
-			});
-	}
-	function getUserMedia(audioDeviceId, videoDeviceId) {
-		const constraints = {
-			audio: audioDeviceId ? {deviceId: {exact: audioDeviceId}} : true,
-			video: {frameRate: {ideal: 10, max: 20}, width: {ideal: 320, max: 480}, height: {ideal: 240, max: 360}}
-		};
-		if (videoDeviceId) {
-			constraints.video.deviceId = {exact: videoDeviceId};
-		}
-		return navigator.mediaDevices.getUserMedia(constraints);
-	}
-	function getDevicesPermissionAndEnumerateDevices() {
-		getUserMedia()
-			.then(stream => stream.getTracks().forEach(key => stream.removeTrack(key)))
-			.then(() => enumerateDevices())
-			.then(() => {
-				while (audioDevicesSelectElement.firstChild) {
-					audioDevicesSelectElement.removeChild(audioDevicesSelectElement.lastChild);
-				}
-				while (videoDevicesSelectElement.firstChild) {
-					videoDevicesSelectElement.removeChild(videoDevicesSelectElement.lastChild);
-				}
-				enumeratedAudioDevices.forEach(device => {
-					const optionElement = document.createElement('option');
-					optionElement.value = device.id;
-					optionElement.innerHTML = device.label;
-					audioDevicesSelectElement.appendChild(optionElement);
-				});
-				enumeratedVideoDevices.forEach(device => {
-					const optionElement = document.createElement('option');
-					optionElement.value = device.id;
-					optionElement.innerHTML = device.label;
-					videoDevicesSelectElement.appendChild(optionElement);
-				});
-				inputContainerElement.style.display = "block";
-				streamContainerElement.style.display = "block";
-				roomIdInputElement.value = roomId;
-			});
-	}
-	function attachStream () {
-		getUserMedia(selectedAudioDeviceId, selectedVideoDeviceId).then(stream => {
-			streamElement.srcObject = audioControls.setStream(stream);
-		});
-	}
-	function sendStreamToRoom () {
-		getUserMedia(selectedAudioDeviceId, selectedVideoDeviceId).then(stream => {
-			sdkInstance = WatchTogetherSDK({debug:true, storagePrefix: "user_1"})();
-			sdkInstance.auth.deviceLogin("user_1")
-				.then(() => sdkInstance.room.createSession({roomId}))
-				.then(session => {
-					roomSession = session;
-					return Promise.all([session, session.connect()])
-				})
-				.then(([session, _]) => session.publishLocal(audioControls.setStream(stream), {getStreamIfEmpty: false}));
-		});
-	}
-	function goToProducer() {
-		window.open('https://producer.reactoo.com/#/detail/room-monitor/' + roomId, '_blank').focus();
-	}
-</script>
-</body>
-</html>

package/example/audio_controls/audiocontrols.js DELETED Viewed

@@ -1,230 +0,0 @@
-// https://createjs.com/docs/soundjs/files/soundjs_webaudio_WebAudioPlugin.js.html
-// https://mdn.github.io/webaudio-examples/compressor-example/
-// https://codepen.io/webciter/pen/WNbPyrY
-let ac = window.AudioContext || window.webkitAudioContext;
-class AudioControls {
-	audioContext;
-	eventListeners;
-	streamSource;
-	gainNode;
-	equalizerNodes; // List of nodes
-	compressorNode;
-	delayNode;
-	streamDestination;
-	gainDefaultParameters = {
-		gain: 1
-	};
-	// frequency - The middle of the frequency range getting a boost or an attenuation.
-	// 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.
-	// gain - from -40 to 40 db - The boost, in dB, to be applied; if negative, it will be an attenuation.
-	// type - must be read only
-	equalizerDefaultParameters = [
-		{frequency: 220, gain: 0, type: 'lowshelf'},			// Frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged.
-		{frequency: 2400, gain: 0, type: 'peaking', Q: 0.3},	// Frequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged.
-		{frequency: 12000, gain: 0, type: 'highshelf'}			// Frequencies higher than the frequency get a boost or an attenuation; frequencies lower than it are unchanged
-	];
-	compressorDefaultParameters = {
-		threshold: 0,	// from -100 to 0	0 - compression will start at 0db - no compression
-		knee: 30,		// from 0 to 40		0 - hard knee - no smooth transition to compression
-		ratio: 2,		// from 1 to 20		1 - ratio 1:1 will not affect anything
-		attack: 0.001,	// from 0 to 1		0 - no time required to reduce the gain by 10 dB
-		release: 0.15,	// from 0 to 1		0 - no time required to increase the gain by 10 dB
-	};
-	delayDefaultParameters = {
-		delay: 0
-	};
-	constructor() {
-		this.audioContext = new ac();
-		this.streamDestination = this.audioContext.createMediaStreamDestination();
-		this.delayNode = this.audioContext.createDelay(179);
-		this.setDelay(this.delayDefaultParameters.delay);
-		this.delayNode.connect(this.streamDestination);
-		this.compressorNode = this.audioContext.createDynamicsCompressor();
-		this.setCompressorParameters(this.compressorDefaultParameters);
-		this.compressorNode.connect(this.delayNode);
-		this.equalizerNodes = this.equalizerDefaultParameters.map( parameters => {
-			const biquadFilter = this.audioContext.createBiquadFilter();
-			biquadFilter.type = parameters.type;
-			return biquadFilter;
-		});
-		this.equalizerDefaultParameters.forEach( parameters => {
-			this.setEqualizerParameters(parameters);
-		});
-		this.equalizerNodes.forEach( (node, nodeIndex) => {
-			if (nodeIndex < this.equalizerNodes.length - 1) {
-				node.connect(this.equalizerNodes[nodeIndex + 1]);
-			} else {
-				node.connect(this.compressorNode);
-			}
-		});
-		this.gainNode = this.audioContext.createGain();
-		this.setGain(this.gainDefaultParameters.gain);
-		this.gainNode.connect(this.equalizerNodes[0]);
-		this.streamSource = null;
-		this.eventListeners = {};
-		document.body.addEventListener('click', () => {
-			this.resume();
-		}, { once: true });
-	}
-	emit (label, ...args) {
-		let callbacks = this.eventListeners[label];
-		if(callbacks) {
-			callbacks.forEach(callback => callback.apply(null, args))
-		}
-	}
-	addEventListener (event, fn) {
-		if(!this.eventListeners[event]) {
-			this.eventListeners[event] = []
-		}
-		this.eventListeners[event].push(fn);
-	}
-	removeEventListener (event, fn) {
-		if(!this.eventListeners[event]) {
-			return
-		}
-		let index = this.eventListeners[event].findIndex(listener => listener === fn);
-		if(index > -1) {
-			this.eventListeners[event].splice(index, 1);
-		}
-	}
-	clearEventListeners () {
-		for(let key in this.eventListeners) {
-			this.eventListeners[key].length = 0;
-		}
-	}
-	render() {
-		this.drawId = setTimeout(() => {
-			this.emit('compressorReduction', this.compressorNode.reduction);
-			this.render();
-		}, 1000 / 10)
-	}
-	startRenderLoop() {
-		clearTimeout(this.drawId);
-		this.render();
-	}
-	stopRenderLoop() {
-		clearTimeout(this.drawId);
-	}
-	setStream(stream) {
-		if (this.streamSource) {
-			this.streamSource.disconnect(this.gainNode);
-		}
-		this.streamSource = this.audioContext.createMediaStreamSource(stream);
-		this.streamSource.connect(this.gainNode);
-		this.resume();
-		// this.streamDestination.stream.getVideoTracks().forEach(t => this.streamDestination.stream.removeTrack(t));
-		// stream.getVideoTracks().forEach(t => {
-		// 	this.streamDestination.stream.addTrack(t)
-		// });
-		// return this.streamDestination.stream;
-		const finalStream = new MediaStream();
-		const [videotrack] = stream.getVideoTracks();
-		if(videotrack) {
-			finalStream.addTrack(videotrack);
-		}
-		const [audiotrack] = this.streamDestination.stream.getAudioTracks();
-		if(audiotrack) {
-			finalStream.addTrack(audiotrack);
-		}
-		// https://stackoverflow.com/a/63844077
-		// new Audio().srcObject = stream;
-		// new Audio().srcObject = finalStream;
-		return finalStream;
-	}
-	resume() {
-		if (this.audioContext.state === 'suspended') {
-			this.audioContext.resume();
-			this.startRenderLoop();
-		}
-	}
-	setGain(gain) {
-		this.gainNode.gain.setValueAtTime(gain, Math.floor(this.audioContext.currentTime));
-	}
-	setEqualizerParameters(equalizerParameters, nodeType) {
-		const nodeIndex = ['lowshelf', 'peaking', 'highshelf'].findIndex(e => e === nodeType || e === equalizerParameters.type);
-		if (nodeIndex !== -1) {
-			['frequency', 'gain', 'Q'].forEach( parameterName => {
-				if (equalizerParameters.hasOwnProperty(parameterName) && equalizerParameters[parameterName] !== undefined) {
-					this.equalizerNodes[nodeIndex][parameterName].value = equalizerParameters[parameterName];
-				}
-			});
-		}
-	}
-	setCompressorParameters(compressorParameters) {
-		['threshold', 'knee', 'ratio', 'attack', 'release'].forEach( parameterName => {
-			if (compressorParameters.hasOwnProperty(parameterName) && compressorParameters[parameterName] !== undefined) {
-				this.compressorNode[parameterName].value = compressorParameters[parameterName];
-			}
-		});
-	}
-	setDelay(delay) {
-		this.delayNode.delayTime.setValueAtTime(delay, Math.floor(this.audioContext.currentTime));
-	}
-	setParametersFromAudioControlsObject(audioControlsObject) {
-		if (audioControlsObject.enabled) {
-			this.setGain(audioControlsObject.gain.value);
-			Object.keys(audioControlsObject.equalizer)
-				.forEach(type => this.setEqualizerParameters(audioControlsObject.equalizer[type], type));
-			this.setCompressorParameters(audioControlsObject.compressor);
-			this.setDelay(audioControlsObject.delay);
-		} else {
-			this.setGain(this.gainDefaultParameters.gain);
-			this.equalizerDefaultParameters
-				.forEach( p => this.setEqualizerParameters(p));
-			this.setCompressorParameters(this.compressorDefaultParameters);
-			this.setDelay(0);
-		}
-	}
-	destroy() {
-		this.stopRenderLoop();
-		this.streamSource.disconnect(this.gainNode);
-		this.audioContext.close();
-	}
-}
-// Uncomment this to use in VUE
-// export default {
-// 	install: function(Vue) {
-// 		Object.defineProperty(Vue.prototype, '$audiocontrols', { value: AudioControls });
-// 	}
-// }