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

【问题标题】：How to display multiple video streams in react?如何在反应中显示多个视频流？
【发布时间】：2021-04-11 18:41:53
【问题描述】：

我正在尝试通过将视频附加到数组并使用 .map 呈现视频来显示多个视频流。如果我使用以下方法，我会收到错误“未处理的拒绝（TypeError）：无法将属性'srcObject'设置为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;

【问题讨论】：

localVideo.current 被初始化为空。当您尝试在下一行取消引用时，这是一个类型错误。
我了解到，当您 createRef 时，localVideo 为空。每当我们获得新流并渲染它时，我一直在寻找一种添加视频元素的方法。我知道如何在 React 中渲染 localStream，但我无法从多个用户附加远程流并显示它。

标签： reactjs react-native video-streaming html5-video getusermedia

【解决方案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;

【讨论】：