Thiết kế website giá rẻ

Question

I’m making a simple google meet type application using MERN STACK. I have connected the user’s they can communicate over each other through video calling. But when User A tries to screenshare i’m adding the tracks & the stream of it to user B. I just want that whenever my tracks are added user B will receive the remote stream and then that stream will be added in the srcObject but here my ontrack function is not working IDK why. IF somebody can help me out it will be great. Thanks a lot in advance!!! Provding my code snippet.

import React from 'react'
import { useWebRTC } from '../../hooks/useWebRtc'
import { useParams } from "react-router-dom"
import { useSelector } from 'react-redux'
import styled from 'styled-components'

the below is my room component
const Room = () => {
    const { id: roomId } = useParams()
    const { user } = useSelector(state => state.user)
    const { clients, provideRef, screenShareRef, screenSharing } = useWebRTC(roomId, user)
    console.log({ clients })
    return (
        <>
            <div>Room</div>
            <VideoContainer>
                {
                    clients.map((client, id) => client?.id && <div key={id} style={{ width: "45%" }}>
                        <video ref={(instance) => provideRef(instance, client?.id)} controls autoPlay style={{
                            width: '100%',
                            height: 'auto', // or specify a fixed height if needed
                            display: 'block',
                            margin: '0 auto', // optional: center the video horizontally
                        }} />
                        <p>{client?.fullName}</p>
                    </div>)
                }
            </VideoContainer>
            <ScreenShareContainer id="screenShareContainer">
                <video autoPlay controls ref={(instance) => screenShareRef(instance, user)} />
            </ScreenShareContainer>
            <button onClick={screenSharing}>Share screen</button>
        </>
    )
}

export default Room

the below is my useWebRtc custom hook

import { useEffect, useState, useRef, useCallback } from "react";
import { ACTIONS } from "../actions";
import { socketInit } from "../socket";
import freeice from "freeice";
import { useStateWithCallback } from "./useStateWithCallback";
import conn from "../../../backend/conn";

export const useWebRTC = (roomId, user) => {
  const [clients, setClients] = useStateWithCallback([]);
  const audioElements = useRef({});
  const screenShareElements = useRef({});
  const connections = useRef({});
  const screenShareStream = useRef(null);
  const socket = useRef(null);
  const localMediaStream = useRef(null);
  const senders = useRef([]);
  const clientIds = useRef(new Set());

  const addNewClient = useCallback(
    (newClient, cb) => {
      if (!clientIds.current.has(newClient?.id)) {
        clientIds.current.add(newClient?.id);
        setClients((existingClients) => [...existingClients, newClient], cb);
      }
    },
    [setClients]
  );

  useEffect(() => {
    socket.current = socketInit();
  }, []);

  //share screen
  async function screenSharing() {
    try {
      screenShareStream.current = await navigator.mediaDevices.getDisplayMedia({
        video: {
          cursor: "always",
          displaySurface: "monitor",
        },
      });

      const screenTrack = screenShareStream.current.getTracks()[0];
      for (let peerId in connections.current) {
        const connection = connections.current[peerId];
        connection.addTrack(screenTrack, screenShareStream.current);
        if (
          connection.getSenders().find((sender) => sender.track === screenTrack)
        ) {
          console.log(connection.getSenders());
          console.log(`Screen track added to connection for peer ${peerId}`);
        } else {
          console.warn(
            `Failed to add screen track to connection for peer ${peerId}`
          );
        }
      }

      for (let peerId in connections.current) {
        console.log({ peerId });
        connections.current[peerId].ontrack = () => {
          console.log("arrvingin");
        };
      }
      const localElement = screenShareElements.current[user.id];
      if (localElement) {
        localElement.srcObject = screenShareStream.current;
      }
      // screenTrack.onended = () => stopScreenSharing();
    } catch (error) {
      console.error("Error in screen sharing: ", error);
    }
  }

  // Handle new peer
  useEffect(() => {
    const handleNewPeer = async ({ peerId, createOffer, user: remoteUser }) => {
      // If already connected then prevent connecting again
      if (peerId in connections.current) {
        return console.warn(
          `You are already connected with ${peerId} (${user.name})`
        );
      }

      // Store it to connections
      connections.current[peerId] = new RTCPeerConnection({
        iceServers: freeice(),
      });

      // Handle new ice candidate on this peer connection
      connections.current[peerId].onicecandidate = (event) => {
        socket.current.emit(ACTIONS.RELAY_ICE, {
          peerId,
          icecandidate: event.candidate,
        });
      };

      // Handle on track event on this connection
      connections.current[peerId].ontrack = ({ streams: [remoteStream] }) => {
        console.log(connections.current);
        addNewClient(remoteUser, () => {
          if (audioElements.current[remoteUser.id]) {
            audioElements.current[remoteUser.id].srcObject = remoteStream;
          } else {
            let settled = false;
            const interval = setInterval(() => {
              if (audioElements.current[remoteUser.id]) {
                audioElements.current[remoteUser.id].srcObject = remoteStream;
                settled = true;
              }

              if (settled) {
                clearInterval(interval);
              }
            }, 1000);
          }
        });
      };

      // Add connection to peer connections track
      localMediaStream.current.getTracks().forEach((track) => {
        console.log(connections.current);
        connections.current[peerId].addTrack(track, localMediaStream.current);
      });

      if (screenShareStream.current) {
        screenShareStream.current.getTracks().forEach((track) => {
          connections.current[peerId].addTrack(
            track,
            screenShareStream.current
          );
        });
      }
      // Create an offer if required
      if (createOffer) {
        const offer = await connections.current[peerId].createOffer();

        // Set as local description
        await connections.current[peerId].setLocalDescription(offer);

        // send offer to the server
        socket.current.emit(ACTIONS.RELAY_SDP, {
          peerId,
          sessionDescription: offer,
        });
      }
    };

    // Listen for add peer event from ws
    socket.current.on(ACTIONS.ADD_PEER, handleNewPeer);
    return () => {
      socket.current.off(ACTIONS.ADD_PEER);
    };
  }, [clients]);

  useEffect(() => {
    const startCapture = async () => {
      // Start capturing local video stream.

      localMediaStream.current = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      });
    };

    startCapture().then(() => {
      // add user to clients list
      addNewClient(user, () => {
        const localElement = audioElements.current[user.id];
        if (localElement) {
          localElement.volume = 0;
          localElement.srcObject = localMediaStream.current;
        }
      });
      console.log({ localMediaStream });
      // Emit the action to join
      socket.current.emit(ACTIONS.JOIN, {
        roomId,
        user,
      });
    });

    // Leaving the room
    return () => {
      localMediaStream.current.getTracks().forEach((track) => track.stop());
      socket.current.emit(ACTIONS.LEAVE, { roomId });
    };
  }, []);

  // Handle ice candidate that are sent from server to client
  useEffect(() => {
    socket.current.on(ACTIONS.ICE_CANDIDATE, ({ peerId, icecandidate }) => {
      // Add the icecanidate of another user in our ice candiates
      if (icecandidate) {
        connections.current[peerId].addIceCandidate(icecandidate);
      }
    });

    return () => {
      socket.current.off(ACTIONS.ICE_CANDIDATE);
    };
  }, []);

  // Handle SDP that are sent from server to client
  useEffect(() => {
    const setRemoteMedia = async ({
      peerId,
      sessionDescription: remoteSessionDescription,
    }) => {
      connections.current[peerId].setRemoteDescription(
        new RTCSessionDescription(remoteSessionDescription)
      );

      // If session descrition is offer then create an answer
      if (remoteSessionDescription.type === "offer") {
        const connection = connections.current[peerId];

        const answer = await connection.createAnswer();
        connection.setLocalDescription(answer);

        socket.current.emit(ACTIONS.RELAY_SDP, {
          peerId,
          sessionDescription: answer,
        });
      }
    };

    socket.current.on(ACTIONS.SESSION_DESCRIPTION, setRemoteMedia);
    return () => {
      socket.current.off(ACTIONS.SESSION_DESCRIPTION);
    };
  }, []);

  useEffect(() => {
    window.addEventListener("unload", function () {
      alert("leaving");
      socket.current.emit(ACTIONS.LEAVE, { roomId });
    });
  }, []);

  useEffect(() => {
    const handleRemovePeer = ({ peerID, userId }) => {
      console.log("leaving", peerID, userId);

      if (connections.current[peerID]) {
        connections.current[peerID].close();
      }

      delete connections.current[peerID];
      delete audioElements.current[peerID];

      setClients((list) => list.filter((c) => c.id !== userId));
    };

    socket.current.on(ACTIONS.REMOVE_PEER, handleRemovePeer);

    return () => {
      socket.current.off(ACTIONS.REMOVE_PEER);
    };
  }, []);

  const provideRef = (instance, userId) => {
    audioElements.current[userId] = instance;
  };

  const screenShareRef = (instance, user) => {
    screenShareElements.current[user.id] = instance;
  };

  return { clients, provideRef, screenShareRef, screenSharing };
};

you can checkout my screenShare functionality.

I was expecting that ontrack will work after adding the track. But it;s not working. it’s not triggering ontrack after adding the tracks in it.

Thiết kế website giá rẻ

Danh mục

Problem in ScreenSharing in WEBRTC using MERN STACK