{(messagePB.contentType === 2 || messagePB.contentType === 3) ? : messagePB.content}
{content}
, datetime: moment().fromNow(), }, ], }, () => { - this.scrollToBottom() + setTimeout(this.scrollToBottom(), 3000) }) }) } @@ -360,6 +346,98 @@ class Panel extends React.Component { } } + /** + * webrtc 绑定事件 + */ + webrtcConnection = () => { + /** + * 对等方收到ice信息后，通过调用 addIceCandidate 将接收的候选者信息传递给浏览器的ICE代理。 + * @param {候选人信息} e + */ + peer.onicecandidate = (e) => { + if (e.candidate) { + // rtcType参数默认是对端值为answer，如果是发起端，会将值设置为offer + let candidate = { + type: this.state.rtcType + '_ice', + iceCandidate: e.candidate + } + + let data = { + fromUsername: localStorage.username, + from: this.state.fromUser, + to: this.state.toUser, + messageType: this.state.messageType, + content: JSON.stringify(candidate), + type: "webrtc", + } + let message = protobuf.lookup("protocol.Message") + const messagePB = message.create(data) + socket.send(message.encode(messagePB).finish()) + } + + }; + + /** + * 当连接成功后，从里面获取语音视频流 + * @param {包含语音视频流} e + */ + peer.ontrack = (e) => { + if (e && e.streams) { + let remoteVideo = document.getElementById("remoteVideo"); + remoteVideo.srcObject = e.streams[0]; + } + }; + } + + /** + * 处理webrtc消息，包括获取请求方的offer，回应answer等 + * @param {消息内容}} messagePB + */ + dealWebRtcMessage = (messagePB) => { + const { type, sdp, iceCandidate } = JSON.parse(messagePB.content); + + if (type === "answer") { + const offerSdp = new RTCSessionDescription({ type, sdp }); + peer.setRemoteDescription(offerSdp) + } else if (type === "answer_ice") { + peer.addIceCandidate(iceCandidate) + } else if (type === "offer_ice") { + peer.addIceCandidate(iceCandidate) + } else if (type === "offer") { + let preview = document.getElementById("preview1"); + navigator.mediaDevices + .getUserMedia({ + audio: true, + video: true, + }).then((stream) => { + preview.srcObject = stream; + stream.getTracks().forEach(track => { + peer.addTrack(track, stream); + }); + + // 一定注意：需要将该动作，放在这里面，即流获取成功后，再进行answer创建。不然不能获取到流，从而不能播放视频。 + const offerSdp = new RTCSessionDescription({ type, sdp }); + peer.setRemoteDescription(offerSdp) + .then(() => { + peer.createAnswer().then(answer => { + peer.setLocalDescription(answer) + let data = { + fromUsername: localStorage.username, + from: this.state.fromUser, + to: this.state.toUser, + messageType: this.state.messageType, + content: JSON.stringify(answer), + type: "webrtc", + } + let message = protobuf.lookup("protocol.Message") + const messagePB = message.create(data) + socket.send(message.encode(messagePB).finish()) + }) + }); + }); + } + } + /** * 断开连接后重新连接 */ @@ -397,7 +475,7 @@ class Panel extends React.Component { username: users[index].username, uuid: users[index].uuid, messageType: 1, - avatar: users[index].avatar, + avatar: Params.HOST + "/file/" + users[index].avatar, } data.push(d) } @@ -534,16 +612,22 @@ class Panel extends React.Component { return } - axiosGet(Params.USER_URL + value) + let data = { + name: value + } + axiosGet(Params.USER_NAME_URL, data) .then(response => { - console.log(response) - if (response.data.username === 0) { - message.error("无此用户") + let data = response.data + if (data.user.username === "" && data.group.name === "") { + message.error("未查找到群或者用户") return } let queryUser = { - username: response.data.username, - nickname: response.data.nickname, + username: data.user.username, + nickname: data.user.nickname, + + groupUuid: data.group.uuid, + groupName: data.group.name, } this.setState({ hasUser: true, @@ -573,6 +657,18 @@ class Panel extends React.Component { }); }; + joinGroup = () => { + // /group/join/:userUid/:groupUuid + axiosPostBody(Params.GROUP_JOIN_URL + this.state.fromUser + "/" + this.state.queryUser.groupUuid) + .then(_response => { + message.success("添加成功") + this.fetchUserList() + this.setState({ + hasUser: false + }); + }); + } + handleCancel = () => { this.setState({ hasUser: false @@ -601,21 +697,11 @@ class Panel extends React.Component { } for (var i = 0; i < data.length; i++) { let contentType = data[i].contentType - let content = data[i].content; - - if (contentType === 2) { - - } else if (contentType === 3) { - content ={content}
, datetime: moment(data[i].createAt).fromNow(), } @@ -626,17 +712,40 @@ class Panel extends React.Component { comments: comments }, () => { this.scrollToBottom() + setTimeout(this.scrollToBottom(), 5000) }) }); } + /** + * 根据文件类型渲染对应的标签，比如视频，图片等。 + * @param {文件类型} type + * @param {文件地址} url + * @returns + */ + getContentByType = (type, url, content) => { + if (type === 2) { + content =
-
} size="large" type='link' disabled={this.state.menuType === 1} onClick={this.fetchUserList}>
@@ -1133,7 +1244,9 @@ class Panel extends React.Component {
shape="circle"
onClick={this.startVideoOnline}
style={{ marginRight: 10 }}
- icon={
用户名：{this.state.queryUser.username}
昵称：{this.state.queryUser.nickname}
+ ++ +
群信息：{this.state.queryUser.groupName}
++ + + +
+ {loading ?
+ );
+ return (
+ <>
+ Upload
+