Delete index.tsx
This commit is contained in:
talksik
@@ -1,241 +0,0 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { $maxNumberActiveStreams } from "../../controller/recoil";
|
|
||||||
import { $numberActiveLines } from "../../controller/recoil";
|
|
||||||
import GetAllSocketClients from "@nirvana/core/sockets/getAllActiveSocketClients";
|
|
||||||
import { OVERLAY_ONLY_INITIAL_PRESET } from "../../electron/constants";
|
|
||||||
import Peer from "simple-peer";
|
|
||||||
import ReceiveSignal from "@nirvana/core/sockets/receiveSignal";
|
|
||||||
import SendSignal from "@nirvana/core/sockets/sendSignal";
|
|
||||||
import SocketChannels from "@nirvana/core/sockets/channels";
|
|
||||||
import toast from "react-hot-toast";
|
|
||||||
import { useRecoilState } from "recoil";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @returns a video component with the stream of the peer provided
|
|
||||||
* @param peer : Peer connection that is established
|
|
||||||
*/
|
|
||||||
function Video({ peer }: { peer: Peer }) {
|
|
||||||
const videoRef = useRef<HTMLVideoElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
peer.on("stream", (remoteStream: MediaStream) => {
|
|
||||||
console.log("stream coming in, adding video src object");
|
|
||||||
|
|
||||||
if (videoRef?.current) videoRef.current.srcObject = remoteStream;
|
|
||||||
|
|
||||||
// check if other user muted
|
|
||||||
setInterval(() => {
|
|
||||||
const videoAvailabe = remoteStream
|
|
||||||
.getVideoTracks()
|
|
||||||
.find((track) => track.enabled);
|
|
||||||
|
|
||||||
if (!videoAvailabe) console.log("someone muted!!! ooo");
|
|
||||||
}, 2000);
|
|
||||||
});
|
|
||||||
|
|
||||||
peer.on("close", () => {
|
|
||||||
console.log("remote user closed mediaconnection");
|
|
||||||
videoRef.current.height = 0;
|
|
||||||
});
|
|
||||||
}, [videoRef]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<video ref={videoRef} controls height={"200"} width="250" autoPlay muted />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Overlay() {
|
|
||||||
/** how many lines have someone broadcasting in them */
|
|
||||||
const [numActiveLines, setNumActiveLines] =
|
|
||||||
useRecoilState($numberActiveLines);
|
|
||||||
const [maxNumActiveStreams, setMaxNumActiveStreams] = useRecoilState(
|
|
||||||
$maxNumberActiveStreams
|
|
||||||
);
|
|
||||||
|
|
||||||
// all of the peer connections to all people this client is connecting to
|
|
||||||
const [localPeerConnections, setLocalPeerConnections] = useState<Peer[]>([]);
|
|
||||||
|
|
||||||
const peersRefs = useRef<{ peer: Peer; socketUserId: string }[]>([]);
|
|
||||||
|
|
||||||
const localVideoRef = useRef<HTMLVideoElement>(null);
|
|
||||||
|
|
||||||
const [localUserVideoStream, setLocalUserVideoStream] =
|
|
||||||
useState<MediaStream>(null);
|
|
||||||
|
|
||||||
// initially, have these set to default
|
|
||||||
// useEffect(() => {
|
|
||||||
// // POC: nirvana all connected users call
|
|
||||||
// // send signal to all peers through ws
|
|
||||||
|
|
||||||
// // I join x room
|
|
||||||
|
|
||||||
// // I need to do the work of sending my signal to all others in the room
|
|
||||||
// // -> I create a local peer object for my connection to all other people in the room
|
|
||||||
// // -> entails me sending my signal data to all other users...
|
|
||||||
|
|
||||||
// // the other users will get pinged with my signal data
|
|
||||||
// // -> now they have to take that signal data for new x user
|
|
||||||
// // and create their local peer object sending their stream to it
|
|
||||||
// // and accept/answer the signal after creating this local peer connection between them and the newbie user
|
|
||||||
// // send back their signal now so that the initiator can get it and accept it
|
|
||||||
|
|
||||||
// console.log("socket id", socket.id);
|
|
||||||
|
|
||||||
// navigator.mediaDevices
|
|
||||||
// .getUserMedia({ video: false, audio: true })
|
|
||||||
// .then((localStream: MediaStream) => {
|
|
||||||
// setLocalUserVideoStream(localStream);
|
|
||||||
|
|
||||||
// // show user video
|
|
||||||
// if (localVideoRef?.current)
|
|
||||||
// localVideoRef.current.srcObject = localStream;
|
|
||||||
|
|
||||||
// socket.emit(SocketChannels.JOIN_LIVE_ROOM);
|
|
||||||
|
|
||||||
// would already have all of the tuned in sockets in array
|
|
||||||
// then create a peer for each...tell others to create also because they would have received
|
|
||||||
// "SOMEONE_TUNED_INTO_LINE"
|
|
||||||
|
|
||||||
// need a peer connection with every userId in the list of tunedInFolks so that when it comes time to broadcast
|
|
||||||
// it's super simple in that we just start playing the stream from the appropriate peer who is associated with the correct userId
|
|
||||||
// small validation to consider is that the broadcasterUserIds are in the list of tunedInUserIds
|
|
||||||
|
|
||||||
// socket.on(
|
|
||||||
// SocketChannels.GET_ALL_ACTIVE_SOCKET_IDS,
|
|
||||||
// (data: GetAllSocketClients) => {
|
|
||||||
// console.log("all socket client connections", data);
|
|
||||||
|
|
||||||
// const peers = [];
|
|
||||||
// data?.socketIds.map((userSocketId) => {
|
|
||||||
// if (userSocketId === socket.id) return;
|
|
||||||
|
|
||||||
// // need one for each user I want to connect to
|
|
||||||
// var localPeerInitiator = new Peer({
|
|
||||||
// initiator: true,
|
|
||||||
// stream: localStream,
|
|
||||||
// trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
|
|
||||||
// });
|
|
||||||
|
|
||||||
// localPeerInitiator.on("signal", (signal) => {
|
|
||||||
// console.log(
|
|
||||||
// "created local initiator peer and sending signal to: ",
|
|
||||||
// userSocketId
|
|
||||||
// );
|
|
||||||
|
|
||||||
// // send the local peer-peer signal to other users
|
|
||||||
// socket.emit(SocketChannels.SEND_SIGNAL, {
|
|
||||||
// userSocketIdToSignal: userSocketId,
|
|
||||||
// simplePeerSignal: signal,
|
|
||||||
// isAnswerer: false,
|
|
||||||
// } as SendSignal);
|
|
||||||
// });
|
|
||||||
|
|
||||||
// peersRefs.current.push({
|
|
||||||
// peer: localPeerInitiator,
|
|
||||||
// socketUserId: userSocketId,
|
|
||||||
// });
|
|
||||||
|
|
||||||
// peers.push(localPeerInitiator);
|
|
||||||
// });
|
|
||||||
|
|
||||||
// setLocalPeerConnections(peers);
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
|
|
||||||
// // incoming calls, accept them and send back
|
|
||||||
// // hits this when I am sending and receiving
|
|
||||||
// socket.on(SocketChannels.RECEIVE_SIGNAL, (payload: ReceiveSignal) => {
|
|
||||||
// if (payload.isGoingBackToInitiator) {
|
|
||||||
// // from the list of peers here locally, we want to accept the answers signal
|
|
||||||
// const localPeerRefToAnswerer = peersRefs.current.find(
|
|
||||||
// (peerRef) => peerRef.socketUserId === payload.senderUserSocketId
|
|
||||||
// );
|
|
||||||
|
|
||||||
// console.log(
|
|
||||||
// "got back answerers signal, going to signal the right peer now: ",
|
|
||||||
// localPeerRefToAnswerer
|
|
||||||
// );
|
|
||||||
|
|
||||||
// localPeerRefToAnswerer.peer.signal(payload.simplePeerSignal);
|
|
||||||
// } else {
|
|
||||||
// console.log("ooo newbie joined room, I guess I will accept it ");
|
|
||||||
|
|
||||||
// // if we are answering a received signal
|
|
||||||
// var peerToCallerPeer = new Peer({
|
|
||||||
// initiator: false,
|
|
||||||
// trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
|
|
||||||
// stream: localStream,
|
|
||||||
// });
|
|
||||||
|
|
||||||
// peerToCallerPeer.on("signal", (signal) => {
|
|
||||||
// console.log(
|
|
||||||
// "as the answerer, I am going to send back my signal so that the newbie can update his local peer for me"
|
|
||||||
// );
|
|
||||||
// socket.emit(SocketChannels.SEND_SIGNAL, {
|
|
||||||
// userSocketIdToSignal: payload.senderUserSocketId,
|
|
||||||
// simplePeerSignal: signal,
|
|
||||||
// isAnswerer: true,
|
|
||||||
// } as SendSignal);
|
|
||||||
// });
|
|
||||||
|
|
||||||
// peerToCallerPeer.signal(payload.simplePeerSignal);
|
|
||||||
|
|
||||||
// peersRefs.current.push({
|
|
||||||
// peer: peerToCallerPeer,
|
|
||||||
// socketUserId: payload.senderUserSocketId,
|
|
||||||
// });
|
|
||||||
|
|
||||||
// setLocalPeerConnections((prevPeers) => [
|
|
||||||
// ...prevPeers,
|
|
||||||
// peerToCallerPeer,
|
|
||||||
// ]);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// })
|
|
||||||
// .catch((err: Error) => {
|
|
||||||
// console.error(err);
|
|
||||||
// toast.error(err.message);
|
|
||||||
// });
|
|
||||||
// }, []);
|
|
||||||
|
|
||||||
// TODO: get all of the toggle tuned in lines and any line that I am toggle broadcasting to
|
|
||||||
// loop through and send lineId to the x child stream overlay components who will do the work
|
|
||||||
|
|
||||||
const addActiveLine = () => {
|
|
||||||
setNumActiveLines((prevNum) => prevNum + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addAnotherStream = () => {
|
|
||||||
setMaxNumActiveStreams((prevNum) => prevNum + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
// handle shortcut to enable this stream if this video component is selected
|
|
||||||
const toggleMyStreamOnOrOff = useCallback(() => {
|
|
||||||
localUserVideoStream
|
|
||||||
.getTracks()
|
|
||||||
.forEach((track) => (track.enabled = !track.enabled));
|
|
||||||
}, [localUserVideoStream]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col max-w-sm">
|
|
||||||
{/* {[...Array(maxNumActiveStreams)].map((_n) => (
|
|
||||||
<img
|
|
||||||
className="w-fit"
|
|
||||||
src="https://miro.medium.com/max/1200/1*hONz6Wttkst4FUp_0hwQJQ.png"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<button onClick={addActiveLine}>add column</button>
|
|
||||||
<button onClick={addAnotherStream}>add row</button> */}
|
|
||||||
|
|
||||||
<video muted id="userLocalVideo" ref={localVideoRef} controls autoPlay />
|
|
||||||
|
|
||||||
<button onClick={toggleMyStreamOnOrOff}>Toggle My Stream</button>
|
|
||||||
|
|
||||||
{localPeerConnections.map((peer) => (
|
|
||||||
<Video peer={peer} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user