Блог

Пример, который я нашел, был здесь для клиента:

 https://github.com/metehankurucu/react-native-video-calling-app
 

Итак, я пытаюсь создать Server.js от этого.

Это мой одноранговый клиент:

         import React, {useState} from 'react';
    import {Alert} from 'react-native';
    import {
      mediaDevices,
      MediaStream,
      MediaStreamConstraints,
    } from 'react-native-webrtc';
    import socketio from 'socket.io-client';
    import {MainContext as MainContextType, User} from '../interfaces';
    import {
      SERVER_URL,
      PEER_SERVER_HOST,
      PEER_SERVER_PORT,
      PEER_SERVER_PATH,
    } from '../server';
    // @ts-ignore
    import Peer from 'react-native-peerjs';
    import {navigate} from '../helpers/RootNavigation';

    const initialValues: MainContextType = {
      username: '',
      peerId: '',
      users: [],
      localStream: null,
      remoteStream: null,
      remoteUser: null,
      initialize: () => {},
      setUsername: () => {},
      call: () => {},
      switchCamera: () => {},
      toggleMute: () => {},
      isMuted: false,
      closeCall: () => {},
      reset: () => {},
      activeCall: null,
    };

    export const MainContext = React.createContext(initialValues);

    interface Props {}

    const MainContextProvider: React.FC<Props> = ({children}) => {
      const [username, setUsername] = useState(initialValues.username);
      const [peerId, setPeerId] = useState(initialValues.peerId);
      const [users, setUsers] = useState<User[]>(initialValues.users);
      const [localStream, setLocalStream] = useState<MediaStream | null>(
        initialValues.localStream,
      );
      const [remoteStream, setRemoteStream] = useState<MediaStream | null>(
        initialValues.remoteStream,
      );
      const [remoteUser, setRemoteUser] = useState<User | null>(null);
      const [socket, setSocket] = useState<SocketIOClient.Socket | null>(null);
      const [peerServer, setPeerServer] = useState<any>(null);
      const [isMuted, setIsMuted] = useState(initialValues.isMuted);
      const [activeCall, setActiveCall] = useState<any>(null);

      const initialize = async () => {
        const isFrontCamera = true;
        const devices = await mediaDevices.enumerateDevices();

        const facing = isFrontCamera ? 'front' : 'environment';
        const videoSourceId = devices.find(
          (device: any) => device.kind === 'videoinput' amp;amp; device.facing === facing,
        );
        const facingMode = isFrontCamera ? 'user' : 'environment';
        const constraints: MediaStreamConstraints = {
          audio: true,
          video: {
            mandatory: {
              minWidth: 1280,
              minHeight: 720,
              minFrameRate: 30,
            },
            facingMode,
            optional: videoSourceId ? [{sourceId: videoSourceId}] : [],
          },
        };

        const newStream = await mediaDevices.getUserMedia(constraints);

        setLocalStream(newStream as MediaStream);

        const io = socketio.connect('http://localhost', {
          reconnection: true,
          autoConnect: true,
        });

        io.on('connect', () => {
          console.log('connect');
          setSocket(io);
          console.log('setSocket');
          io.emit('register', username);
          console.log('register');
        });

        io.on('users-change', (users: User[]) => {
          console.log('users-change');
          setUsers(users);
          console.log('setUsers');
        });

        io.on('accepted-call', (user: User) => {
          console.log('accepted-call');
          setRemoteUser(user);
          console.log('setRemoteUser');
        });

        io.on('rejected-call', (user: User) => {
          console.log('rejected-call');
          setRemoteUser(null);
          console.log('setRemoteUser');
          setActiveCall(null);
          console.log('setActiveCall');
          Alert.alert('Your call request rejected by '   user?.username);
          navigate('Users');
          console.log('navigate');
        });

        io.on('not-available', (username: string) => {
          console.log('not-available');
          setRemoteUser(null);
          console.log('setRemoteUser');
          setActiveCall(null);
          console.log('setActiveCall');
          Alert.alert(username   ' is not available right now');
          navigate('Users');
          console.log('Users');
        });

        const peerServer = new Peer({
          host: 'localhost',
          path: '/peerjs',
          secure: false,
          port: 9000,
          config: {
            iceServers: [
              {
                urls: [
                  'stun:stun1.l.google.com:19302',
                  'stun:stun2.l.google.com:19302',
                ],
              },
            ],
          },
        });
        console.log(peerServer);

        peerServer.on('error', (err: Error) =>
          console.log('Peer server error', err),
        );

        peerServer.on('open', (peerId: string) => {
          console.log('open');
          setPeerServer(peerServer);
          console.log('setPeerServer');
          setPeerId(peerId);
          console.log('setPeerId');
          io.emit('set-peer-id', peerId);
          console.log('set-peer-id');
        });

        io.on('call', (user: User) => {
          console.log(user);
          peerServer.on('call', (call: any) => {
            console.log('call');
            setRemoteUser(user);
            console.log('setRemoteUser');
            Alert.alert(
              'New Call',
              'You have a new call from '   user?.username,
              [
                {
                  text: 'Reject',
                  onPress: () => {
                    io.emit('reject-call', user?.username);
                    setRemoteUser(null);
                    setActiveCall(null);
                  },
                  style: 'cancel',
                },
                {
                  text: 'Accept',
                  onPress: () => {
                    io.emit('accept-call', user?.username);
                    call.answer(newStream);
                    setActiveCall(call);
                    navigate('Call');
                  },
                },
              ],
              {cancelable: false},
            );

            call.on('stream', (stream: MediaStream) => {
              console.log('stream');
              setRemoteStream(stream);
              console.log('setRemoteStream');
            });

            call.on('close', () => {
              console.log('close');
              closeCall();
              console.log('closeCall');
            });

            call.on('error', () => {});
          });
        });
      };

      const call = (user: User) => {
        if (!peerServer || !socket) {
          Alert.alert('Peer server or socket connection not found');
          return;
        }

        if (!user.peerId) {
          Alert.alert('User not connected to peer server');
          return;
        }

        socket.emit('call', user.username);

        console.log('setRemoteUser');
        setRemoteUser(user);

        try {
          console.log('1');
          const call = peerServer.call(user.peerId, localStream);

          console.log('peerServer.call(user.peerId, localStream)');
          call.on(
            'stream',
            (stream: MediaStream) => {
              setActiveCall(call);
              setRemoteStream(stream);
            },
            (err: Error) => {
              console.error('Failed to get call stream', err);
            },
          );
        } catch (error) {
          console.log('Calling error', error);
        }
      };

      const switchCamera = () => {
        if (localStream) {
          // @ts-ignore
          localStream.getVideoTracks().forEach((track) => track._switchCamera());
        }
      };

      const toggleMute = () => {
        if (localStream)
          localStream.getAudioTracks().forEach((track) => {
            track.enabled = !track.enabled;
            setIsMuted(!track.enabled);
          });
      };

      const closeCall = () => {
        activeCall?.close();
        setActiveCall(null);
        setRemoteUser(null);
        navigate('Users');
        Alert.alert('Call is ended');
      };

      const reset = async () => {
        peerServer?.destroy();
        socket?.disconnect();
        setActiveCall(null);
        setRemoteUser(null);
        setLocalStream(null);
        setRemoteStream(null);
        setUsername('');
        setPeerId('');
      };

      return (
        <MainContext.Provider
          value={{
            username,
            setUsername,
            peerId,
            setPeerId,
            users,
            setUsers,
            localStream,
            setLocalStream,
            remoteStream,
            setRemoteStream,
            initialize,
            call,
            switchCamera,
            toggleMute,
            isMuted,
            closeCall,
            reset,
            remoteUser,
            activeCall,
          }}>
          {children}
        </MainContext.Provider>
      );
    };

    export default MainContextProvider;
 

Простите меня, поскольку я вложил много утешения.войдите в систему там, поэтому я надеюсь, что я вас не смутил.

И это мой сервер Peerjs:

         const express = require("express");
    const app = express();

    const port = 9000;

    const http = require("http");
    const server = http.createServer(app);

    const io = require("socket.io")(server);
    app.use(express.static(__dirname   "/public"));

    io.sockets.on("error", e => console.log(e));
    server.listen(port, () => console.log(`Server is running on port ${port}`));

    let broadcaster

    io.sockets.on("connection", socket => {
    socket.on("broadcaster", () => {
        broadcaster = socket.id;
        socket.broadcast.emit("broadcaster");
    });
    socket.on("watcher", () => {
        socket.to(broadcaster).emit("watcher", socket.id);
    });
    socket.on("disconnect", () => {
        socket.to(broadcaster).emit("disconnectPeer", socket.id);
    });
    });
 

это JSON, который я получаю от клиента:

         {
        "acks": {},
        "connected": false,
        "disconnected": true,
        "flags": {},
        "ids": 0,
        "io": {
            "_autoConnect": true,
            "_callbacks": {
                "$close": [Array],
                "$error": [Array],
                "$open": [Array],
                "$packet": [Array]
            },
            "_randomizationFactor": 0.5,
            "_readyState": "opening",
            "_reconnection": true,
            "_reconnectionAttempts": Infinity,
            "_reconnectionDelay": 1000,
            "_reconnectionDelayMax": 5000,
            "_timeout": 20000,
            "backoff": {
                "attempts": 0,
                "factor": 2,
                "jitter": 0.5,
                "max": 5000,
                "ms": 1000
            },
            "decoder": {},
            "encoder": {},
            "engine": {
                "_callbacks": [Object],
                "hostname": "localhost",
                "id": null,
                "opts": [Object],
                "pingInterval": null,
                "pingTimeout": null,
                "pingTimeoutTimer": null,
                "port": "80",
                "prevBufferLen": 0,
                "readyState": "opening",
                "secure": false,
                "transport": [XHR],
                "transports": [Array],
                "upgrades": null,
                "writeBuffer": [Array]
            },
            "nsps": {
                "/": [Circular]
            },
            "opts": {
                "autoConnect": true,
                "hostname": "localhost",
                "path": "/socket.io",
                "port": "80",
                "reconnection": true,
                "secure": false
            },
            "skipReconnect": false,
            "subs": [
                [Function subDestroy],
                [Function subDestroy],
                [Function subDestroy]
            ],
            "uri": "http://localhost"
        },
        "nsp": "/",
        "receiveBuffer": [],
        "sendBuffer": [],
        "subs": [
            [Function subDestroy],
            [Function subDestroy],
            [Function subDestroy],
            [Function subDestroy]
        ]
    }
    [Mon Mar 29 2021 19: 22: 16.595] LOG {
        "_api": {
            "_options": {
                "config": [Object],
                "debug": 0,
                "host": "localhost",
                "key": "peerjs",
                "path": "/peerjs/",
                "port": 9000,
                "secure": false,
                "token": "f0ty4c4n2si"
            }
        },
        "_connections": Map {},
        "_destroyed": false,
        "_disconnected": false,
        "_events": {},
        "_eventsCount": 0,
        "_id": null,
        "_lastServerId": null,
        "_lostMessages": Map {},
        "_open": false,
        "_options": {
            "config": {
                "iceServers": [Array]
            },
            "debug": 0,
            "host": "localhost",
            "key": "peerjs",
            "path": "/peerjs/",
            "port": 9000,
            "secure": false,
            "token": "f0ty4c4n2si"
        },
        "_socket": {
            "_baseUrl": "ws://localhost:9000/peerjs/peerjs?key=peerjs",
            "_disconnected": true,
            "_events": {
                "close": [r],
                "disconnected": [r],
                "error": [r],
                "message": [r]
            },
            "_eventsCount": 4,
            "_messagesQueue": [],
            "pingInterval": 5000
        }
    }
    [Mon Mar 29 2021 19: 22: 16.752] LOG Peer server error[Error: Could not get an ID from the server.]