Question

我有一个基本的react组件，我正在尝试访问navigator.mediaDevices.getUserMedia中的视频。但是，我不断收到“无法将属性'srcObject'设置为null”

import React, {Component} from 'react';

export default class Example extends Component{
    render(){

    const video = document.querySelector('video');
    const constraints = {video:true}
    navigator.mediaDevices.getUserMedia(constraints).then(

        (stream) => {video.srcObject = stream})

        return(
        <div>
            <video>

            </video>
        </div>
        )
    }
}

以上返回：

无法将属性'srcObject'设置为空

有什么想法吗？

Answer 1

这是从网络摄像头流式传输视频的一种React方法。

class Example extends 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 
        ref={this.videoTag}
        autoPlay
      />
    )
  }
}

Answer 2

视频对象为null，因为在渲染方法中，您首先通过querySelector选择了该对象，但视频组件尚未渲染，因此此dom节点不存在并返回null。

您应该使用componentDidMount生命周期方法来确保dom对象或组件已安装，然后选择dom节点。同时，我建议您在react的选择dom节点中使用React ref而不是纯javascrip dom选择器方法。

import React, { Component } from 'react';

export default class Example extends Component {
  constructor() {
    super();
    this.videoRef = React.createRef();
  }

  componentDidMount() {
    const video = this.videoRef.current;
    const constraints = { video: true }
    navigator.mediaDevices.getUserMedia(constraints).then(
      (stream) => { video.srcObject = stream })
  }
  render() {
    return (
      <div>
        <video autoPlay={true} ref={this.videoRef} />
      </div>
    )
  }
}

html5 getUserMedia无法将属性'srcObject'设置为空

2 个答案: