客户端离开房间或断开连接后,客户端不会重新连接

时间:2019-03-14 12:05:13

标签: javascript reactjs webrtc kurento

我正在使用Kurento客户端在一个房间中进行视频通话。通话中只有两个参与者(本地和远程)。客户端可以离开会议室,但是当客户端离开会议室时,该客户端的流不会显示给其他客户端,这很明显,但是当同一客户端再次希望加入会议室时,客户端不会因此而连接另一个客户不会看到他/她的视频流进行视频通话。

这是我的工作方式

import kurentoUtils from "kurento-utils";
import socketIOClient from "socket.io-client";
import {
  createWebRTCPeer,
  sendMessage,
  createWebRTCScreenPeer
} from "./common";

const CONSTRAINTS = {
  audio: true,
  video: {
    width: 640,
    framerate: 15
  }
};

class VideoRoom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startCall: false,
      room: "",
      clientJoined: false,
      email: "",
      isLoggedIn: false,
      open: false,
      mute: false
    };
    this.localStreamRef = React.createRef();
    this.remoteStreamRef = React.createRef();
    this.onIceCandidates = this.onIceCandidates.bind(this);
    this.handleError = this.handleError.bind(this);
    this.socket = null;
    this.webRTC = null;
    this.loginName = null;
  }

  handleError = (e)=> {
    console.log(e);
  }

  onIceCandidates(candidate) {
    sendMessage(
      {
        event: "iceCandidate",
        data: candidate
      },
      this.socket
    );
  }


  componentDidMount() {
    this.socket = new socketIOClient("http://localhost:8443/sockets");
    this.webRtcPeer = null;
    this.webRtcScreenPeer = null;
    const { state } = this.props.location;
    if (state && state.interviewId) {
      this.initiateSocket();
    }
  }


  initiateSocket() {
    const { interviewId } = this.props.location.state;
    this.socket.emit("room:addUser", { interviewId, userEmail: this.state.email });

    this.socket.on("ICE_CANDIDATE", async candidate => {
      console.log("candidate in listener", candidate);
      await this.webRTC.addIceCandidate(candidate);
    });

    this.socket.on("RTC:PEER", room => {
      console.log("RTC:PEER", room, this.localStreamRef);
      this.webRtcPeer = createWebRTCPeer(
        {
          localVideo: this.localStreamRef.current,
          remoteVideo: this.remoteStreamRef.current,
          onicecandidate: this.onIceCandidates
        },
        this.socket,
        room
      );
    });

    this.socket.on("client:joined", () => {
      this.setState({ clientJoined: true });
    });

    this.socket.on("iceCandidate", (candidate) => {
      console.log("GOT Candidate....");
      this.webRtcPeer.addIceCandidate(candidate);
    });

    this.socket.on("answer", answer => {
      console.log("GOT ANSWER....");
      this.webRtcPeer.processAnswer(answer);
    });

    this.socket.on("remote:leave", () => {
      console.log("LEAVE FROM REMOTE");
      this.handleLeaveRoom(true);
      this.setState({ clientJoined: false });
    });

    this.socket.on("ERROR", error => this.onError(error));
  }

  componentWillUnmount() {
    this.socket.emit('end');
    this.socket = null;
    this.webRtcPeer && this.webRtcPeer.dispose();
    this.webRtcPeer = null;
  }

  onError = error => console.error(error);

  handleLeaveRoom = (remote = false) => {
    if (remote) {
      this.remoteStreamRef.current.srcObject = null;
    } else if (
      this.webRtcPeer !== null &&
      this.webRtcPeer !== undefined &&
      this.socket !== null
    ) {
      this.localStreamRef.current.srcObject = null;
      this.props.history.push("/interivew-id");
    } else {
      return ;
    }
  };

  render() {

    return (
      <React.Fragment>
        <Wrapper>
          <Studio
            {...this.state}
            interviewer={this.localStreamRef}
            interviewee={this.remoteStreamRef}
          />
          <Controls
            handleLeaveRoom={() => this.handleLeaveRoom()}
            handleMute={() => this.handleMute()}
            mute={this.state.mute}
            handleScreenShare={this.handleScreenShare}
          />
        </Wrapper>
      </React.Fragment>
    );
  }
}

export default withRouter(VideoRoom);

server.js

socket.on("end", () => {
    console.log(`closing socket in room:: ${socket.room}`);
    // console.log(`socket end: room: ${room ? room : socket.room}`)
    socket.disconnect(0);
  });

  socket.on('disconnect', () => {
    console.log("Client disconnected from", socket.room);
    let session = sessions[socket.room];
    if(session){
      session.removeClient(socket.id);
    }
    socket.broadcast.to(socket.room).emit('remote:leave', socket.id);
  });

这是完整的代码

https://gist.github.com/SanskarSans/76aee1ab4ccab7c02dc812019f1329e9

请假室可以工作,但是在尝试重新加入时,客户端无法建立连接并向远程客户端显示其流。

0 个答案:

没有答案