成功获取本地 stream WebRTC 后视频元素没有出现

Question

目前，我正在创建一个 P2P 视频通话应用程序。 我希望当我点击打开我的相机时，相机将被打开，媒体 stream 将被提供给我的视频标签。 这是代码，文件index.jsx ，为简洁起见，一些代码被禁止：

const ForwardRefConference = forwardRef(Conference);
const [localAudioEnabled, setLocalAudioEnabled] = useState(false);
const [localVideoEnabled, setLocalVideoEnabled] = useState(false);
let settings = {
    selectedAudioDevice: "",
    selectedVideoDevice: "",
    resolution: "vga",
    bandwidth: 512,
    codec: "vp8",
    isDevMode: false,
    audio: localAudioEnabled,
    video: localVideoEnabled
};
const startPublishingVideo = (sid, uid) => {
    settings.video = true;
    setLocalVideoEnabled(true);
    conference.current.handleLocalStream();
}

return (
 <div>
 <button
                      className={style.btn_function}
                      onClick={startPublishingVideo}
                    />
{<ForwardRefConference
                    uid={uid}
                    sid={sid}
                    rtc={rtc}
                    peers={peers}
                    vidFit={vidFit}
                    settings={settings}
                    localAudioEnabled={localAudioEnabled}
                    localVideoEnabled={localVideoEnabled}
                    ref={conference}
                  />}</div>)

这里是Conference组件，其中包含渲染视频的组件，这里是我使用 get user media 的部分：

const dohandleLocalStream = async () => {
    const { settings, rtc } = props;
    Ion.LocalStream.getUserMedia({
        codec: settings.codec.toUpperCase(),
        resolution: settings.resolution,
        bandwidth: settings.bandwidth,
        // audio: settings.audio,
        // video: settings.video,
        audio: true,
        video: true
      })
        .then((media) => {
          console.log("rtc.publish media=", media);
          rtc.publish(media);
          localStreamObj.stream = media;
          setLocalStreamObj(localStreamObj);
          console.log(
            "got local stream from " + JSON.stringify(localStreamObj.stream)
          );
        })
        .catch((e) => console.log("handleLocalStream error => " + e));

    doMuteMediaTrack("video", props.localVideoEnabled);
};

这是我从Conference返回的内容：

return ({localStreamObj.stream && (
        <div className="conference-local-video-layout">
          <LocalVideoView
            key={id + " -video"}
            id={id + "-video"}
            label="Local Stream"
            stream={localStreamObj.stream}
            audioMuted={audioMuted}
            videoMuted={videoMuted}
            videoType="localVideo"
            controls
          />
        </div>
)})

这是LocalVideoView ，它将从Conference中获取 stream 并将其渲染到视频标签：

    const videoRef = useRef(null);
    useEffect(() => {
        videoRef.current.srcObject = props.stream;
        console.log('current video stream: ' + JSON.stringify(props.stream));
        return () => {
            if (videoRef.current) {
                videoRef.current.srcObject = null;
            }
        }
    }, []   )

    const {id, label, audioMuted, videoMuted, videoType} = props;

    

    return (
        <div className="local-video-container" style={{borderWidth: `${minimize ? '0px' : '0.5px'}`}}>
            <video
                ref={videoRef} 
                id={id}
                autoPlay
                playsInline
                muted={true}
                className="local-video-size"
            />)

当我打开相机时，网络摄像头已启动，但我仍然看不到显示的视频元素。 据我所知，当我得到本地 stream 然后我设置 state 变量localStreamObj然后组件应该重新渲染，但它不会。 而且当我尝试在页面加载后立即获取 userMedia 时，然后显示视频元素。 我不知道为什么，因为我是 React 新手，感谢您的帮助！

Answer 1

我已经弄清楚为什么视频没有首先显示。 因为这：

localStreamObj.stream = media;
setLocalStreamObj(localStreamObj);

我正在改变现有的 object 并仍然设置这个旧的 object ，这一定是它没有触发重新渲染的原因。

当我尝试创建一个新的 object 并将其设置为 state 变量时，如下所示：

const mediaStream = {
   stream: media
}
setLocalStreamObj(mediaStream);

然后它按预期工作。