Video call with simple peer library not working

63 views Asked by At

I am trying to send signal data from my Peer to the target Peer through the server, and the target is receiving the signal and am trying to set the signal data on the target hoping it will trigger a stream event on the target peer but nothing happening. I am asking on Stackoverflow for the first time so sorry if I am not clear. Thank you.

Video call component below -

import { useEffect, useRef, useState } from 'react';
import styles from './VideoCall.module.css';
import SimplePeer, { SignalData } from 'simple-peer';
import { socket } from '../../../instances/socket';

interface Props {
    username: string,
    myUsername: string,
}

export default function VideoCall({username, myUsername}: Props) {
    const [myPeer, setMyPeer] = useState<SimplePeer.Instance | null>(null);
    const [targetPeer, setTargetPeer] = useState<SimplePeer.Instance | null>(null);
    const remoteVideoRef = useRef<HTMLVideoElement>(null);
    const myVideoRef = useRef<HTMLVideoElement>(null);

    useEffect(() => {
        let userMediaStream: MediaStream;
        navigator.mediaDevices.getUserMedia({video: true, audio: true})
        .then((stream) => {
            if (stream && myVideoRef.current) {
                userMediaStream = stream;
                myVideoRef.current.srcObject = stream;
                myVideoRef.current.play();
                if (myPeer) {
                    myPeer.addStream(stream);
                }
            }

            if (targetPeer === null && myPeer === null) {
                setMyPeer(new SimplePeer({
                    initiator: true,
                    trickle: false,
                    offerOptions: {
                        offerToReceiveAudio: true,
                        offerToReceiveVideo: true,
                    }
                }));
                setTargetPeer(new SimplePeer({
                    initiator: false,
                    trickle: false,
                }));
            }
            
            if (!myPeer || !targetPeer) return;

            myPeer?.on('signal', (data: SignalData) => {
                console.log('my signal', data);
                socket.emit('signal', {offer: data, to: username});
            });

            socket.on('receiveSignal', (data: SignalData) => {
                console.log('received signal', data);
                targetPeer.signal(data);
            });
            
            targetPeer?.on('stream', (remoteStream) => {
                console.log('remote stream', remoteStream);
                if (remoteVideoRef.current) {
                        remoteVideoRef.current.srcObject = remoteStream;
                        remoteVideoRef.current.play();
                }
            });

            //miscif
            myPeer?.on('connect', () => {
                myPeer.send('hey peer2, how is it going?')
            })
            
            targetPeer?.on('data', data => {
                console.log('got a message from peer1: ' + data)
            })
        })
        .catch((error) => console.log(error));
        return () => {
            if (userMediaStream) {
                userMediaStream.getTracks().forEach(track => track.stop());
            }
            if (myPeer) {
                myPeer.destroy();
            }
            if (targetPeer) {
                targetPeer.destroy();
            }
        };
        
    }, [myPeer, targetPeer, username, myUsername]);

    return (
        <div className={styles['video-call']}>
            <div className={styles.videos}>
                <video className={styles['remote-video']} ref={remoteVideoRef} playsInline />
                <video className={styles['my-video']} ref={myVideoRef} muted playsInline />
            </div>
        </div>
    )
}

server side below-

socket.on('signal', (data: {to: string, offer: SignalData}) => {
    io.to(data.to).emit('receiveSignal', data.offer);
});

I tried the method mentioned in the simple peer doc, like setting signal data to target peers on listening to the signal, and vice versa, that seemed to be working but I wanna send the data to the respective room.

0

There are 0 answers