JSDK-2911 Update MediaDevices example to use track.restart #145

PikaJoyce · 2020-07-10T03:44:07Z

This PR is for updating the Media Devices example to use the latest SDK track.restart method.

Contributing to Twilio

All third-party contributors acknowledge that any contributions they provide will be made under the same open-source license that the open-source project is provided under.

I acknowledge that all my contributions will be made under the project's license.

…ersion in package.json as well

…ceSelection

manjeshbhargav

@PikaJoyce Your current changes breaks the app if you try and change devices before joining a Room. Please verify your changes locally before requesting a pull request review.

examples/mediadevices/src/helpers.js

examples/mediadevices/src/index.js

manjeshbhargav

@PikaJoyce Your most recent changes still don't work if you want to select devices before joining the Room. Please verify that your changes work before asking for a review.

examples/mediadevices/src/helpers.js

manjeshbhargav · 2020-07-14T22:21:05Z

examples/mediadevices/src/index.js

+  if(someRoom) {
+    [localAudioTrackPublication] = Array.from(someRoom.localParticipant.audioTracks.values());
+  }
+  if (localAudioTrackPublication) {


This still doesn't work if you want to change and apply devices before joining a Room.

manjeshbhargav · 2020-07-14T22:22:06Z

examples/mediadevices/src/index.js

-    var video = document.querySelector('video#videoinputpreview');
-    applyVideoInputDeviceSelection(deviceSelections.videoinput.value, video, someRoom);
+    const video = document.querySelector('video#videoinputpreview');
+    applyVideoInputDeviceSelection(deviceSelections.videoinput.value, localVideoTrackPublication.track)


This still doesn't work if you want to change and apply devices before joining a Room. Also, localVideoTrackPublication.track will raise an error if you haven't joined the Room (publication will be null).

…exist

PikaJoyce · 2020-07-16T00:09:58Z

@manjeshbhargav this is how it looks like now! Works great on FF.

manjeshbhargav · 2020-07-20T17:42:42Z

examples/mediadevices/src/helpers.js

@@ -30,61 +30,25 @@ function applyAudioOutputDeviceSelection(deviceId, audio) {
 /**
 * Apply the selected audio input device.


Suggested change

* Apply the selected audio input device.

* Apply the selected input device.

manjeshbhargav · 2020-07-20T17:43:10Z

examples/mediadevices/src/helpers.js

@@ -30,61 +30,25 @@ function applyAudioOutputDeviceSelection(deviceId, audio) {
 /**
 * Apply the selected audio input device.
 * @param {string} deviceId
- * @param {HTMLAudioElement} audio
- * @param {Room} [room] - The Room, if you have already joined one
+ * @param {LocalTrack} Track - LocalAudioTrack or LocalVideoTrack


Suggested change

* @param {LocalTrack} Track - LocalAudioTrack or LocalVideoTrack

* @param {LocalTrack} localTrack - LocalAudioTrack or LocalVideoTrack

manjeshbhargav · 2020-07-20T17:43:44Z

examples/mediadevices/src/helpers.js

- * @param {HTMLAudioElement} audio
- * @param {Room} [room] - The Room, if you have already joined one
+ * @param {LocalTrack} Track - LocalAudioTrack or LocalVideoTrack
+ * @param {string} kind - kind of Track


Suggested change

* @param {string} kind - kind of Track

* @param {'audio' | 'video'} kind

manjeshbhargav · 2020-07-20T17:46:50Z

examples/mediadevices/src/helpers.js

- * @param {HTMLAudioElement} audio
- * @param {Room} [room] - The Room, if you have already joined one
+ * @param {LocalTrack} Track - LocalAudioTrack or LocalVideoTrack
+ * @param {string} kind - kind of Track
 * @returns {Promise<void>}


Suggested change

* @returns {Promise<void>}

* @returns {Promise<LocalTrack>} The created or restarted LocalTrack

examples/mediadevices/src/helpers.js

manjeshbhargav · 2020-07-20T18:10:31Z

examples/mediadevices/src/index.js

+      console.log('localAudioTrack after apply', localAudioTrack);
+    }
+    await applyInputDeviceSelection(deviceSelections.audioinput.value, localAudioTrack, 'audio');
+    console.log('localAudioTrack exists',localAudioTrack);


Suggested change

console.log('localAudioTrack exists',localAudioTrack);

manjeshbhargav · 2020-07-20T18:10:47Z

examples/mediadevices/src/index.js

-    applyVideoInputDeviceSelection(deviceSelections.videoinput.value, video, someRoom);
+    const video = document.querySelector('video#videoinputpreview');
+    localVideoTrack = await applyInputDeviceSelection(deviceSelections.videoinput.value, localVideoTrack, 'video').catch(err => (console.error(err)));
+    localVideoTrack.attach(video)


Suggested change

localVideoTrack.attach(video)

localVideoTrack.attach(video);

manjeshbhargav · 2020-07-20T18:11:26Z

examples/mediadevices/src/index.js

-    var video = document.querySelector('video#videoinputpreview');
-    applyVideoInputDeviceSelection(deviceSelections.videoinput.value, video, someRoom);
+    const video = document.querySelector('video#videoinputpreview');
+    localVideoTrack = await applyInputDeviceSelection(deviceSelections.videoinput.value, localVideoTrack, 'video').catch(err => (console.error(err)));


Suggested change

localVideoTrack = await applyInputDeviceSelection(deviceSelections.videoinput.value, localVideoTrack, 'video').catch(err => (console.error(err)));

localVideoTrack = await applyInputDeviceSelection(deviceSelections.videoinput.value, localVideoTrack, 'video');

manjeshbhargav · 2020-07-20T18:11:47Z

examples/mediadevices/src/index.js

-  if (audio.srcObject) {
-    var canvas = waveformContainer.querySelector('canvas');
-    waveform.setStream(audio.srcObject);
+  try {


Suggested change

try {

manjeshbhargav · 2020-07-20T18:12:05Z

examples/mediadevices/src/index.js

+  } catch (error) {
+    console.log('audioInput apply failed:', error);
  }


Suggested change

} catch (error) {

console.log('audioInput apply failed:', error);

}

…anges

manjeshbhargav

LGTM. Let's go through the example once in our 1:1 before merging. 👍

manjeshbhargav · 2020-07-20T19:53:53Z

examples/mediadevices/src/index.js

@@ -122,27 +120,18 @@ function participantDisconnected(participant) {
  participantDiv.parentNode.removeChild(participantDiv);
 }

-// // reads selected audio input, and updates preview and room to use the device.
+// Reads selected audio input, and updates preview and room to use the device.


Suggested change

// Reads selected audio input, and updates preview and room to use the device.

// reads selected audio input, and updates preview and room to use the device.

manjeshbhargav · 2020-07-20T19:54:36Z

examples/mediadevices/src/index.js

@@ -156,15 +145,17 @@ async function applyVideoInputDeviceChange(event) {
  }
  try {


Suggested change

try {

manjeshbhargav · 2020-07-20T19:54:49Z

examples/mediadevices/src/index.js

  } catch (error) {
    console.log('videoInput apply failed:', error);
  }


Suggested change

} catch (error) {

console.log('videoInput apply failed:', error);

}

PikaJoyce added 2 commits July 9, 2020 17:45

JSDK-2911 Updated applyAudioDeviceChange and Selection, changed SDK V…

6eb14ca

…ersion in package.json as well

JSDK-2911 Updated applyVideoInputDeviceChange and applyVideoInputDevi…

397cfeb

…ceSelection

PikaJoyce requested a review from manjeshbhargav July 10, 2020 03:44

manjeshbhargav requested changes Jul 14, 2020

View reviewed changes

examples/mediadevices/src/helpers.js Outdated Show resolved Hide resolved

examples/mediadevices/src/helpers.js Outdated Show resolved Hide resolved

examples/mediadevices/src/index.js Outdated Show resolved Hide resolved

examples/mediadevices/src/index.js Outdated Show resolved Hide resolved

JSDK-2911 Fixed requested changes

f0c063c

PikaJoyce requested a review from manjeshbhargav July 14, 2020 20:04

manjeshbhargav requested changes Jul 14, 2020

View reviewed changes

PikaJoyce added 2 commits July 14, 2020 17:02

JSDK-2911 Helpers log

d3ae841

JSDK-2911 Added track state and disabling apply buttons until tracks …

513d24d

…exist

PikaJoyce requested a review from manjeshbhargav July 16, 2020 00:10

JSDK-2911 Replaced helper functions. Need to fix app.

8149c94

manjeshbhargav requested changes Jul 20, 2020

View reviewed changes

JSDK-2911 Squashed bugs, waveform works and incorporated requested ch…

6d48bdc

…anges

PikaJoyce requested a review from manjeshbhargav July 20, 2020 18:42

manjeshbhargav approved these changes Jul 20, 2020

View reviewed changes

PikaJoyce added 2 commits July 20, 2020 13:58

JSDK-2911 Quick fixes

18881a4

JSDK-2911 Last minute tweaks

292282e

PikaJoyce merged commit b2da4f0 into master Jul 21, 2020

PikaJoyce deleted the JSDK-2911-UpdateMediaDevicesExample branch July 21, 2020 00:39

		@@ -30,61 +30,25 @@ function applyAudioOutputDeviceSelection(deviceId, audio) {
		/**
		* Apply the selected audio input device.

	* Apply the selected audio input device.
	* Apply the selected input device.

	* @param {LocalTrack} Track - LocalAudioTrack or LocalVideoTrack
	* @param {LocalTrack} localTrack - LocalAudioTrack or LocalVideoTrack

	* @param {string} kind - kind of Track
	* @param {'audio' \| 'video'} kind

	* @returns {Promise<void>}
	* @returns {Promise<LocalTrack>} The created or restarted LocalTrack

	localVideoTrack = await applyInputDeviceSelection(deviceSelections.videoinput.value, localVideoTrack, 'video').catch(err => (console.error(err)));
	localVideoTrack = await applyInputDeviceSelection(deviceSelections.videoinput.value, localVideoTrack, 'video');

	} catch (error) {
	console.log('audioInput apply failed:', error);
	}

	// Reads selected audio input, and updates preview and room to use the device.
	// reads selected audio input, and updates preview and room to use the device.

		@@ -156,15 +145,17 @@ async function applyVideoInputDeviceChange(event) {
		}
		try {

	} catch (error) {
	console.log('videoInput apply failed:', error);
	}

JSDK-2911 Update MediaDevices example to use track.restart #145

JSDK-2911 Update MediaDevices example to use track.restart #145

Uh oh!

Conversation

PikaJoyce commented Jul 10, 2020

Uh oh!

manjeshbhargav left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

manjeshbhargav left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

PikaJoyce commented Jul 16, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

manjeshbhargav left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!