Reactjs Agora RTC与React问题
我第一次使用Agora,在添加远程流时遇到了一个问题。当第一个用户加入一个频道时,它会正确地显示它的流,但当另一个用户加入同一频道时,第二个用户的流会出现在第一个用户的屏幕上,但第一个用户的流不会出现在第二个用户流上。i、 e.用户只能看到在其之后加入的人流,而不能看到在其之前加入的人流。下面是代码Reactjs Agora RTC与React问题,reactjs,agora.io,agora-web-sdk-ng,Reactjs,Agora.io,Agora Web Sdk Ng,我第一次使用Agora,在添加远程流时遇到了一个问题。当第一个用户加入一个频道时,它会正确地显示它的流,但当另一个用户加入同一频道时,第二个用户的流会出现在第一个用户的屏幕上,但第一个用户的流不会出现在第二个用户流上。i、 e.用户只能看到在其之后加入的人流,而不能看到在其之前加入的人流。下面是代码 import React, { useEffect, useState, useRef } from "react"; import ReactDOM from "re
import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";
import "./App.css";
import { options, rtc } from "./constants";
import AgoraRTC from "agora-rtc-sdk-ng";
function App() {
const RemoteUser = [];
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
);
// 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();
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", (user) => {
// Get the dynamically created DIV container
const playerContainer = document.getElementById(user.uid);
console.log(playerContainer);
// Destroy the container
playerContainer.remove();
});
// Publish the local audio and video tracks to the channel
await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
console.log("publish success!");
} catch (error) {
console.error(error);
}
}
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);
}
}
const [joined, setJoined] = useState(false);
const channelRef = useRef("");
const remoteRef = useRef("");
const leaveRef = useRef("");
return (
<>
<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}
</>
);
}
export default App;
import React,{useffect,useState,useRef}来自“React”;
从“react dom”导入react dom;
导入“/App.css”;
从“/constants”导入{options,rtc};
从“agora rtc sdk ng”导入AgoraRTC;
函数App(){
常量RemoteUser=[];
异步函数handleSubmit(e){
试一试{
如果(channelRef.current.value==“”){
返回console.log(“请输入频道名称”);
}
setJoined(true);
rtc.client=AgoraRTC.createClient({模式:“rtc”,编解码器:“h264”});
const uid=wait rtc.client.join(
options.appId,
channelRef.current.value,
options.token,
无效的
);
//从麦克风捕获的音频创建音频曲目
rtc.localAudioTrack=等待AgoraRTC.createMicrophoneAudioTrack();
//从摄像机捕获的视频创建视频轨迹
rtc.localVideoTrack=等待AgoraRTC.createCameraVideoTrack();
rtc.localVideoTrack.play(“本地流”);
rtc.client.on(“用户已发布”,异步(用户,媒体类型)=>{
//订阅远程用户
等待rtc.client.subscribe(用户);
console.log(“订阅成功”);
//console.log(用户);
如果(mediaType==“视频”| | mediaType==“全部”){
//在“用户”对象中获取“RemoteVideoTrack”。
const remoteVideoTrack=user.videoTrack;
控制台日志(远程视频跟踪);
//以DIV元素的形式动态创建一个容器,用于播放远程视频曲目。
const PlayerContainer=React.createElement(“div”{
id:user.uid,
类名:“流”,
});
ReactDOM.render(
玩家容器,
document.getElementById(“远程流”)
);
user.videoTrack.play(`${user.uid}`);
}
如果(mediaType==“音频”| | mediaType==“全部”){
//在“用户”对象中获取“RemoteAudioTrack”。
const remoteAudioTrack=user.audioTrack;
//播放音频曲目。不需要传递任何DOM元素
remoteAudioTrack.play();
}
});
rtc.client.on(“用户未发布”,(用户)=>{
//获取动态创建的DIV容器
const playerContainer=document.getElementById(user.uid);
console.log(playerContainer);
//销毁容器
playerContainer.remove();
});
//将本地音频和视频曲目发布到频道
等待rtc.client.publish([rtc.localAudioTrack,rtc.localVideoTrack]);
log(“发布成功!”);
}捕获(错误){
控制台错误(error);
}
}
异步函数handleLeave(){
试一试{
const localContainer=document.getElementById(“本地流”);
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
设置连接(假);
localContainer.textContent=“”;
//遍历所有远程用户
rtc.client.remoteUsers.forEach((用户)=>{
//销毁动态创建的DIV容器
const playerContainer=document.getElementById(user.uid);
playerContainer&&playerContainer.remove();
});
//离开频道
等待rtc.client.leave();
}捕捉(错误){
控制台错误(err);
}
}
const[joined,setJoined]=useState(false);
const channelRef=useRef(“”);
const remoteRef=useRef(“”);
const leaveRef=useRef(“”);
返回(
{加入(
):null}
);
}
导出默认应用程序;
在函数handleSubmit之外创建RTCLIENT
当文档/页面准备就绪时,也要注册事件
rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });
rtc.client.on("user-published", async (user, mediaType) => {
//Your code
}
rtc.client.on("user-unpublished", (user) => {
//Your code
}
它将准确显示用户列表。在函数handleSubmit之外创建rtcClient 当文档/页面准备就绪时,也要注册事件
rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });
rtc.client.on("user-published", async (user, mediaType) => {
//Your code
}
rtc.client.on("user-unpublished", (user) => {
//Your code
}
它将准确显示用户列表。您是否尝试添加“订阅流”侦听器?@Ankit,您找到解决方案了吗?我面临着类似的问题。请帮帮我!您尝试添加“订阅流”侦听器了吗?@Ankit,您找到解决方案了吗?我面临着类似的问题。请帮帮我!