成功获取本地流 WebRTC 后，视频元素未显示

Question

目前，我正在创建一个P2P视频通话应用程序。我希望当我点击打开我的相机时，相机会被打开，媒体流会被馈送到我的视频标签中。这是代码，文件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组件，它包含用于渲染视频的组件，这里是我使用的获取用户媒体的部分：

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获得流并将其渲染到视频标签：

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"
/>)

当我打开相机时，网络摄像头启动了，但我仍然看不到显示的视频元素。据我所知，当我获得本地流，然后设置状态变量localStreamObj时，应该重新渲染组件，但不会。此外，当我试图在页面加载后立即获取userMedia时，视频元素就会显示出来。我不知道为什么，因为我是React的新手，谢谢你的帮助！

Answer 1

我已经弄清楚了为什么视频一开始就没有显示。正因为如此：

localStreamObj.stream = media;
setLocalStreamObj(localStreamObj);

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

当我尝试创建一个新对象并将其设置为状态变量时，如下所示：

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

然后它按预期工作。