video-conference-snippet.js

var methods = {
  setupVideoConference() {
    console.log('setupVideoConference');
    return this.makeLocalTracks()
      .then(this.getToken)
      .then(this.createRoom)
      .then(this.publishLocalTracks)
      .catch((e) => {
        console.log('setupVideoConference', JSON.stringify(e));
      });
  },
  saveSettings(savedDevices) {
    console.log('saveSettings', JSON.stringify(savedDevices));
    this.savedDevices = savedDevices;
    this.makeLocalTracks()
      .then(this.publishLocalTracks);
  },
  publishLocalTracks() {
    console.log('publishLocalTracks');
    if (this.localTracks && this.room) {
      this.room.localParticipant.publishTracks(this.localTracks)
        .then((tracks) => {
          console.log('Successfully published Track ', JSON.stringify(tracks));
        }).catch((error) => {
          console.error('Failed to publish Track!', error.message);
        });
    }
  },
  getDefaultDevices(devices) {
    console.log('getDefaultDevices', JSON.stringify(devices));
    // Set default devices to be the one with 'default' deviceId.
    devices.forEach((device) => {
      const { deviceId, kind } = device;
      if (deviceId === 'default') {
        this.defaultDevices[kind] = deviceId;
      }
    });
    // If there are any devices left with no defaults, set first element to default
    Object.keys(deviceMap).forEach((kind) => {
      if (!this.defaultDevices[kind] && this.devices[kind]) {
        this.defaultDevices[kind] = this.devices[kind][0].deviceId;
      }
    });
    return Promise.resolve(this.defaultDevices);
  },
  setupDevices() {
    // Devices setup
    console.log('setupDevices ', 'Setting up devices');
    return navigator.mediaDevices.enumerateDevices()
      .then((devices) => {
        console.log('List of devices:', JSON.stringify(devices));
        devices.forEach((device) => {
          const currDevice = device;
          currDevice.value = device.deviceId;
        });
        this.devices = groupBy(devices, 'kind');
        return this.getDefaultDevices(devices);
      });
  },
  unpublishScreenTrack() {
    console.log('unpublishScreenTrack');
    if (this.localScreenTrack) {
      this.localScreenTrack.stop();
      this.markScreenShareIcon(false);
      this.room.localParticipant.unpublishTrack(this.localScreenTrack);
      this.localScreenTrack = null;
    }
  },
  unpublishTracks() {
    console.log('unpublishTracks', JSON.stringify(this.localTracks));
    if (this.room && this.room.localParticipant) {
      this.unpublishScreenTrack();
      this.room.localParticipant.unpublishTracks(this.localTracks);
      this.localTracks = [];
    }
  },
  makeLocalTracks() {
    console.log('makeLocalTracks');
    if (this.localTracks && this.localTracks.length) {
      this.unpublishTracks();
    }
    const id = guid();
    this.$roomParams.id = id;
    const savedDevices = this.savedDevices || defaultDevices;
    const deviceConfig = {
      audio: {
        name: `audio-${id}`,
        deviceId: savedDevices.audioinput,
      },
    };
    return navigator.mediaDevices.enumerateDevices()
      .then((devices) => {
        const videoDevices = devices.filter(d => d.kind === 'videoinput');
        if (videoDevices.length) {
          deviceConfig.video = {
            name: `video-${id}`,
            deviceId: savedDevices.videoinput,
          };
        }
        console.log('makeLocalTracks devices: ', JSON.stringify(deviceConfig));
        return createLocalTracks(deviceConfig)
          .then((tracks) => {
            this.localTracks = [
              ...this.localTracks,
              ...tracks,
            ];
            console.log('createdLocalTracks');
            return this.localTracks;
          });
      })
      .then(this.setupDevices)
      .catch((e) => {
        console.error('Error in creating tracks', e);
        this.showActionBar = true;
        if (/permission/i.test(e)) {
          this.permissionMsg = 'Please allow the application access to your Camera/Microphone';
          this.actions
            .filter(action => /video|audio/i.test(action.name))
            .forEach((action) => {
              const currAction = action;
              currAction.text = `${action.text} (Permission Denied by user)`;
            });
        } else {
          this.actions
            .filter(action => /video|audio/i.test(action.name))
            .forEach((action) => {
              const currAction = action;
              currAction.disabled = true;
              currAction.text = `${action.text} (Hardware not found)`;
            });
          this.trackCreationError = true;
        }
      });
    },
};