Как исправить ошибку "Notreadableerror: could not start video source" в javascript

Эта ошибка появляется когда вы вызываете getUsermedia, обычно на мобильных телефонах. Причиной обычно является то что вы не правильно "выключаете" вашу камеру перед послеующими действиями над ней. Например у меня ошибка появлялась когда я создал функцию смены камеры с фронтальной на пользовательскую. 


Чтобы решить эту проблему вам нужно перед последующими вызовами getUserMedia "закрывать" камеру. Делается это так:

mediastream.getTracks().forEach(track => track.stop())

В переменной mediastream должен быть результат предыдущего вызова getUserMedia. После  этого вы можете запустить getUserMedia заного, с новыми параметрами которые вы хотите задать итд.

Вот как я решил эту задачу через VueJS:

<template>
  <div>
    <div>
      <button @click="rotateCamera">Rotate</button>
    </div>
    <video ref="cameraPicture" :srcObject.prop="mediastream" autoplay muted></video>
    <record-button ref="record" @start-recording="startRecording" @stop-recording="stopRecording" v-if="mediastream"/>
  </div>
</template>
<script>
import Vue from "vue";
import recordButton from "./RecordButton"
export default Vue.component('record-screen', {
  data() {
    return {
      mediastream: "",
      front: false,
    };
  },
  methods: {
    rotateCamera: function() {
      this.front = !this.front;
    },
    updateMedia: function(){
      var constraints = { audio: true, video: { facingMode: (this.front? "user" : "environment") } };
      navigator.mediaDevices.getUserMedia(constraints)
        .then((mediaStream) => {
            this.mediastream = mediaStream
            this.mediaRecorder = new MediaRecorder(mediaStream, {mimeType : 'video/webm;codecs=h264'});
            this.mediaRecorder.ondataavailable = (blob) => {
              this.$emit('setParentState', 'recorded_video', blob.data)
              this.$emit('nextStage')
            }
        })
    },
    startRecording: function(){
      this.mediaRecorder.start()
    },
    stopRecording: function(){
      this.mediaRecorder.stop()
    }
  },
  mounted(){
    this.updateMedia()
  },
  watch: {
    front: function () {
      this.mediastream.getTracks().forEach(track => track.stop());
      this.updateMedia()
    },
  }
});
</script>

Комментарии

Популярные сообщения из этого блога

DOS атака при помощи Python

Ведем телеграм канал через питон