Open Codename-404 opened 10 months ago
mickel8
commented
10 months ago Hi @Codename-404, it's pretty hard to say anything basing on your log. Do you have any adblockers, vpns or anything that can impact your network configuration? Could you please share your code or try to run our jellyfish_videoroom app?
Codename-404
commented
10 months ago Hi @mickel8 ~ Thank you for your response. I can of course share my code, it was the same as the simple react demo, I was just trying out the sdks. I also tried downloading the example package and with the live dashboard. The same error. I found that, on the dashboard, when I start a new room it connects me to my_ip:5002, as soon as it does that it starts showing error, "Error while connecting to server websocket, consider changing to secure connection." and "Cannot connect to Jellyfish server". However I can still create rooms, add peers, and the server shows the logs. But it doesn't share any tracks.
My code below,
import React, { useEffect, useState } from "react";
import {
create,
SCREEN_SHARING_MEDIA_CONSTRAINTS,
} from "@jellyfish-dev/react-client-sdk";
import VideoPlayer from "./VideoPlayer";
import axios from "axios";
import apiUrls from "@/app/utils/client/data/apiUrls";
export const {
useStatus, // Hook to check the status of the connection
useConnect, // Hook to connect to the server
useDisconnect, // Hook to disconnect from the server
JellyfishContextProvider, // Context provider
useTracks, // Hook to get the tracks from the server
useApi,
} = create();
export function LiveStreamPage({ roomId, peer_id, peer_token }) {
const [token, setToken] = useState("");
// Use the built-in hook to check the status of the connection
const status = useStatus();
const connect = useConnect();
const disconnect = useDisconnect();
const tracks = useTracks();
const webrtcApi = useApi();
function startScreenSharing() {
// Get screen sharing MediaStream
navigator.mediaDevices
.getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS)
.then((screenStream) => {
// Add local MediaStream to webrtc
screenStream
.getTracks()
.forEach((track) =>
webrtcApi.addTrack(track, screenStream, { type: "screen" })
);
});
}
const joinRoom = async () => {
console.log("coming roomId", roomId);
if (!roomId) {
console.log("roomId not valid");
return;
}
if (!peer_id && !peer_token) {
console.log("Getting peer data");
const joinRoomRes = await axios.get(`${apiUrls.joinRoom}/${roomId}`);
console.log("joinRoomRes", joinRoomRes);
const { peer_id: peerId, peer_token: peerToken } = joinRoomRes.data;
peer_id = peerId;
peer_token = peerToken;
}
if (!peer_id && !peer_token) {
console.log("peer data still not valid");
return;
}
console.log("connecting with peer data", { peer_id, peer_token });
connect({
peerMetadata: { name: "John Doe" }, // example metadata
token: peer_token,
// websocketUrl: ws://localhost:5002/socket/peer/websocket
});
};
useEffect(() => {
joinRoom();
}, []);
return (
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
<input
value={token}
onChange={(e) => setToken(() => e?.target?.value)}
placeholder="token"
/>
<div style={{ display: "flex", flexDirection: "row", gap: "8px" }}>
<button
className="w-40 h-12 bg-green-400 rounded-md cursor-pointer"
disabled={token === "" || status === "joined"} // simple check to avoid errors
onClick={() => {
connect({
peerMetadata: { name: "John Doe" }, // example metadata
token: token,
});
}}
>
Connect
</button>
<button
className="w-40 h-12 bg-green-400 rounded-md cursor-pointer"
disabled={status !== "joined"}
onClick={() => {
disconnect();
}}
>
Disconnect
</button>
<button
className="w-40 h-12 bg-green-400 rounded-md cursor-pointer"
disabled={status !== "joined"}
onClick={() => {
startScreenSharing();
}}
>
Start screen share
</button>
<span className="span-status">Status: {status}</span>
</div>
<p>total tracks {Object.values(tracks).length}</p>
<div
className="w-full grow bg-green-400"
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "center", // To align items in the center
gap: "20px",
}}
>
{Object.values(tracks).map(({ stream, trackId }) => (
<VideoPlayer key={trackId} stream={stream} /> // pass the stream to the component
))}
</div>
</div>
);
}Alright, so it seems to be an issue with how I started the docker container. I followed the documentation initially, did not work. I tried the docker-compose-dev.yaml file from jellyfish_videoroom, and now it works. I question, is it possible to change the display of hls stream through api? or it's better to change something in the jellyfish server file?
Hi, I was following your instruction but, I am always getting this error when trying to share screen. "STUN server address is incompatible." Also when I was trying to add multiple peers, it's keeps connecting, but never connects. Looking forward to hearing from you ~ Thank you ~