media selection sample that works on mobile devices and connect to room

[makarandp0]

This PR updates media device sample.

With the updates now you can:

• load the sample and update tracks while connected to room.
• sample works on mobile safari (on iOS).
• sample works on mobile chrome (on android).

What does not work:

• video tracks from chrome do not show up in mobile safari. They do not fire "subscribed" event. (Filed JSDK-2382)

Before merge:

• remove hardcoded room name
• fix and remove TODOs from code.
• revert package.json changes which are for local testing only

on Safari (iOS).

on Chrome (Desktop)

[manjeshbhargav]

Great start! Can you also share the UI snapshot? Also, can you mention somewhere that it is important in mobile browsers to always create new LocalVideoTracks while switching between cameras? This is because, as soon as you create a new LocalVideoTrack, video stops for the old LocalVideoTrack. So, it is recommended to stop and unpublish the old LocalVideoTrack before publishing the new LocalVideoTrack.

[manjeshbhargav]

@makarandp0 I would make this simpler:

/**
 * Replace the existing LocalAudioTrack or LocalVideoTrack with
 * a new one in the Room.
 * @param {Room} room - The Room you have joined
 * @param {LocalAudioTrack|LocalVideoTrack} track - The LocalTrack you want to switch to
 * @returns {void}
 */
function switchLocalTracks(room, track) {
  const localParticipant = room.localParticipant;
  const publication = Array(track.kind === 'audio'
    ? localParticipant.audioTracks.values()
    : localParticipant.videoTracks.values())[0];
  if (publication) {
    publication.track.stop();
    publication.unpublish();
  }
  localParticipant.publishTrack(localTrack);
}

[makarandp0]

@manjeshbhargav - I think current version reads better, and by using track.kind avoid an extra if check. but good point about track.stop, I will update to stop the track before unpublishing.

[manjeshbhargav]

@makarandp0 I think you should retain this and only apply where setSinkId is supported.

[makarandp0]

I moved this functionality out of the helper.js because a) this example is already getting big, and more importantly the part of handling output devices does not require/demonstrates any of our SDK apis.

@manjeshbhargav - what do you think about removing output device selection from this sample. This is outside the scope of our API, and does not work on safari.
It also does not render waveform on mobile chrome either, I did not investigate why.

[manjeshbhargav]

@makarandp0 I think we should still retain it here because we have been asked question before as to how to redirect media to specific audio output devices. That is the reason we added this example in the first place. However, I would add an additional check for setSinkId support:

/**
 * Apply the selected audio output device.
 * @param {string} deviceId
 * @param {HTMLAudioElement} audio
 * @returns {Promise<void>}
 */
function applyAudioOutputDeviceSelection(deviceId, audio) {
  return typeof audio.setSinkId === 'function'
    ? audio.setSinkId(deviceId)
    : Promise.reject('This browser does not support setting an audio output device');
}

[manjeshbhargav]

@makarandp0 Some small change requests, otherwise the example looks good!

[manjeshbhargav]

@makarandp0 on the receiver side?

[manjeshbhargav]

@makarandp0 Nitpick: please make this check for room being non-null outside this function. Ideally, we should only have the code we want to showcase here.

[manjeshbhargav]

@makarandp0 Here, you can do the room non-null check:

room && switchLocalTracks(room, localTrack);

[manjeshbhargav]

@makarandp0 I think we should still retain it here because we have been asked question before as to how to redirect media to specific audio output devices. That is the reason we added this example in the first place. However, I would add an additional check for setSinkId support:

/**
 * Apply the selected audio output device.
 * @param {string} deviceId
 * @param {HTMLAudioElement} audio
 * @returns {Promise<void>}
 */
function applyAudioOutputDeviceSelection(deviceId, audio) {
  return typeof audio.setSinkId === 'function'
    ? audio.setSinkId(deviceId)
    : Promise.reject('This browser does not support setting an audio output device');
}

[manjeshbhargav]

@makarandp0 Here, you can do the room non-null check:

room && switchLocalTracks(room, localTrack);