如何解决在 React App 中连接 Agora 时出现错误 502 Bad Gateway
我正在 React 中为客户端创建视频通话应用程序。要求仅将 Agora SDK 用于直播和视频通话。出于演示和测试目的,从某个来源获取了示例代码,后来使用我自己创建的 App_ID 并申请连接,但意外无法运行。将 React 应用程序连接到 Agora SDK 的更好解决方案是什么?如果有,请提供相同的来源。
以下是代码供参考
const [joined,setJoined] = useState(false);
const channelRef = useRef("");
const remoteRef = useRef("");
const leaveRef = useRef("");
const loadCert = async () => {
// create a certificate authority
const ca = await mkcert.createCA({
organization: 'Hello CA',countryCode: 'NP',state: 'Bagmati',locality: 'Kathmandu',validityDays: 365
});
// then create a tls certificate
const cert = await mkcert.createCert({
domains: ['127.0.0.1','localhost'],validityDays: 365,caKey: ca.key,caCert: ca.cert
});
console.log(cert.key,cert.cert); // certificate info
console.log(`${cert.cert}\n${ca.cert}`); // create a full chain certificate by merging CA and domain certificates
}
async function handleSubmit(e) {
try {
if (channelRef.current.value === "") {
return console.log("Please Enter Channel Name");
}
setJoined(true);
rtc.client = AgoraRTC.createClient({ mode: "rtc",codec: "h264" });
const uid = await rtc.client.join(
options.appId,channelRef.current.value,options.token || null,null
);
// Create an audio track from the audio captured by a microphone
rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
// Create a video track from the video captured by a camera
rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
// Play localStream
rtc.localVideoTrack.play("local-stream");
rtc.client.on("user-published",async (user,mediaType) => {
// Subscribe to a remote user
await rtc.client.subscribe(user);
console.log("subscribe success");
// console.log(user);
if (mediaType === "video" || mediaType === "all") {
// Get `RemoteVideoTrack` in the `user` object.
const remoteVideoTrack = user.videoTrack;
console.log(remoteVideoTrack);
// Dynamically create a container in the form of a DIV element for playing the remote video track.
const PlayerContainer = React.createElement("div",{
id: user.uid,className: "stream",});
ReactDOM.render(
PlayerContainer,document.getElementById("remote-stream")
);
user.videoTrack.play(`${user.uid}`);
}
if (mediaType === "audio" || mediaType === "all") {
// Get `RemoteAudioTrack` in the `user` object.
const remoteAudioTrack = user.audioTrack;
// Play the audio track. Do not need to pass any DOM element
remoteAudioTrack.play();
}
});
rtc.client.on("user-unpublished",async (user) => {
// Get the dynamically created DIV container
const playerContainer = document.getElementById(user.uid);
console.log(playerContainer);
await rtc.client.publish([rtc.localAudioTrack,rtc.localVideoTrack]);
console.log('[publish success');
});
}
catch (err) {
console.error(err)
}
}
async function handleLeave() {
try {
const localContainer = document.getElementById("local-stream");
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
setJoined(false);
localContainer.textContent = "";
// Traverse all remote users
rtc.client.remoteUsers.forEach((user) => {
// Destroy the dynamically created DIV container
const playerContainer = document.getElementById(user.uid);
playerContainer && playerContainer.remove();
});
// Leave the channel
await rtc.client.leave();
} catch (err) {
console.error(err);
}
}
useEffect(() => {
loadCert()
},[])
return (
<div>
<div className="container">
<input
type="text"
ref={channelRef}
id="channel"
placeholder="Enter Channel name"
/>
<input
type="submit"
value="Join"
onClick={handleSubmit}
disabled={joined ? true : false}
/>
<input
type="button"
ref={leaveRef}
value="Leave"
onClick={handleLeave}
disabled={joined ? false : true}
/>
</div>
{joined ? (
<>
<div id="local-stream" className="stream local-stream"></div>
<div
id="remote-stream"
ref={remoteRef}
className="stream remote-stream"
></div>
</>
) : null}
</div>
);
};
要进行哪些更改才能有效地运行应用程序
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。