Закрытие веб-камеры без перезагрузки - PullRequest
Новая
       18

Закрытие веб-камеры без перезагрузки

0 голосов
/ 20 октября 2018

Я новичок в веб-разработке и работаю над приложением для видеочата, созданным с create-react-app.Я использую библиотеку recordRTC для записи и трансляции с веб-камеры и микрофона пользователя.Когда я прекращаю запись, я также хотел бы закрыть веб-камеру. 

import React, { Component } from "react";
import RecordRTC from "recordrtc";

const captureUserMedia = callback => {
  const params = { audio: true, video: true };
  navigator.mediaDevices
    .getUserMedia(params)
    .then(callback)
    .catch((error) => {
      console.error(JSON.stringify(error));
    });
};

export default class Recorder extends Component {
  constructor(props) {
    super(props);
    this.recordVideo = null;
    this.videoRef = React.createRef();
  }

  componentDidMount = () => {
    captureUserMedia(stream => (this.videoRef.current.srcObject = stream));
  };

  startRecord = () => {
    captureUserMedia(stream => {
      this.recordVideo = RecordRTC(stream, { type: "video" });
      this.recordVideo.startRecording();
    });
  };

  stopRecord = () => {
    this.recordVideo.stopRecording();
    this.videoRef.current.srcObject.getTracks().forEach((track) => {
      track.stop();
    });
  };
    render() {
    return (
      <div>
        <video ref={this.videoRef} autoPlay muted />
        <div>
          <button onClick={this.startRecord}>START</button>
          <button onClick={this.stopRecord}>STOP</button>
        </div>
      </div>
    );
  }
}

Я нашел здесь соответствующий пост, где я нашел это: 

stream.getTracks().forEach((track) => {
    track.stop()
})

Этоостановите поток, но красный кружок все еще присутствует на вкладке навигатора (хром), а индикатор веб-камеры продолжает гореть.

Как я могу отключить веб-камеру?

Единственный способ, который я нашел, - принудительно перезагрузить компьютер, но я не хочу этого делать ...

Если у кого-то есть идея, пожалуйста, дайте мне знать.

Спасибо за ваш ответ:)

1 Ответ

0 голосов
/ 24 октября 2018

Я обнаружил, что сделал не так!

Я дважды вызывал getUserMedia() метод вместо одного только (с функцией captureUserMedia).

Вы можете попробовать с приведенным ниже кодом, он будеток !!! 

...

  componentDidMount = () => {
    captureUserMedia((stream) => {
      this.videoRef.current.srcObject = stream;
      this.recordVideo = RecordRTC(stream, { type: "video" });
    });
  };

  startRecord = () => {
      this.recordVideo.startRecording();
  };

  stopRecord = () => {
    this.recordVideo.stopRecording();
    this.videoRef.current.srcObject.getTracks().forEach((track) => {
      track.stop();
    });
  };

...
...