2023年4月22日 修改课堂直播
This commit is contained in:
parent
5ed108a14d
commit
be4f347470
|
@ -168,5 +168,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script type="text/javascript" src="/resource/js/webrtc/adapter.min.js"></script>
|
||||
<script type="text/javascript" src="/resource/js/webrtc/webrtcstreamer.js"></script>
|
||||
<!-- <script type="module" src="/resource/js/webrtc/adapter.min.js"></script>
|
||||
<script type="module" src="/resource/js/webrtc/webrtcstreamer.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -16,7 +16,37 @@
|
|||
<!-- document.querySelector('.ant-layout .jeecg-default-layout-main > div').style.height -->
|
||||
</a-col>
|
||||
<a-col :span="20">
|
||||
<bVideo ref="bVideoMainRef" :videoOption="{ autoPlay: true }" :videoKey="'main'+currentItem.id"/>
|
||||
<!-- <a-row> -->
|
||||
<!-- <a-col :span="12" v-if="currentItem?.child?.录播主机">
|
||||
<div>{{ currentItem?.child?.录播主机?.xm }}</div>
|
||||
<bVideo :ref="el=> bVideoRefs['main']=el" :videoOption="{ autoPlay: true }" :videoKey="'main'"/>
|
||||
</a-col> -->
|
||||
<!-- <a-col :span="12">
|
||||
<a-row>
|
||||
<a-col v-for="(item,index) of calcOtherVideo()" :span="12">
|
||||
<div>{{ index }}</div>
|
||||
<bVideo :ref="el=> bVideoRefs[index]=el" :videoOption="{ autoPlay: true }" :videoKey="'other-'+item.id"/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col> -->
|
||||
<!-- <a-col v-for="(item,index) of calcOtherVideo()" :span="4">
|
||||
</a-col> -->
|
||||
<!-- <a-col :span="4"> -->
|
||||
<!-- <bVideo ref="bVideoLeftRef" :videoOption="{ autoPlay: true }" :videoKey="'left-'+currentItem?.child?.学生定位?.id"/> -->
|
||||
<!-- </a-col> -->
|
||||
<!-- </a-row> -->
|
||||
<div>
|
||||
|
||||
|
||||
<video id="mainVideo" v-bind="videoOption" style="width:100%" @click.prevent.stop></video>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;">
|
||||
<div v-for="(item,index) of calcOtherVideo()" class="videoMax">
|
||||
<a-card :title="item?.xm" style="width: 300px" class="videoCardMain">
|
||||
<bVideo :ref="el=> bVideoRefs[index]=el" :videoOption="{ autoPlay: true, onClick: bVideoClick }" :videoKey="'other-'+item.id"/>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
@ -54,10 +84,11 @@
|
|||
import type { MenuProps } from 'ant-design-vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useMessage } from "/@/hooks/web/useMessage";
|
||||
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
|
||||
import { ref, onMounted, onBeforeUnmount, reactive, computed, VideoHTMLAttributes } from 'vue';
|
||||
import bVideo from '/@/views/site/common/webRTC/video.vue';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
const bVideoMainRef = ref();
|
||||
const bVideoRefs = <any>ref([]);
|
||||
const _document = window.document;
|
||||
// const bVideoLeftRef = ref();
|
||||
|
||||
|
@ -65,9 +96,45 @@ const leftList = <any>ref([]);
|
|||
const currentItem = <any>ref({});
|
||||
const topWidth = <any>ref('0');
|
||||
|
||||
const videoOption = reactive({
|
||||
// width: '800', //播放器高度
|
||||
// height: '450', //播放器高度
|
||||
color: "#409eff", //主题色
|
||||
title: '', //视频名称
|
||||
//src: "https://go.dreamwq.com/videos/IronMan.mp4", //视频源
|
||||
muted: true, //静音
|
||||
playsinline: true,
|
||||
webFullScreen: false,
|
||||
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
|
||||
autoPlay: false, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
controls: true, //是否显示控制器
|
||||
});
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
list({ pageSize: -1 }).then(res => {
|
||||
leftList.value = (res?.records) ?? [];
|
||||
list({ pageSize: -1, sfyx: '0' }).then(res => {
|
||||
let list = (res?.records) ?? [];
|
||||
//聚合
|
||||
let map = {};
|
||||
list.forEach(x => {
|
||||
let item = map[x.jsmc];
|
||||
if(item){
|
||||
item.child[x.xm] = x;
|
||||
}else{
|
||||
let child = {};
|
||||
child[x.xm] = x;
|
||||
map[x.jsmc] = {
|
||||
...x,
|
||||
child
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
leftList.value = Object.values(map);
|
||||
topWidth.value = _document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0';
|
||||
// console.log(_document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0')
|
||||
});
|
||||
|
@ -97,19 +164,94 @@ const titleClick = (e: Event, item: any) => {
|
|||
};
|
||||
|
||||
function playerVideo(item){
|
||||
bVideoMainRef.value.connectFn(item.ip);
|
||||
nextTick(() => {
|
||||
|
||||
//changshang == 奥威亚
|
||||
// bVideoMainRef.value.connectFn(item.ip);
|
||||
//bVideoMainRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external');
|
||||
// bVideoLeftRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external');
|
||||
|
||||
//rtsp://admin:admin@10.250.116.235:8554/live
|
||||
console.log('bVideoRefs ->',bVideoRefs,Object.values(bVideoRefs.value));
|
||||
|
||||
(Object.values(bVideoRefs.value)).forEach((x: any) => {
|
||||
|
||||
console.log(`🚀 ----------------------------------------------🚀`);
|
||||
console.log(`🚀 ~ file: index.vue:148 ~ playerVideo ~ x:`, x);
|
||||
console.log(`🚀 ----------------------------------------------🚀`);
|
||||
// x.connectFn('rtsp://admin:admin@10.250.116.235:8554/live','external')
|
||||
// if(Number(Number(Math.random()).toFixed(1))*10 >= 5){
|
||||
// x.connectFn('rtsp://127.0.0.1:8554/video','external');
|
||||
// }else{
|
||||
// x.connectFn(`rtsp://${x.ip}/live`,'external')
|
||||
// }
|
||||
// return;
|
||||
if(x.changshang == '奥威亚'){
|
||||
x.connectFn(`rtsp://${x.ip}/stream/0?config.login=web`,'external')
|
||||
}else if(x.changshang == '卓智'){
|
||||
x.connectFn(`rtsp://${x.ip}/live`,'external')
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
switchVideoToMain();
|
||||
},1000);
|
||||
})
|
||||
//bVideoRefs['main'].connectFn('rtsp://admin:admin@10.250.116.235:8554/live','external');
|
||||
}
|
||||
|
||||
function calcOtherVideo() :any{
|
||||
if(!currentItem.value.child) return {};
|
||||
let map = {};
|
||||
Object.keys(currentItem.value.child).forEach(key => {
|
||||
// if(key != '录播主机' && key.indexOf('音频处理器') ==-1){
|
||||
map[key] = currentItem.value.child[key];
|
||||
// }
|
||||
});
|
||||
return map;
|
||||
}
|
||||
|
||||
function switchVideoToMain(){
|
||||
|
||||
console.log(`🚀 ------------------------------------------------------------------------------------🚀`);
|
||||
console.log(`🚀 ~ file: index.vue:188 ~ switchVideoToMain ~ switchVideoToMain:`);
|
||||
console.log(`🚀 ------------------------------------------------------------------------------------🚀`);
|
||||
|
||||
nextTick(() => {
|
||||
let mainVideo = <HTMLVideoElement> document.querySelector('#mainVideo');
|
||||
let firstVideo = <HTMLVideoElement> document.querySelector('.videoMax video');
|
||||
mainVideo.srcObject = firstVideo.srcObject
|
||||
mainVideo.play();
|
||||
});
|
||||
}
|
||||
|
||||
function bVideoClick(e){
|
||||
let mainVideo = <HTMLVideoElement> document.querySelector('#mainVideo');
|
||||
let currentVideo = <HTMLVideoElement> e.srcElement;
|
||||
mainVideo.srcObject = currentVideo.srcObject
|
||||
mainVideo.play();
|
||||
}
|
||||
|
||||
|
||||
//页面销毁时销毁webRtc
|
||||
onBeforeUnmount(() => {
|
||||
bVideoMainRef.value.closeWebRtcStreamerFn();
|
||||
bVideoRefs.value.forEach(x => {
|
||||
x.closeWebRtcStreamerFn();
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.videoMax{
|
||||
width: 300px;
|
||||
}
|
||||
.videoCardMain {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
/* 隐藏video 进度条 */
|
||||
video::-webkit-media-controls-timeline {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
|
@ -3,7 +3,7 @@
|
|||
<div @click="onPlay2">点击开始播放(连接)直播2</div> -->
|
||||
<!-- <div>{{ route.query.url }}</div> -->
|
||||
<!-- <span>播放地址:{{ path }}</span> -->
|
||||
<video :id="props.videoKey" v-bind="videoOption"></video>
|
||||
<video :id="props.videoKey" v-bind="videoOption" @click.prevent.stop></video>
|
||||
|
||||
<!-- <video id="video" muted="" playsinline="" controls="" style="opacity: 1;"></video> -->
|
||||
</template>
|
||||
|
@ -64,10 +64,10 @@ function closeWebRtcStreamerFn(){
|
|||
}
|
||||
|
||||
function connectFn(url:string,type?){
|
||||
let _path = `rtsp://${url}/stream/0?config.login=web`;
|
||||
if(type == 'external'){
|
||||
_path = url;
|
||||
}
|
||||
// let _path = `rtsp://${url}/stream/0?config.login=web`;
|
||||
// if(type == 'external'){
|
||||
// }
|
||||
let _path = url;
|
||||
path.value = _path;
|
||||
connect(webRtcServer.value,path.value);
|
||||
return webRtcServer.value;
|
||||
|
@ -112,4 +112,8 @@ video {
|
|||
//position: relative;
|
||||
background: grey;
|
||||
}
|
||||
/* 隐藏video 进度条 */
|
||||
video::-webkit-media-controls-timeline {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue