talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

another approach trying to get order right

Browse Source
This commit is contained in:
talksik
2022-04-28 16:00:33 -05:00
parent 4c4e49dc71
commit f68b551a43
3 changed files with 63 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+1 -1
View File
@@ -8,6 +8,6 @@
"editor.defaultFormatter": "esbenp.prettier-vscode",
"workbench.colorTheme": "Default Light+",
"javascript.format.semicolons": "insert",
"window.zoomLevel": 1,
"window.zoomLevel": 2,
"trunk.trunkGrayOutNonBlockingIssues": false
}
packages/api/routes/rtc.ts
+17 -11
View File
@@ -28,11 +28,27 @@ async function handleJoin(req: Request, res: Response) {
const peer = new webrtc.RTCPeerConnection({
iceServers: [
{
urls: "stun:stun.l.google.com:19302",
urls: "stun:stun.stunprotocol.org",
},
],
});
// now that remote is set
// allow this peer connection for this specific line to get tracks for this line already
try {
// TODO: turn this on later for line feature
// linesStreams[lineId]?.forEach((stream) => {
// stream?.getTracks().forEach((track: any) => {
// peer.addTrack(track, stream);
// });
// });
testMainStream?.getTracks().forEach((track: any) => {
peer.addTrack(track, testMainStream);
});
} catch (e) {
console.log(`hacking around small problem with adding track`, e);
}
// allow this peer connection to receive other peoples' streams
peer.ontrack = (e: any) => handleStreams(e, peer, lineId);
@@ -40,16 +56,6 @@ async function handleJoin(req: Request, res: Response) {
const desc = new webrtc.RTCSessionDescription(sdp);
await peer.setRemoteDescription(desc);
// now that remote is set
// allow this peer connection for this specific line to get tracks for this line already
try {
testMainStream?.getTracks().forEach((track: any) => {
peer.addTrack(track, testMainStream);
});
} catch (e) {
console.log(`hacking around small problem with adding track`, e);
}
const answer = await peer.createAnswer();
await peer.setLocalDescription(answer);
packages/web/pages/rtc/index.tsx
+45 -34
View File
@@ -12,57 +12,67 @@ export default function VideoChat() {
const [selectedLine, setSelectedLine] = useState<string>(lines[0]);
const videoRef = useRef<HTMLVideoElement>();
const incomingVideoRef = useRef<HTMLVideoElement>();
const [localMediaStream, setLocalMediaStream] = useState();
const [localMediaStream, setLocalMediaStream] = useState<MediaStream>();
// connect to media server for line connections as a broadcaster and consumer
useEffect(() => {
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((localMediaStream: any) => {
console.log("localMediaStream", localMediaStream);
console.log(`tracks: `, localMediaStream.getTracks());
setLocalMediaStream(localMediaStream);
(async () => {
// note: [later] create a unique peer connection to server for each line
// lines.forEach((lineId) => {
if (videoRef.current) {
toast("got local user video stream");
videoRef.current.srcObject = localMediaStream;
// });
// create a unique peer connection to server for each line
lines.forEach((lineId) => {
// create the peer and add the tranceiver
const peer = createPeer(lineId);
// create the peer and add the tranceiver
const peer = await createPeer("line1");
// peer.onconnectionstatechange = console.log;
// console.log(`peer connection for ${lineId}`, peer);
// todo: understand this better
peer.addTransceiver("video");
// peer.addTransceiver("video", { streams: [localMediaStream] });
// todo: add other tracks like screenshare and such
localMediaStream.getTracks().forEach((track: any) => {
console.log(
`adding track to peer connection: different mediums | audio, video, screen based on selection`
);
peer.addTrack(track, localMediaStream);
});
});
}
});
// console.log(`peer connection for ${lineId}`, peer);
})();
}, [lines]);
const createPeer = (lineId: string) => {
const createPeer = async (lineId: string) => {
const peer = new RTCPeerConnection({
iceServers: [
{
urls: "stun:stun.l.google.com:19302",
urls: "stun:stun.stunprotocol.org",
},
],
});
peer.onconnectionstatechange = console.log;
// todo: understand this better
peer.addTransceiver("video");
// peer.addTransceiver("video", { streams: [localMediaStream] });
const localMediaStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
});
console.log("localMediaStream", localMediaStream);
console.log(`tracks: `, localMediaStream.getTracks());
setLocalMediaStream(localMediaStream);
if (videoRef.current) {
toast("got local user video stream");
videoRef.current.srcObject = localMediaStream;
// todo: add other tracks like screenshare and such
localMediaStream.getTracks().forEach((track: MediaStreamTrack) => {
console.log(
`adding track to peer connection: different mediums | audio, video, screen based on selection`
);
peer.addTrack(track, localMediaStream);
});
}
console.log(peer.connectionState);
peer.ontrack = handleTrackEvent;
peer.onnegotiationneeded = () => handleNegotiationNeededEvent(peer, lineId);
console.log(peer);
return peer;
};
@@ -102,7 +112,7 @@ export default function VideoChat() {
if (incomingVideoRef.current) {
toast(`setting incoming stream ref`);
incomingVideoRef.current.srcObject = incomingStream;
incomingVideoRef.current.srcObject = new MediaStream(incomingStream);
setInterval(() => {
incomingVideoRef!.current!.play().then(console.log).catch(console.log);
@@ -150,6 +160,7 @@ export default function VideoChat() {
height={"500"}
width={"700"}
autoPlay
muted
controls
/>