Notreadableerror could not start video source ошибка

function StartVideoCamera(obj) {
    var id = $(obj).attr('id');
    var camNode = $(obj).attr('cammode');
    if (camNode != 'user') {
        camNode = eval('{ exact: "environment" }')
    }
    var video = document.querySelector('#video' + id);
    var constraints = { audio: true, video: { width: videoHeight, height: videoWidth, facingMode: camNode 
    } };
    navigator.mediaDevices.getUserMedia(constraints)
    .then(function (mediaStream) {
        window.stream = null;
        video.srcObject = null;
        recordButton.disabled = false;
        window.stream = mediaStream;
        video.srcObject = mediaStream;
        video.onloadedmetadata = function (e) {
            video.play();
        };
    })
    .catch(function (err) {
         alert(err.name + ": " + err.message)
         console.log(err.name + ": " + err.message);
     });
}

5

"twilio": "^3.27.1",
"twilio-video": "^1.15.1",

<template>
  <div class="columns">
    <div class="column is-full">
      <div v-if="videoDevices" v-show="videoDevices.length > 1" class="field is-flex">
        <div class="column is-one-third">
          <label>{{ facingMode }} camera</label>
        </div>
        <div class="column is-two-thirds">
          <button class="button is-small is-primary" @click="switcher">Switch</button>

          <div class="control has-icons-left">
          <span class="select is-small">
            <select id="video-devices" v-model="currentVideoDevice">
              <option v-for="(device, index) in videoDevices"
                      :key="index"
                      :value="device.id"
              >
                {{ device.name }}
              </option>
            </select>
          </span>
            <span class="icon is-small is-left">
            <i class="fas fa-camera"></i>
          </span>
          </div>
        </div>

      </div>
    </div>

    <hr>

    <div class="column is-full">
      <ul>
        <li v-for="(device, index) in videoDevices" :key="index">
          {{ device.name }} - {{ device.id }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import $ from 'jquery';
import Video from 'twilio-video'
import { detachTracks, attachTracks } from './helper'

export default {
  name: 'CameraSelect',

  computed: {
    ...mapState([
      'activeRoom',
      'videoDevices'
    ]),
    currentVideoDevice: {
      get() {
        return this.$store.state.currentVideoDevice.id
      },
      set(value) {
        this.$store.commit('setCurrentVideoDevice', ...this.videoDevices.filter(device => device.id === value) )
      },
    }
  },

  data() {
    return {
      currentStream: undefined,
      facingMode: 'user',
      constraints: {},
    }
  },

  watch: {
    currentVideoDevice() {
      this.toggleFacingMode()
      this.setConstraints()
    }
  },

  mounted() {
    navigator.mediaDevices.ondevicechange = this.enumerateDevices
    this.enumerateDevices()
    this.setConstraints()
  },

  methods: {
    stopMediaTracks(stream) {
      stream.getTracks().forEach(track => {
        stream.removeTrack(track)
        track.stop();
      })
    },

    toggleFacingMode() {
      this.facingMode = this.facingMode === 'environment' ? 'user' : 'environment'
    },

    switcher() {
      this.$store.dispatch('toggleVideoDevice')
    },

    async setConstraints() {
      if (typeof this.currentStream !== 'undefined') {
        this.stopMediaTracks(await this.currentStream)
      }

      const videoConstraints = {}
      if (typeof await this.currentVideoDevice === 'undefined' || $.isEmptyObject(await this.currentVideoDevice)) {
        videoConstraints.facingMode = await this.facingMode
      } else {
        videoConstraints.deviceId = { exact: await this.currentVideoDevice }
      }

      this.constraints = {
        video: videoConstraints,
        audio: false,
      }
      
      const localParticipant = await this.activeRoom.localParticipant
      Video.createLocalVideoTrack(await this.constraints.video)
        .then((localVideoTrack) => {
          const tracks = Array.from(localParticipant.videoTracks.values())
          localParticipant.unpublishTracks(tracks)
          this.$store.dispatch('appendLog', `${localParticipant.identity} removed track: ${tracks[0].kind}`)
          detachTracks(tracks)

          localParticipant.publishTrack(localVideoTrack)
          this.$store.dispatch('appendLog', `${localParticipant.identity} added track: ${localVideoTrack.kind}`)
          const previewContainer = document.getElementById('local-media')
          attachTracks([localVideoTrack], previewContainer)

          this.$store.dispatch('appendLog', `${localParticipant.identity} swapped media successfully`)
        })
        .catch((error) => {
          this.$store.dispatch('setErrorMessage', { name: error.name, message: error.message })
        })
    },

    enumerateDevices() {
      navigator.mediaDevices.enumerateDevices()
        .then(mediaDevices => {
          this.$store.dispatch('clearVideoDevices')
          const videoDevices = []
          mediaDevices.forEach(mediaDevice => {
            if (mediaDevice.kind === 'videoinput') {
              videoDevices.push({
                name: mediaDevice.label,
                id: mediaDevice.deviceId,
              })
            }
          })
          return this.$store.dispatch('setVideoDevices', videoDevices)
        })
        .catch(error => {
          this.$store.dispatch('setErrorMessage', { name: error.name, message: error.message })
        })
    },
  }
}
</script>

export const attachTracks = (tracks, container) => {
  tracks.forEach(function (track) {
    container.appendChild(track.attach())
  })
}

export const detachTracks = (tracks) => {
  tracks.forEach((track) => {
    track.detach().forEach((detachedElement) => {
      detachedElement.remove()
    })
  })
}

NotReadableError: 
Could not start video source

Did this answer your question?