共享屏幕

This commit is contained in:
gyj
2024-04-22 10:23:32 +08:00
parent ca09c2fb0f
commit eeb3ae6e1c
4 changed files with 114 additions and 90 deletions
+4 -4
View File
@@ -32,17 +32,17 @@ export function reserveConferenceList(caseId) {
} }
//根据id查询密文信息 //根据id查询密文信息
export function getEncryptInfoByid(caseId) { export function getEncryptInfoByid(caseId) {
return axios.get(`${baseUrl}/shortMessage/getMeetingInfo?authId=${caseId}`); return axios.get(`tiaojie/shortMessage/getMeetingInfo?authId=${caseId}`);
} }
// 案件列表 // 案件列表
export function caseApplicationList(param) { export function caseApplicationList(param) {
return axios.get(`${baseUrl}/caseApplication/list?caseId=${param}`); return axios.get(`tiaojie/caseApplication/list?caseId=${param}`);
} }
// 签收案件 // 签收案件
export function msCaseSign(data) { export function msCaseSign(data) {
return axios.post(`${baseUrl}/mssignSeal/msCaseSign`, data); return axios.post(`tiaojie/mssignSeal/msCaseSign`, data);
} }
//根据案件id获取附件 //根据案件id获取附件
export function fileList(caseAppliId,annexTypeList) { export function fileList(caseAppliId,annexTypeList) {
return axios.get(`${baseUrl}/common/fileList?caseAppliId=${caseAppliId}&annexTypeList=${annexTypeList}`); return axios.get(`tiaojie/common/fileList?caseAppliId=${caseAppliId}&annexTypeList=${annexTypeList}`);
} }
+2 -2
View File
@@ -41,7 +41,7 @@
@click="videoClickOff" @click="videoClickOff"
/> />
</div> </div>
<!-- <div class="sharing"> <div class="sharing">
<img <img
class="sharImg" class="sharImg"
src="@/assets/screenShare_on.png" src="@/assets/screenShare_on.png"
@@ -56,7 +56,7 @@
v-else v-else
@click="sharClickOff" @click="sharClickOff"
/> />
</div> --> </div>
</div> </div>
</div> </div>
</template> </template>
+107 -83
View File
@@ -7,7 +7,11 @@
> >
</div> </div>
<div class="content"> <div class="content">
<div class="screenShare" v-if="screenShareFlag"></div> <div
class="screenShare"
id="screenShare"
v-show="screenShareFlag"
></div>
<div :class="videoList"> <div :class="videoList">
<div :class="videoClass" id="localStream"> <div :class="videoClass" id="localStream">
@@ -47,7 +51,12 @@
<div :class="userClassPhone" id="localStream"> <div :class="userClassPhone" id="localStream">
<div class="userNamePhone">{{ userId }}</div> <div class="userNamePhone">{{ userId }}</div>
</div> </div>
<div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item"> <div
:class="userClassPhone"
v-for="(item, index) in userList"
:key="index"
:id="item"
>
<div class="userNamePhone">{{ item }}</div> <div class="userNamePhone">{{ item }}</div>
</div> </div>
</div> </div>
@@ -55,7 +64,8 @@
<!-- 语音转文字弹窗 --> <!-- 语音转文字弹窗 -->
<el-drawer title="会议内容" :visible.sync="textVisible" :modal="false"> <el-drawer title="会议内容" :visible.sync="textVisible" :modal="false">
<div style="margin-left: 20px; margin-bottom: 10px"> <div style="margin-left: 20px; margin-bottom: 10px">
<div style=" <div
style="
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@@ -65,7 +75,7 @@
<el-upload <el-upload
ref="upload" ref="upload"
:limit="1" :limit="1"
action="https://api.xayunmei.com/tiaojieapitest/video/upload" :action="UploadUrl()"
:headers="headers" :headers="headers"
:data="filedata" :data="filedata"
:on-change="beforeUpload" :on-change="beforeUpload"
@@ -77,11 +87,12 @@
>申请人上传证据</el-button >申请人上传证据</el-button
> >
</el-upload> </el-upload>
<!-- https://api.xayunmei.com/tiaojieapitest/video/upload -->
<el-upload <el-upload
v-if="resFlag" v-if="resFlag"
ref="upload1" ref="upload1"
:limit="1" :limit="1"
action="https://api.xayunmei.com/tiaojieapitest/video/upload" :action="UploadUrl()"
:headers="headers1" :headers="headers1"
:data="filedata1" :data="filedata1"
:on-change="beforeUpload1" :on-change="beforeUpload1"
@@ -96,8 +107,7 @@
v-if="updataFlag" v-if="updataFlag"
ref="upload3" ref="upload3"
:limit="1" :limit="1"
action="" :action="UploadUrl()"
:http-request="upload3"
:headers="headers3" :headers="headers3"
:data="filedata3" :data="filedata3"
:on-change="beforeUpload3" :on-change="beforeUpload3"
@@ -109,7 +119,6 @@
>上传调解书</el-button >上传调解书</el-button
> >
</el-upload> </el-upload>
<!-- https://api.xayunmei.com/tiaojieapitest/video/upload -->
</div> </div>
<div class="list"> <div class="list">
<div class="applicant" v-if="applicantFile.length > 0"> <div class="applicant" v-if="applicantFile.length > 0">
@@ -147,9 +156,21 @@
</div> </div>
</div> </div>
</div> </div>
<quill-editor ref="myQuillEditor" v-model="contentValue" :options="editorOption" @blur="onEditorBlur($event)" <quill-editor
@focus="onEditorFocus($event)" @ready="onEditorReady($event)"></quill-editor> ref="myQuillEditor"
<el-button class="updataBtn" @click="updataClick" type="primary" :disabled="!updataFlag">确认修改内容</el-button> v-model="contentValue"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
></quill-editor>
<el-button
class="updataBtn"
@click="updataClick"
type="primary"
:disabled="!updataFlag"
>确认修改内容</el-button
>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
@@ -162,7 +183,7 @@ import {
selectById, selectById,
selectRoleMenuByCaseId, selectRoleMenuByCaseId,
getMenuPermsByUser, getMenuPermsByUser,
videoUpload videoUpload,
} from "@/api/room"; } from "@/api/room";
import { getWidth, getHeight, getWidthPhone, getModile } from "@/utils/utils"; import { getWidth, getHeight, getWidthPhone, getModile } from "@/utils/utils";
import roomFooter from "./components/roomFooter.vue"; import roomFooter from "./components/roomFooter.vue";
@@ -247,6 +268,9 @@ export default {
}; };
}, },
methods: { methods: {
UploadUrl() {
return window.location.origin + "/tiaojie/video/upload";
},
/**点击开启麦克风图标,关闭麦克风 */ /**点击开启麦克风图标,关闭麦克风 */
micClickOn() { micClickOn() {
trtc.updateLocalAudio({ mute: true }).then(() => { trtc.updateLocalAudio({ mute: true }).then(() => {
@@ -288,24 +312,28 @@ export default {
}); });
}, },
/**共享屏幕 */ /**共享屏幕 */
sharClickOn() { async sharClickOn() {
this.sharFlag = false; // this.videoList = "videoList1";
this.videoList = "videoList1"; // this.videoClass = "videoItem2";
this.videoClass = "videoItem2"; // this.screenShareFlag = true;
this.screenShareFlag = true; await trtc.startScreenShare().then(() => {
this.sharFlag = false;
});
}, },
/**关闭共享屏幕 */ /**关闭共享屏幕 */
sharClickOff() { sharClickOff() {
this.sharFlag = true; trtc.stopScreenShare().then(() => {
this.videoList = "videoList"; this.sharFlag = true;
this.screenShareFlag = false; this.videoList = "videoList";
if (this.userList.length > 1) { this.screenShareFlag = false;
this.videoClass = "videoItem1"; if (this.userList.length > 1) {
} else if (this.userList.length < 1) { this.videoClass = "videoItem1";
this.videoClass = "videoItem"; } else if (this.userList.length < 1) {
} else if (this.userList.length == 1) { this.videoClass = "videoItem";
this.videoClass = "videoItem3"; } else if (this.userList.length == 1) {
} this.videoClass = "videoItem3";
}
});
}, },
/**获取当前用户操作权限 */ /**获取当前用户操作权限 */
getMenuPermsByUserFn() { getMenuPermsByUserFn() {
@@ -360,28 +388,6 @@ export default {
this.$refs.upload3.clearFiles(); this.$refs.upload3.clearFiles();
this.selectByIdFn(this.caseId); this.selectByIdFn(this.caseId);
}, },
upload3(param){
const formData = new FormData()
formData.append('file', param.file);
formData.append('annexType', 7);
formData.append('officeFlag', 1);
formData.append('caseId', this.caseId);
videoUpload(formData).then(res=>{
console.log('上传图片成功')
})
// axios.post(url, formData).then(response => {
// //根据返回值进行判断是否上传成功
// if(response.data.flag){
// //上传成功
// console.log('上传图片成功')
// }else{
// //上传失败
// console.log('图片上传失败')
// }
// }).catch(response => {
// console.log('异常处理')
// })
},
preview(item, flag) { preview(item, flag) {
if (item.onlyOfficeFileId) { if (item.onlyOfficeFileId) {
// this.$router.push({ // this.$router.push({
@@ -389,20 +395,18 @@ export default {
// query: { id: item.onlyOfficeFileId, flag: flag }, // query: { id: item.onlyOfficeFileId, flag: flag },
// }); // });
let flag = 1; let flag = 1;
if(this.editFlag){ if (this.editFlag) {
flag = 1 flag = 1;
}else{ } else {
flag = 0 flag = 0;
} }
let token = sessionStorage.getItem('token')
window.open( window.open(
`http://121.40.189.20:8002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}`, `http://121.40.189.20:8002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
"_black" "_black"
); );
} else { } else {
window.open( window.open(window.location.origin + item.annexPath, "_black");
"http://121.40.189.20:6001" + item.annexPath,
"_black"
);
} }
}, },
// 点击提交修改后的内容 // 点击提交修改后的内容
@@ -465,7 +469,7 @@ export default {
} else if (item.annexType == 12) { } else if (item.annexType == 12) {
this.resFile.push(item); this.resFile.push(item);
} else if (item.annexType == 7) { } else if (item.annexType == 7) {
this.mediateFile.push(item) this.mediateFile.push(item);
} }
}); });
}); });
@@ -496,7 +500,17 @@ export default {
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, (event) => { trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, (event) => {
const userId = event.userId; const userId = event.userId;
const streamType = event.streamType; const streamType = event.streamType;
this.userList.push(userId); if (streamType == "main") {
this.userList.push(userId);
setTimeout(() => {
trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
});
} else if (streamType == "main") {
trtc.startRemoteVideo({ userId, streamType, view: "screenShare" });
this.videoList = "videoList1";
this.videoClass = "videoItem2";
this.screenShareFlag = true;
}
setTimeout(() => { setTimeout(() => {
let aoido = trtc.getAudioTrack(userId); let aoido = trtc.getAudioTrack(userId);
this.asrList[this.userList[this.userList.length - 1]] = new ASR({ this.asrList[this.userList[this.userList.length - 1]] = new ASR({
@@ -530,38 +544,48 @@ export default {
`<span>${res.result.voice_text_str}</span>`; `<span>${res.result.voice_text_str}</span>`;
}; };
}, 2000); }, 2000);
setTimeout(() => {
trtc.startRemoteVideo({ userId, streamType, view: `${userId}` });
});
// }) // })
}); });
}, },
// 删除退出会议人员列表 // 删除退出会议人员列表
deletePushVideo() { deletePushVideo() {
trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => { trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, (event) => {
const streamType = event.streamType;
const userId = event.userId; const userId = event.userId;
if (this.hostId == userId) { if (streamType == "main") {
alert("主持人已经解散会议"); if (this.hostId == userId) {
this.$router.push({ alert("主持人已经解散会议");
name: "Home", this.$router.push({
name: "Home",
});
this.userList = [];
return;
}
let deleteIndex = this.userList.indexOf(userId);
this.userList = this.userList.filter((item) => item !== userId);
if (deleteIndex !== -1) {
this.userList.splice(deleteIndex, 1);
}
if (this.modileFlag) {
// this.userHeight = getHeight(this.userList);
} else {
this.userClassPhone = getWidthPhone(this.userList);
}
Object.keys(this.asrList).forEach((key) => {
this.asrList[userId].stop();
}); });
this.userList = []; } else if (streamType == "sub") {
return; this.sharFlag = true;
this.videoList = "videoList";
this.screenShareFlag = false;
if (this.userList.length > 1) {
this.videoClass = "videoItem1";
} else if (this.userList.length < 1) {
this.videoClass = "videoItem";
} else if (this.userList.length == 1) {
this.videoClass = "videoItem3";
}
} }
let deleteIndex = this.userList.indexOf(userId);
this.userList = this.userList.filter((item) => item !== userId);
if (deleteIndex !== -1) {
this.userList.splice(deleteIndex, 1);
}
if (this.modileFlag) {
// this.userHeight = getHeight(this.userList);
} else {
this.userClassPhone = getWidthPhone(this.userList);
}
Object.keys(this.asrList).forEach((key) => {
this.asrList[userId].stop();
});
}); });
}, },
// 根据caseId查询房间相关信息 // 根据caseId查询房间相关信息
+1 -1
View File
@@ -8,7 +8,7 @@ module.exports = defineConfig({
changeOrigin: true, // 是否改变Origin头信息 changeOrigin: true, // 是否改变Origin头信息
secure : false, secure : false,
pathRewrite: { pathRewrite: {
'^/api': '' // 将/api前缀重写为空字符串 '^/tiaojie': '' // 将/api前缀重写为空字符串
}, },
}, },
'/zhongcai': { '/zhongcai': {