关闭网络摄像头而不重新加载 [英] Closing webcam without reloading

问题描述

我是网络开发的初学者，我正在开发一个使用 create-react-app 构建的视频聊天应用.我正在使用 recordRTC 库从用户的网络摄像头和麦克风进行录制和流式传输.当我停止录制时，我也想关闭网络摄像头.

import React, { Component } from "react";从recordrtc"导入 RecordRTC；const captureUserMedia = 回调 =>{const params = { 音频:真，视频:真}；navigator.mediaDevices.getUserMedia(参数).then(回调).catch((错误) => {console.error(JSON.stringify(error));});};导出默认类记录器扩展组件{构造函数(道具){超级(道具)；this.recordVideo = null;this.videoRef = React.createRef();}componentDidMount = () =>{captureUserMedia(stream => (this.videoRef.current.srcObject = stream));};startRecord = () =>{捕获用户媒体(流 => {this.recordVideo = RecordRTC(stream, { type: "video" });this.recordVideo.startRecording();});};停止记录 = () =>{this.recordVideo.stopRecording();this.videoRef.current.srcObject.getTracks().forEach((track) => {track.stop();});};使成为() {返回 (<div><video ref={this.videoRef} 自动播放静音/><div><button onClick={this.startRecord}>START</button><button onClick={this.stopRecord}>STOP</button>

);}}

我在这里找到了一篇相关帖子，其中我发现了这个:

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

这会停止流，但导航器选项卡 (chrome) 上仍然存在红色圆圈，并且网络摄像头的灯仍然是闪电.

如何关闭网络摄像头?

我发现的唯一方法是强制重新加载，但我真的不想这样做......

如果有人有想法，请告诉我.

感谢您的回复:)

解决方案

我发现我做错了什么！

我调用了两次 getUserMedia() 方法，而不是一次(使用 captureUserMedia 函数).

你可以试试下面的代码就可以了！！！

<代码>...componentDidMount = () =>{captureUserMedia((stream) => {this.videoRef.current.srcObject = 流；this.recordVideo = RecordRTC(stream, { type: "video" });});};startRecord = () =>{this.recordVideo.startRecording();};停止记录 = () =>{this.recordVideo.stopRecording();this.videoRef.current.srcObject.getTracks().forEach((track) => {track.stop();});};...

I'm a a beginner in web development and I’m working on a video chat app built with create-react-app. I’m using recordRTC library for record and stream from users’s webcam and microphone. When I stop recording, I also would like to close the webcam.

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>
    );
  }
}

I found here a related post where I found this:

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

This stop the stream but the red circle is still present on the navigator tab (chrome) and the webcam's light is still lightning.

How can I do to turn off the webcam ?

The only way i found is to force a reload but I don't really wanna do this ...

If someone have an idea, please let me know.

Thanks for your reply :)

解决方案

I found what I did wrong !

I called two times getUserMedia() method instead of one only (with captureUserMedia function).

You can try with the code below it will be ok !!!

...

  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();
    });
  };

...

这篇关于关闭网络摄像头而不重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！