提交 97968cf1 编写于 作者: haochangdi's avatar haochangdi

完善视频逻辑

上级 60e497c0
export const IM_MESSAGE = {
PLEASE_ACTION: 100, // 请求连麦-------------------------------------------------------------嘉宾
CALL_ACTION: 101, // 连麦通知
CALL_ACCEPT: 1, // 主播同意嘉宾连麦----------------------------------------------------------主播
CALL_REFUSE: 0, // 主播拒绝嘉宾连麦----------------------------------------------------------主播
DOWN_ACTIONL: 102, //下麦通知
DOWN_COMMAND: 102, //让嘉宾下麦-------------------------------------------------------------主播
CUSTOM_ACTION: 301, //自定义通知
CUSTOM_COMMAND_MC: 333, //自己下麦----------------------------------------------------------嘉宾
CUSTOM_COMMAND_IN: 666, // 自已在房间-------------------------------------------------------嘉宾
CUSTOM_COMMAND_OUT: 999, // 离开房间--------------------------------------------------------嘉宾
CUSTOM_COMMAND_ON: 777, //上课--------------------------------------------------------------主播
CUSTOM_COMMAND_DOWN: 888, //下课------------------------------------------------------------主播
CUSTOM_COMMAND_DOWN_MC: 852, //关闭麦克风----------------------------------------------------主播
CUSTOM_COMMAND_DOWN_V: 851, // 关闭摄像头 ---------------------------------------------------主播
CUSTOM_COMMAND_HERE: 123, //嘉宾还在不在-----------------------------------------------------主播
CUSTOM_COMMAND_YES: 321, //嘉宾还在----------------------------------------------------------嘉宾
CUSTOM_COMMAND_INVITE: 741, //邀请嘉宾连麦----------------------------------------------------主播
CUSTOM_COMMAND_INVITE_OK: 742, //嘉宾同意连麦-------------------------------------------------嘉宾
CUSTOM_COMMAND_INVITE_NO: 743, //嘉宾拒绝连麦-------------------------------------------------嘉宾
CUSTOM_COMMAND_INVITE_EMPTY: 745, //主播告诉嘉宾有空位置--------------------------------------主播
CUSTOM_COMMAND_SPEAKER_ON: 201, //主播设置嘉宾为主讲--------------------------------------------主播
CUSTOM_COMMAND_SPEAKER_DOWN: 202, //主播取消嘉主讲----------------------------------------------主播
}
// 主播发送的消息-------------------------------------------------
export const imAgreeCall = () => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CALL_ACTION + ',"accept":' + IM_MESSAGE.CALL_ACCEPT + ',"reason":"同意连麦"}', description: '', extension: '' }
return data
}
export const imRefuseCall = () => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CALL_ACTION + ',"accept":' + IM_MESSAGE.CALL_REFUSE + ',"reason":"拒绝连麦"}', description: '', extension: '' }
return data
}
export const imCallDown = (nick) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.DOWN_ACTIONL + ', "command":"' + IM_MESSAGE.DOWN_COMMAND + '", "accept":0,"message":"' + nick + '","reason":"下麦"}', description: '', extension: '' }
return data
}
export const imMcDown = (nick) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ',"command": "' + IM_MESSAGE.CUSTOM_COMMAND_DOWN_MC + '","accept":0,"message":"' + nick + '","reason":"主播关闭了您的麦克风"}', description: '', extension: '' }
return data
}
export const imVDown = (nick) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ',"command": "' + IM_MESSAGE.CUSTOM_COMMAND_DOWN_V + '","accept":0,"message":"' + nick + '","reason":"主播关闭了您的摄像头"}', description: '', extension: '' }
return data
}
export const imClassOn = () => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_ON + '","accept":0,"reason":"上课啦","message":""}', description: '', extension: '' }
return data
}
export const imClassDown = () => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_DOWN + '","accept":0,"reason":"下课啦","message":""}', description: '', extension: '' }
return data
}
export const imJbHere= () => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_HERE + '","accept":0,"reason":"在么?","message":""}', description: '', extension: '' }
return data
}
export const imInviteCall = (nick) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_INVITE + '","accept":0,"reason":"主播请您连麦","message":"' + nick + '"}', description: '', extension: '' }
return data
}
export const imInviteEmpty= (nick,replaceId) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_INVITE_EMPTY + '","accept":0,"reason":"有空位置了,可以连麦了","replaceId":"' + replaceId + '","message":"' + nick + '"}', description: '', extension: '' }
return data
}
export const imSetSpeaker= (nick) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_SPEAKER_ON + '","accept":0,"reason":"主播设置您为主讲人","message":"' + nick + '"}', description: '', extension: '' }
return data
}
export const imCancleSpeaker = (nick) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_SPEAKER_DOWN + '","accept":0,"reason":"主播取消您的主讲人身份","message":"' + nick + '"}', description: '', extension: '' }
return data
}
// 嘉宾发的消息----------------------------------------------------------------------
export const imPleaseCall = () => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.PLEASE_ACTION + ',"accept":1,"reason":"申请连麦"}', description: '', extension: '' }
return data
}
export const imInhome = (nick, callStatus, pendCalling, faceUrl, loadingTime, isSpeaker) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ',"command":"' + IM_MESSAGE.CUSTOM_COMMAND_IN + '","accept":1,"reason":"我已经在房间了" ,"message":"' + nick + '","callStatus":"' + callStatus + '","pendCalling":"' + pendCalling + '","isSpeaker":"' + isSpeaker + '","loadingTime":"' + loadingTime + '","faceUrl":"' + faceUrl + '"}', description: '', extension: '' }
return data
}
export const imMcDownSelf = () => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_MC + '","accept":0,"reason":"我下麦了","message":""}', description: '', extension: '' }
return data
}
export const imJbYes = () => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_YES + '","accept":0,"reason":"在的","message":""}', description: '', extension: '' }
return data
}
export const imInviteOk = (nick) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_INVITE_OK + '","accept":0,"reason":"嘉宾接受主播连麦请求","message":"' + nick + '"}', description: '', extension: '' }
return data
}
export const imInviteNo = (nick) => {
let data = { data: '{"version":"","action":' + IM_MESSAGE.CUSTOM_ACTION + ', "command":"' + IM_MESSAGE.CUSTOM_COMMAND_INVITE_NO + '","accept":0,"reason":"嘉宾拒绝主播连麦请求","message":"' + nick + '"}', description: '', extension: '' }
return data
}
\ No newline at end of file
class WebIMObj {
constructor(params) {
this.accountModel = null;
this.imListener = null;
this.boardNotifyCallback = null;
this.compatSaas = null;
this.groupChatId = null;
this.groupBoardId = null;
this.xmlHttp = null;
this.tim = null;
this.callbackobj = null;
this.roomId = params.roomId
}
init(sdkAppId) {
var options = {
SDKAppID: sdkAppId // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
};
this.tim = window.TIM.create(options);
this.tim.setLogLevel(0); // 普通级别,日志量较多,接入时建议使用
this.tim.registerPlugin({
'cos-js-sdk': window.COS
}); // 注册 COS SDK 插件
}
login(accountModel) {
this.accountModel = accountModel;
this.uninitEvent();
this.initEvent();
return this.tim.login({
userID: String(accountModel.userId),
userSig: String(accountModel.userSig)
});
}
initEvent() {
this.tim.on(window.TIM.EVENT.MESSAGE_RECEIVED, this.onMessageReceived, this) // SDK 收到推送的单聊、群聊、群提示、群系统通知的新消息
// this.tim.on(window.TIM.EVENT.GROUP_SYSTEM_NOTICE_RECEIVED, this.onGroupSystemNoticeReceived, this) // SDK 收到新的群系统通知时触发
this.tim.on(window.TIM.EVENT.KICKED_OUT, this.onKickedOut, this) // 用户被踢下线时触发
}
uninitEvent() {
this.tim.off(window.TIM.EVENT.MESSAGE_RECEIVED, this.onMessageReceived) // SDK 收到推送的单聊、群聊、群提示、群系统通知的新消息
// this.tim.off(window.TIM.EVENT.GROUP_SYSTEM_NOTICE_RECEIVED, this.onGroupSystemNoticeReceived) // SDK 收到新的群系统通知时触发
this.tim.off(window.TIM.EVENT.KICKED_OUT, this.onKickedOut) // 用户被踢下线时触发
}
logout() {
this.uninitEvent();
return this.tim.logout();
}
/**
* 请以一下命名回调方法:
* 有成员进入onRecvJoinMessage
* 有成员退出onRecvOutMessage
* 收到C2C文本消息onRecvTextMessage
* 收到C2C自定义消息onRecvCustomMessage
* 收到群文本消息onRecvGroupTextMessage
* 收到群自定义消息onRecvGroupCustomMessage
* 所有消息onRecvMessage
* 被踢出群组onClassroomDestroy
*/
// 增加回调函数
addEvent(v) {
this.callbackobj = v
}
/**
* @classId 群组id
* @scene 场景
*/
createRoom(groupId) {
groupId = String(groupId);
let groupType = null;
// 创建聊天室
groupType = window.TIM.TYPES.GRP_AVCHATROOM;
var options = {
name: groupId,
groupID: groupId,
type: groupType,
joinOption: window.TIM.TYPES.JOIN_OPTIONS_FREE_ACCESS //自由加入
};
return this.tim.createGroup(options).then(() => { // 创建成功
return Promise.resolve();
}).catch(function () {
if (error.code == 10025) { // 群组 ID 已被使用,并且操作者为群主,可以直接使用。
return Promise.resolve();
} else {
// return Promise.reject(error);
return Promise.resolve();
}
});
}
/**
* 加入群
*/
joinRoom(groupId) {
groupId = String(groupId);
return this.tim.joinGroup({
groupID: groupId,
type: window.TIM.TYPES.GRP_AVCHATROOM,
}).then(res => {
switch (res.data.status) {
case window.TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
case window.TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
return Promise.resolve();
case window.TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意,业务上认为失败
default:
return Promise.reject(res);
}
}, error => {
if (error.code == 10013) { // 被邀请加入的用户已经是群成员,也表示成功
return Promise.resolve();
} else if (error.code == -12) { // Join Group succeed; But the type of group is not AVChatRoom
return Promise.resolve();
}
return Promise.reject(error);
});
}
/**
* 销毁群组
*/
destroyGroup(groupId) {
groupId = String(groupId);
return this.tim.dismissGroup(groupId);
}
/**
* 退出群组
*/
quitGroup(groupId) {
let Id = String(groupId);
return this.tim.quitGroup(Id).then(res => {
return Promise.resolve();
}, error => {
// 群不存在 或者 不在群里了 或者 群id不合法(一般这种情况是课堂销毁了groupId被重置后发生)
if (error.code === 10010 || error.code === 10007 || error.code === 10015) {
return Promise.resolve();
} else if (error.code == 10009) { // 群主自己想退课堂
return Promise.resolve();
} else {
return Promise.reject(error);
}
});
}
onKickedOut(callback) {
callback && callback()
}
onGroupSystemNoticeReceived(event) {
const message = event.data.message; // 群系统通知的消息实例,详见 Message
const payload = message.payload;
switch (payload.operationType) {
case 4: // 被踢出群组
if (event.data.message.to == this.groupChatId) {
this.callbackobj && this.callbackobj.onClassroomDestroy && this.callbackobj.onClassroomDestroy()
}
break;
case 5: // 群组被解散
if (event.data.message.to == this.groupChatId) {
this.callbackobj && this.callbackobj.onClassroomDestroy && this.callbackobj.onClassroomDestroy()
}
break;
case 11: //群已被回收(全员接收)
if (event.data.message.to == this.groupChatId) {
this.callbackobj && this.callbackobj.onClassroomDestroy && this.callbackobj.onClassroomDestroy()
}
break;
case 255:
console.warn('系统消息255:::', event.data.message)
break;
}
}
onMessageReceived(event) {
let messages = event.data;
this.updateLiveCount();
messages.forEach((message) => {
// 群组消息
if (message.conversationType === window.TIM.TYPES.CONV_GROUP) {
if (message.to == this.roomId) { // 如果是当前群组
let elements = message.getElements();
if (elements.length) {
elements.forEach((element) => {
console.log(element.type);
if (element.type === 'TIMGroupTipElem') {
switch (element.content.operationType) {
// 有成员进入
case window.TIM.TYPES.GRP_TIP_MBR_JOIN:
this.callbackobj && this.callbackobj.onRecvJoinMessage && this.callbackobj.onRecvJoinMessage(element.content.userIDList, message.nick)
console.log('js::::有人进来了');
break;
// 有成员退出
case window.TIM.TYPES.GRP_TIP_MBR_QUIT:
console.log('js::::有人退出了');
this.callbackobj && this.callbackobj.onRecvOutMessage && this.callbackobj.onRecvOutMessage(element.content.userIDList, message.nick)
break;
}
} else if (element.type === 'TIMTextElem') {
// 有群组消息
console.log('js::::有群组消息');
this.callbackobj.setMessagesBack(message);
this.callbackobj && this.callbackobj.onRecvGroupTextMessage && this.callbackobj.onRecvGroupTextMessage(message.from, element.content.text, element.content.text.length, message.nick)
} else if (element.type === 'TIMCustomElem') {
// 有群自定义消息
if (element.content.extension === 'TXConferenceExt') {
// 对时消息过滤掉
} else {
console.log('js::::有群自定义消');
console.log(this.callbackobj);
this.callbackobj && this.callbackobj.onRecvGroupCustomMessage && this.callbackobj.onRecvGroupCustomMessage(message.from, element.content.data, element.content.data.length, message.nick)
}
}
});
}
} else {
// 其他群组消息忽略
}
} else if (message.conversationType === window.TIM.TYPES.CONV_C2C) { // C2C消息
let elements = message.getElements();
if (elements.length) {
elements.forEach((element) => {
if (element.type === 'TIMTextElem') {
// C2C文本消息
console.log('js:::: C2C文本消息');
console.log(message)
this.callbackobj && this.callbackobj.onRecvTextMessage && this.callbackobj.onRecvTextMessage(message.from, element.content.text, element.content.text.length, message.nick)
} else if (element.type === 'TIMCustomElem') {
// 自定义消息
console.log('js:::: C2C自定义消息');
console.log(message)
try {
this.callbackobj && this.callbackobj.onRecvCustomMessage && this.callbackobj.onRecvCustomMessage(message.from, message.payload.data, message.nick)
} catch (error) {
console.log('错了:', error)
}
}
});
}
}
});
}
updateLiveCount() {
this.tim.getGroupProfile({ groupID: this.roomId }).then(event => {
let gl = event.data.group;
// debugger
gl.memberNum && this.callbackobj.getImGroupMemberNum(gl.memberNum);
});
}
/**
* 发送C2C文本消息
*/
sendC2CTextMessage(userId, msg) {
let message = this.tim.createTextMessage({
to: userId,
conversationType: window.TIM.TYPES.CONV_C2C,
payload: {
text: msg
}
})
return this.tim.sendMessage(message).then(() => {
return Promise.resolve();
}, (error) => {
return Promise.reject(error);
});
}
/**
* 发送C2C自定义消息
*/
sendC2CCustomMessage(userId, msg) {
let message = this.tim.createCustomMessage({
to: userId,
conversationType: window.TIM.TYPES.CONV_C2C,
payload: {
data: msg.data,
description: msg.description,
extension: msg.extension
}
})
return this.tim.sendMessage(message).then(() => {
return Promise.resolve();
}, (error) => {
return Promise.reject(error);
});
}
/**
* 发送群文本消息
*/
sendGroupTextMessage(msg,id) {
let toGroupId = id;
let message = this.tim.createTextMessage({
to: this.roomId,
conversationType: window.TIM.TYPES.CONV_GROUP,
payload: {
text: msg
}
})
return this.tim.sendMessage(message).then(() => {
this.callbackobj.setMessagesBack(message);
return Promise.resolve();
}, (error) => {
return Promise.reject(error);
});
}
/**
* 发送群组自定义消息
*/
sendGroupCustomMessage(msg, id) {
let toGroupId = id;
let message = this.tim.createCustomMessage({
to: toGroupId,
conversationType: window.TIM.TYPES.CONV_GROUP,
payload: {
data: msg.data,
description: msg.description,
extension: msg.extension
}
})
return this.tim.sendMessage(message).then(() => {
return Promise.resolve();
}, (error) => {
return Promise.reject(error);
});
}
getGroup() {
return this.tim.getGroupProfile({
groupID: this.roomId}).then((p) => {
return Promise.resolve(p);
})
}
updateMyProfile(obj) {
return this.tim.updateMyProfile({
nick: obj.nick,
avatar: obj.avatar
}).then((p) => {
return Promise.resolve(p);
}).catch((error) => {
// 更新资料失败的相关信息
return Promise.reject(error);
})
}
_getXhr() {
if (this.xmlHttp) {
return this.xmlHttp;
}
let xmlHttp = null;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
this.xmlHttp = xmlHttp;
return xmlHttp;
}
}
export default WebIMObj;
import WebIMObj from '@/utils/live/WebIM.js'
module.exports = {
data() {
return {
}
},
created() {
},
methods: {
// 初始化Im
initIM() {
this.WebIM = new WebIMObj({roomId: this.roomId})
this.WebIM.init(this.sdkAppId)
this.WebIM.tim.on(TIM.EVENT.SDK_READY, this.onTimSdkReady)
this.WebIM.tim.on(TIM.EVENT.SDK_NOT_READY, this.onTimSdkNotReady)
this.IMlogin()
},
// TIM SDK 准备完成 注意:这时需要将vue实例传入
onTimSdkReady() {
this.IMJion();
console.log('TIM SDK 准备完成')
// this.createRoom();
// 将vue实例传入,方便消息回调
this.WebIM.addEvent(this)
},
// SDK 准备失败
onTimSdkNotReady(event) {
console.log('TIM SDK 准备失败 => ', event)
},
// Im登录
IMlogin() {
this.WebIM.login({
userId: this.userId,
userSig: this.userSig
}).then(() => {
// this.IMJion();
}, error => {
console.log('抱歉登录失败')
})
},
// WebIM创建聊天房间
createRoom() {
this.WebIM.createRoom(this.roomId).then(() => {
// 创建课堂-end
console.log('创建room成功')
this.IMJion()
}, error => {
console.log('创建room失败')
this.IMJion()
})
},
// WebIM加入房间
IMJion() {
this.WebIM.joinRoom(this.roomId).then(res => {
this.addFriends(this.nickShow)
this.joined = true
this.WebIM.updateMyProfile({
nick: this.nick,
avatar: this.faceUrl
}).then(() => {
console.log('im 个人信息更新成功');
}).catch((errr) => {
console.log('更新资料失败', err)
})
}).catch((err) => {
console.log('加入房间失败', err)
})
},
// 退出
leaveIm() {
vm.WebIM.quitGroup(vm.roomId)
},
//所有消息
onRecvMessage(msg) {
},
// 被踢出房间
onClassroomDestroy() {
},
// WebIm退出
quitClassroom() {
vm.WebIM.quitGroup().then(() => {
}).catch((error) => {
})
},
//销毁WebIm
destroyClassroom(classId, callback) {
vm.WebIM.destroyGroup(classId).then(data => {
// vm.ticWebRTC && vm.ticWebRTC.quit()
}).catch(error => {
})
},
}
}
\ No newline at end of file
...@@ -267,6 +267,9 @@ class RtcClient { ...@@ -267,6 +267,9 @@ class RtcClient {
// 在订阅远程流时触发 // 在订阅远程流时触发
this.client_.on('stream-subscribed', evt => { this.client_.on('stream-subscribed', evt => {
console.log('==============evt======================');
console.log(evt);
console.log('====================================');
const remoteStream = evt.stream; const remoteStream = evt.stream;
const id = remoteStream.getId(); const id = remoteStream.getId();
const uid = remoteStream.userId_; const uid = remoteStream.userId_;
...@@ -305,6 +308,9 @@ class RtcClient { ...@@ -305,6 +308,9 @@ class RtcClient {
if (!remoteStream.hasVideo()) { if (!remoteStream.hasVideo()) {
this.changeView(id, 'mask', true) this.changeView(id, 'mask', true)
} }
if (!remoteStream.hasAudio()) {
this.changeView(id, 'vioce', false)
}
}, 1000) }, 1000)
}); });
......
class ShareClient {
constructor(options) {
this.sdkAppId_ = options.sdkAppId;
this.userId_ = options.userId;
this.userSig_ = options.userSig;
this.roomId_ = options.roomId;
this.vueInstance = options.vueInstance;; //vue实例
this.isJoined_ = false;
this.isPublished_ = false;
this.localStream_ = null;
this.client_ = TRTC.createClient({
mode: 'live',
sdkAppId: this.sdkAppId_,
userId: this.userId_,
userSig: this.userSig_
});
//设置是否默认接收远端流。该方法可在 join() 调用前使用,若在进房后调用,会接收不到后续进房的远端用户音视频流。
this.client_.setDefaultMuteRemoteStreams(true);
this.handleEvents();
}
async join() {
// 如果已经加入时报错
if (this.isJoined_) {
// alert('共享失败,请稍后重试');
this.vueInstance.$message({
message: '共享失败,请稍后重试!',
type: 'error'
});
return;
}
try {
await this.client_.join({
roomId: this.roomId_
});
console.log('共享房间进入成功');
this.isJoined_ = true;
// 进入房间就创建共享本地流
this.localStream_ = TRTC.createStream({
// disable audio as RtcClient already enable audio
audio: false,
// enable screen share
screen: true,
userId: this.userId_,
});
// 设置视频分辨率等参数
this.localStream_.setScreenProfile({
width: this.vueInstance.viedoParams.screenProfileWidth,
height: this.vueInstance.viedoParams.screenProfileHeight,
frameRate: this.vueInstance.viedoParams.screenProfileFramerate,
bitrate: this.vueInstance.viedoParams.screenProfileBitrate /* kbps */
});
await this.publish()
return Promise.resolve();
} catch (e) {
console.error('ShareClient join room failed! ' + e);
}
}
// 发布本地流
async publish() {
if (!this.isJoined_) {
console.warn('共享屏幕请加入房间');
return;
}
if (this.isPublished_) {
console.warn('共享屏幕已经发布');
return;
}
try {
await this.stopPush()
try {
await this.localStream_.initialize()
} catch (error) {
throw new Error(error)
}
if (!this.vueInstance.canshare) {
this.vueInstance.$message({
message: '您当前不是主讲人,无屏幕分享权限!',
type: 'error'
});
this.leave();
return
}
// 监听播放状态 'PLAYING':开始播放 'PAUSED':暂停播放
this.localStream_.on('player-state-changed', event => {
console.log(`local stream ${event.type} player is ${event.state}`);
});
// // 监听屏幕分享结束
this.localStream_.on('screen-sharing-stopped', event => {
console.log('共享结束');
this.leave();
});
this.isPublished_ = true;
//创建共享屏幕div
var localVideoWrapEl = document.getElementById('share_video');
if (!localVideoWrapEl) {
localVideoWrapEl = document.createElement('div');
localVideoWrapEl.id = 'share_video';
document.querySelector("#paint_box").insertBefore(localVideoWrapEl, null);
}
if (localVideoWrapEl) {
// 本地流播放
await this.localStream_.play(localVideoWrapEl, {
muted: true,
objectFit: 'contain'
});
await this.client_.publish(this.localStream_);
this.showShare()
}
} catch (e) {
console.log('用户取消');
this.leave();
}
}
/**
* 结束推流
*/
async stopPush() {
if (this.localStream_ && this.isPublished_ && this.isJoined_) {
await this.client_.unpublish(this.localStream_);
this.isPublished_ = false;
if (document.getElementById('share_video')) {
document.getElementById('share_video').remove();
}
this.localStream_.close();
}
}
// 退出
async leave() {
if (!this.isJoined_) {
console.warn('leave() - please join() firstly');
return;
}
// 如果是正在发布流,就先停止流
if (this.isPublished_) {
await this.client_.unpublish(this.localStream_);
this.isPublished_ = false;
}
await this.client_.leave();
if (this.localStream_) {
this.localStream_.close();
this.localStream_ = null;
}
this.isShare = false;
this.isJoined_ = false;
this.hideShare()
}
handleEvents() {
this.client_.on('error', err => {
console.error(err);
this.leave();
// alert(err);
});
this.client_.on('client-banned', err => {
this.leave();
console.error('client has been banned for ' + err);
});
// 嘉宾加入房间时触发
this.client_.on('peer-join', evt => {
const userId = evt.userId;
console.log('嘉宾加入房间时触发 ' + userId);
});
// 嘉宾离开房间时触发
this.client_.on('peer-leave', evt => {
const userId = evt.userId;
console.log('嘉宾离开房间时触发' + userId);
});
// 在添加远程流时触发
this.client_.on('stream-added', evt => {
const remoteStream = evt.stream;
const id = remoteStream.getId();
const userId = remoteStream.getUserId();
console.log(`remote stream added: [${userId}] ID: ${id} type: ${remoteStream.getType()}`);
console.log(' 在添加远程流时触发');
});
// 在订阅远程流时触发
this.client_.on('stream-subscribed', evt => {
const uid = evt.userId;
const remoteStream = evt.stream;
const id = remoteStream.getId();
remoteStream.on('player-state-changed', event => {
console.log(`${event.type} player is ${event.state}`);
});
console.log('在订阅远程流时触发');
});
// 当远程流被移除时触发, e.g. the remote user called Client.unpublish()
this.client_.on('stream-removed', evt => {
const remoteStream = evt.stream;
const id = remoteStream.getId();
console.log(`stream-removed ID: ${id} type: ${remoteStream.getType()}`);
console.log('当远程流被移除时触发');
});
// 当远程流被更新时触发
this.client_.on('stream-updated', evt => {
const remoteStream = evt.stream;
console.log('当远程流被更新时触发');
});
this.client_.on('mute-audio', evt => {
console.log(evt.userId + ' mute audio');
});
this.client_.on('unmute-audio', evt => {
console.log(evt.userId + ' unmute audio');
});
this.client_.on('mute-video', evt => {
console.log(evt.userId + ' mute video');
});
this.client_.on('unmute-video', evt => {
console.log(evt.userId + ' unmute video');
});
}
// 显示分享屏幕div
showShare() {
if (this.vueInstance) {
this.vueInstance.isShare = true;
}
}
// 隐藏分享屏幕div
hideShare() {
if (this.vueInstance) {
this.vueInstance.isShare = false;
}
}
}
export default ShareClient
\ No newline at end of file
...@@ -63,8 +63,8 @@ export default { ...@@ -63,8 +63,8 @@ export default {
roleAnchor: 'anchor', // 主播 roleAnchor: 'anchor', // 主播
rtc: null, rtc: null,
roomId: 100000437, roomId: 100000437,
sdkAppId: 1400408299, sdkAppId: '',
userSig: "eJyrVgrxCdZLrSjILEpVsjI2NDU2MzAw0AGLlqUWKVkpGekZKEH4xSnZiQUFmSlKVoYmBgYmBhZGlpYQmcyU1LySzLRMsAZDAwgwtNA1BEEwx8TYHGZKZjpQka*HZ1igQYB2UGZoRkGJSWFOeqCzRZRTSKhvsKtZYnG6T355Rb6-U2VRer4tVGNJZi7QiYZmhmaWlhbmJka1APpwNHs_", userSig: "",
userId: "1000000018-1-1-100000437", userId: "1000000018-1-1-100000437",
viedoParams: null, viedoParams: null,
isMicOn: false, isMicOn: false,
...@@ -98,16 +98,16 @@ export default { ...@@ -98,16 +98,16 @@ export default {
type: '', type: '',
status: 1 status: 1
} }
] ],
tid: '', // 群id
diagnoseLogId: '' //问诊id
} }
}, },
async created() { created() {
this.tid = this.$route.query.tid || '';
this.diagnoseLogId = this.$route.query.diagnoseLogId || '';
openLoading(this) openLoading(this)
this.getViedoParams() this.init()
// await this.getInfo()
// await this.getAppId()
// await this.getSing()
// await this.clientLogin()
}, },
computed: { computed: {
title(){ title(){
...@@ -115,31 +115,78 @@ export default { ...@@ -115,31 +115,78 @@ export default {
} }
}, },
methods:{ methods:{
init() {
if(this.checkChrome()) {
this.getViedoParams()
this.getInfo()
} else {
this.$nextTick(() => {
this.$refs.alert.init({
confirmTxt: '我知道了',
title: `请下载新版Chrome浏览器`
})
.then(() => {
closeLoading(this)
this.$router.go(-1)
})
.catch((err) => {
closeLoading(this)
this.$router.go(-1)
})
})
}
},
// 获取相关信息
getInfo() { getInfo() {
let url = `/team-controller/team/detail`; let url = `/im/team/detail?tid=${this.tid}`;
this.GET(url).then(res => { this.GET(url).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
let { liveInfo, memberList } = res.data
if (liveInfo) {
this.startTime = liveInfo.startTimestamp
this.endTime = liveInfo.endTimestamp
this.roomId = liveInfo.roomId
this.type = liveInfo.liveType
}
if (memberList) {
memberList.forEach((item) => {
if (item.role == 1) {
this.memberList[0] = Object.assign(item,{status: 1})
}
if (item.role == 2) {
this.memberList[1] = Object.assign(item,{status: 1})
}
if (item.role == 2) {
this.userId = item.accId
}
})
}
this.getAppId()
} else {
this.getErr()
} }
}); }).catch(() => {
this.getErr()
})
}, },
// 获取AppId // 获取AppId
getAppId() { getAppId() {
let req = { let req = {
} }
this.GET("coupler/app/trtc/sdkappid", req) this.GET("/coupler/app/trtc/sdkappid", req)
.then(res => { .then(res => {
if (res.code == "000000") { if (res.code == "000000") {
this.sdkAppId = res.data.sdkAppId this.sdkAppId = res.data.sdkAppId
this.getSing()
}else if (res.code == '200006' || res.code == '200000') { }else if (res.code == '200006' || res.code == '200000') {
if(this.rtc) { if(this.rtc) {
this.leave() this.leave()
} }
this.$router.push(`/login?id=${this.id}`) this.getErr()
} }
}) })
.catch((err) => { .catch((err) => {
console.log(err); this.getErr()
}) })
}, },
// 获取签名 // 获取签名
...@@ -148,24 +195,23 @@ export default { ...@@ -148,24 +195,23 @@ export default {
sdkAppId: this.sdkAppId, sdkAppId: this.sdkAppId,
userId: this.userId userId: this.userId
} }
this.POST("coupler/usersig/trtc", req).then(res => { this.POST("/coupler/usersig/trtc", req).then(res => {
// closeLoading(vm);
if (res.code == "000000") { if (res.code == "000000") {
this.userSig = res.data.userSig this.userSig = res.data.userSig
this.clientLogin()
} else if (res.code == '200006' || res.code == '200000') { } else if (res.code == '200006' || res.code == '200000') {
closeLoading(this)
if(this.rtc) { if(this.rtc) {
this.leave() this.leave()
} }
this.$router.go(-1) this.getErr()
} }
}) })
.catch((err) => { .catch((err) => {
console.log(err); this.getErr()
}) })
}, },
// 创建trtcClient
clientLogin() { clientLogin() {
// 创建trtcClient
let obj = { let obj = {
roomId: this.roomId, roomId: this.roomId,
role: this.roleAnchor, role: this.roleAnchor,
...@@ -178,14 +224,23 @@ export default { ...@@ -178,14 +224,23 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.alert.init({ this.$refs.alert.init({
confirmTxt: '我知道了', confirmTxt: '我知道了',
title: `为了更好的体验请保证您输出设备的正常使用` title: `为了更好的体验,请保证您输出设备的正常使用`
}) })
.then(() => { .then(() => {
this.rtc.join() this.rtc.join()
this.ispending() this.ispending()
let t = setTimeout(() => {
closeLoading(this);
clearTimeout(t)
},1000)
}) })
.catch((err) => { .catch((err) => {
this.rtc.join() this.rtc.join()
this.ispending()
let t = setTimeout(() => {
closeLoading(this);
clearTimeout(t)
},1000)
}) })
}) })
}, },
...@@ -319,15 +374,53 @@ export default { ...@@ -319,15 +374,53 @@ export default {
// client离开房间 // client离开房间
leave() { leave() {
this.rtc.leave() this.rtc.leave()
this.$router.go(-1)
}, },
// 结束会话 // 结束会话
overFn() { overFn() {
let url = `/admin/diagnose/endCall/{diagnoseLogId}`; let url = `/diagnose/admin/diagnose/endCall`;
this.POST(url).then(res => { let params = {
diagnoseLogId: this.diagnoseLogId
};
this.POST(url,params).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
this.leave()
} else {
this.$refs.alert.init({
confirmTxt: '我知道了',
title: `操作失败,请稍后重试`
})
.then(() => {
})
.catch((err) => {
})
} }
}).catch(() => {
this.$refs.alert.init({
confirmTxt: '我知道了',
title: `操作失败,请稍后重试`
})
.then(() => {
})
.catch((err) => {
})
}); });
},
// 获取信息失败
getErr() {
closeLoading(this)
this.$nextTick(() => {
this.$refs.alert.init({
confirmTxt: '我知道了',
title: `获取信息失败,请稍后重试`
})
.then(() => {
this.$router.go(-1)
})
.catch((err) => {
this.$router.go(-1)
})
})
} }
}, },
destroyed() { destroyed() {
...@@ -405,11 +498,11 @@ export default { ...@@ -405,11 +498,11 @@ export default {
.main { .main {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
flex: 1; flex: 1;
.viedo-wrapper { .viedo-wrapper {
display: flex; display: flex;
width: 49%; width: 49%;
height: 90%; height: 50vh;
background: #2D2D2D; background: #2D2D2D;
&:first-of-type { &:first-of-type {
margin-right: 2%; margin-right: 2%;
...@@ -447,6 +540,7 @@ export default { ...@@ -447,6 +540,7 @@ export default {
} }
&> div { &> div {
height: 100%; height: 100%;
width: 100%;
video { video {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -489,7 +583,7 @@ export default { ...@@ -489,7 +583,7 @@ export default {
color: #FFFFFF; color: #FFFFFF;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
margin: 0 auto 6%; margin: 15px auto 6%;
cursor: pointer; cursor: pointer;
} }
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册