我正在使用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
请假室可以工作,但是在尝试重新加入时,客户端无法建立连接并向远程客户端显示其流。