Реагировать - не удается потоковое видео с веб-камеры

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

Ну, я нашел, что было не так.Согласно 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 был удален до прямого srcObject изменения от обещания, но я не уверен, что это способ React.Может быть, более правильно перемещается код this.videoTag.current.srcObject = stream как обратный вызов setState?

Answer 2

Я также сталкиваюсь с той же ошибкой, когда использую тот же самый код, который он показывает "_this2.video не определено; не может получить доступ к его" текущему "свойству" и все правильно, примите разрешение vedio, но оно не показывает vedio в моя страница.

Answer 3

ref неправильно используется в этой строке:

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

Как и в вашем коде, просто установите src на videoRef, который не инициализирован, поэтому он никогда не попадет в тег видео.

Вы можете попробовать:

ref={this.videoRef.srcObject}

А в компоненте DidMount:

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

Или просто:

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