如何在反应中显示多个视频流？

Question

我正在尝试通过将视频附加到数组并使用 .map 呈现视频来显示多个视频流。如果我使用以下方法，我会收到错误“未处理的拒绝 (TypeError)：无法设置属性 'srcObject' of null”。如何在 React 中附加和显示多个视频流？

import React, {useState, useEffect} from 'react';
import {View} from 'react-native';


function createVideo(stream){
    const localVideo = React.createRef();
    localVideo.current.srcObject = stream;
    return(
        <View>
            <video style = {{height: 100, width: 100}} ref = {localVideo} autoPlay />
        </View>
    )
}

const Test = () =>{
    const videos = [];


    navigator.mediaDevices.getUserMedia({video: true}).then(stream => {
        videos.push(createVideo(stream));
    })

    return(
        <View> 
            {
                videos.map(data => data)
            }
        </View>
    )
}

export default Test;

Answer 1

组件函数体中的任何代码都会运行每次渲染（它是渲染循环的一部分）。

未测试：

const Video = ({ stream }) => {
  const localVideo = React.createRef();

  // localVideo.current is null on first render
  // localVideo.current.srcObject = stream;

  useEffect(() => {
    // Let's update the srcObject only after the ref has been set
    // and then every time the stream prop updates
    if (localVideo.current) localVideo.current.srcObject = stream;
  }, [stream, localVideo]);

  return (
    <View>
      <video style={{ height: 100, width: 100 }} ref={localVideo} autoPlay />
    </View>
  );
};

const Test = () => {
  // This would run on every render
  // const videos = [];

  const [streams, setStreams] = useState([]);

  useEffect(() => {
    // This shouldn't run on every render either
    navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
      setStreams([...streams, stream]);
    });
  }, []);

  return (
    <View>
      {
        streams.map(s => <Video stream={s} />)
      }
    </View>
  )
}

export default Test;

如何在反应中显示多个视频流？

How to display multiple video streams in react?

video-streaming

html5-video

getusermedia

reactjs

react-native