I am using agora-react-ui-kit on the web and other user is joining from the flutter app. Agent from flutter app is able to see both the videos of his device, meanwhile I am only able to see my own video on web.
My VideoCall component looks like this-
import React, { useEffect, useState } from "react";
import AgoraUIKit, { layout, VideoRenderMode } from "agora-react-uikit";
import { useRouter } from "next/router";
import 'agora-react-uikit/dist/index.css'
I am using agora-react-ui-kit on the web and other user is joining from the flutter app. Agent from flutter app is able to see both the videos of his device, meanwhile I am only able to see my own video on web.
My VideoCall component looks like this-
import React, { useEffect, useState } from "react"; import AgoraUIKit, { layout, VideoRenderMode } from "agora-react-uikit"; import { useRouter } from "next/router"; import 'agora-react-uikit/dist/index.css'
const Videcall = () => { const [videocall, setVideocall] = useState(true); const [isHost, setHost] = useState(true); const [isPinned, setPinned] = useState(false); const [username, setUsername] = useState(""); const [RTCDetalis, setRtcDetails] = useState({});
useEffect(() => { setRtcDetails(JSON.parse(sessionStorage.getItem("RTCAgoraDetails"))); }, []);
const router = useRouter(); return (
setVideocall(true)}> Start Call
); };
const styles = { container: { width: "100vw", height: "92vh", display: "flex", flex: 1, backgroundColor: "#007bff22", }, videoContainer: { display: "flex", flexDirection: 'column', flex: 1 }, btn: { backgroundColor: "#007bff", cursor: "pointer", borderRadius: 5, padding: "4px 8px", color: "#ffffff", fontSize: 20, }, };
export default Videcall;