user-media-selector component connectedCallback

user-media-selector-view-model-connectedCallback.js

export const ViewModel = DefineMap.extend({
  // Setup and teardown
  // This is called when the component is inserted into the DOM
  connectedCallback () {
    const deviceChangeHandler = () => {
      navigator.mediaDevices.enumerateDevices()
        .then(devices => (this.devices = devices))
        .catch(error => console.error(error))
    }
    deviceChangeHandler()

    navigator.mediaDevices.addEventListener('devicechange', deviceChangeHandler)

    this.listenTo('constraints', (event, constraints) => {
      if (constraints.video || constraints.audio) {
        navigator.mediaDevices.getUserMedia(constraints)
          .then(stream => (this.previewStream = stream))
          .catch(error => console.error(error))
      }
    })
    // This is called when the component is removed from the DOM
    return () => {
      navigator.mediaDevices.removeEventListener('devicechange', deviceChangeHandler)
      this.stopListening()
    }
  }
})