React - 无法从网络摄像头流式传输视频

Question

我正在尝试修复我的组件以从网络摄像头流式传输数据。它成功呈现并成功访问网络摄像头。但我不知道为什么视频标签不播放任何内容。如何解决这个问题？我错过了什么？

export class WebcamStream extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            src: null
        }
        this.videoRef = React.createRef()
    }

    componentDidMount() {
        // getting access to webcam
        navigator.mediaDevices
            .getUserMedia({video: true})
            .then(stream => this.setState({src: stream}))
            .catch(console.log);
    }

    render() {
        return <video id={this.props.id}
                      ref={() => this.videoRef.srcObject = this.state.src}
                      width={this.props.width}
                      height={this.props.height}
                      autoPlay="autoplay"
                      title={this.props.title}></video>
    }
}

Answer 1

ref 未在该行中正确使用：

ref={() => this.videoRef.srcObject = this.state.src}

在您的代码中，只是将 src 设置为未初始化的 videoRef，因此它永远不会到达视频标签。

你可以试试：

ref={this.videoRef.srcObject}

并且在 componentDidMount:

.then(stream => {this.videoRef.srcObject = stream})

或者简单地说：

ref={(e) => e.srcObject = this.state.src}

Answer 2

嗯，我发现哪里不对了。根据 docs 我需要使用 current 属性来使节点可访问。因此，我的网络摄像头组件的完整工作示例：

export class WebcamStream extends React.Component {
    constructor(props) {
        super(props);
        this.videoTag = React.createRef()
    }

    componentDidMount() {
        // getting access to webcam
       navigator.mediaDevices
            .getUserMedia({video: true})
            .then(stream => this.videoTag.current.srcObject = stream)
            .catch(console.log);
    }

    render() {
        return <video id={this.props.id}
                      ref={this.videoTag}
                      width={this.props.width}
                      height={this.props.height}
                      autoPlay
                      title={this.props.title}></video>
    }
}

this.setState 在直接从 promise 更改 srcObject 之前被删除，但我不确定这是否是 React 方式。也许，更正确的做法是将 this.videoTag.current.srcObject = stream 代码移动为 setState 回调？

Answer 3

我在使用上面相同的代码时也遇到了同样的错误，它显示“_this2.video 未定义；无法访问它的 "current" 属性”，一切正常，获得视频许可，但它没有在我的页面中显示视频。

Answer 4

对我有用的组件如下

import React, { useState, useEffect } from 'react';

export default function ModalVideo(props) { 
    const [video,]=useState(React.createRef());

    const videoError=(error)=>{
        console.log("error",error);
    }

    const handleVideo=(stream)=>{
        video.current.srcObject = stream;
    }

    useEffect(() => {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
        if (navigator.getUserMedia) {
            navigator.getUserMedia({video: true}, handleVideo, videoError);
        }
    });

    return (
        <div>
            <video ref={video}  autoPlay={true} />
        </div>
    )
}

React - 无法从网络摄像头流式传输视频

React - can't stream video from webcam

reactjs

html5-video

webcam