成功获取本地流WebRTC后视频元素没有出现
Video element didn't show up after successfully getting local stream WebRTC
目前,我正在创建一个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
组件,里面包含了渲染视频的组件,下面是我使用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);
};
这是我 return 来自 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 的新手,感谢您的帮助!
我已经弄清楚为什么视频没有显示在首位了。正因如此:
localStreamObj.stream = media;
setLocalStreamObj(localStreamObj);
我正在改变现有对象并仍然设置这个旧对象,这一定是它没有触发的原因 re-rendering。
当我尝试创建一个新对象并将其设置为状态变量时,如下所示:
const mediaStream = {
stream: media
}
setLocalStreamObj(mediaStream);
然后它按预期工作。
目前,我正在创建一个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
组件,里面包含了渲染视频的组件,下面是我使用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);
};
这是我 return 来自 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 的新手,感谢您的帮助!
我已经弄清楚为什么视频没有显示在首位了。正因如此:
localStreamObj.stream = media;
setLocalStreamObj(localStreamObj);
我正在改变现有对象并仍然设置这个旧对象,这一定是它没有触发的原因 re-rendering。
当我尝试创建一个新对象并将其设置为状态变量时,如下所示:
const mediaStream = {
stream: media
}
setLocalStreamObj(mediaStream);
然后它按预期工作。