add 10 stream
This commit is contained in:
parent
d8d8b04f9e
commit
43e68d48aa
@ -4,9 +4,15 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import url('http://at.alicdn.com/t/font_1857388_u76j431l9gp.css');
|
||||
@import "./assets/css/reset.scss";
|
||||
@import url('https://at.alicdn.com/t/font_1857388_u76j431l9gp.css');
|
||||
@import "@/assets/css/reset.scss";
|
||||
#app{
|
||||
height: 100%;
|
||||
background: rgb(75,75,75);
|
||||
|
||||
@ -58,7 +58,8 @@
|
||||
</div>
|
||||
<div v-else class="type">
|
||||
<span class="statu-circle"></span>
|
||||
<span>{{playVariables.type}}</span>
|
||||
<span> </span>
|
||||
<!-- <span>{{playVariables.type}}</span> -->
|
||||
</div>
|
||||
<div @click="changeFullscreenStatu()" class="fullscreen">
|
||||
<i class="iconfont icon-quanping"></i>
|
||||
@ -362,7 +363,6 @@ export default {
|
||||
|
||||
// Load and start playing the WHEP URL
|
||||
try {
|
||||
console.log(this.option.source.url)
|
||||
player.load(new URL(this.option.source.url))
|
||||
player.on('waiting', () => {
|
||||
console.error('waiting:');
|
||||
@ -582,19 +582,31 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vr-video {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
z-index: 1000;
|
||||
|
||||
.video-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
// min-height: 300px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
.control {
|
||||
@ -604,6 +616,11 @@ export default {
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.control-hidden {
|
||||
@ -871,8 +888,6 @@ export default {
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// transform-origin: top left;
|
||||
// transform: rotate(90deg) translate(-0vh, -100vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ const routes = [
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
mode: 'hash',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
<template>
|
||||
<div class="vr-live">
|
||||
<p>{{opt.source.src}}</p>
|
||||
<div class="controls">
|
||||
<div class="url-selector">
|
||||
<select v-model="opt.source.url">
|
||||
<option v-for="(url, index) in streamUrls" :key="index" :value="url.value">
|
||||
{{ url.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<p>{{opt.source.src}}</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
<vr-live :option="opt"></vr-live>
|
||||
<vr-live :option="opt" :key="componentKey"></vr-live>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,6 +24,49 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
componentKey: 0, // 添加一个key来控制组件重新渲染
|
||||
streamUrls: [
|
||||
{
|
||||
label: 'Stream1',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream1'
|
||||
},
|
||||
{
|
||||
label: 'Stream2',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream2'
|
||||
},
|
||||
{
|
||||
label: 'Stream3',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream3'
|
||||
},
|
||||
{
|
||||
label: 'Stream4',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream4'
|
||||
},
|
||||
{
|
||||
label: 'Stream5',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream5'
|
||||
},
|
||||
{
|
||||
label: 'Stream6',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream6'
|
||||
},
|
||||
{
|
||||
label: 'Stream7',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream7'
|
||||
},
|
||||
{
|
||||
label: 'Stream8',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream8'
|
||||
},
|
||||
{
|
||||
label: 'Stream9',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream9'
|
||||
},
|
||||
{
|
||||
label: 'Stream10',
|
||||
value: 'https://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream10'
|
||||
}
|
||||
],
|
||||
opt: {
|
||||
statistics: false, // 统计信息
|
||||
source: {
|
||||
@ -34,38 +85,111 @@ export default {
|
||||
http://localhost:9001/live/wwt.flv
|
||||
http://localhost:9001/live/wwt/index.m3u8
|
||||
*/
|
||||
// url: 'https://www.ashenone.tk/public/video/1.mp4'
|
||||
// url: 'http://localhost:8080/live/livestream.flv'
|
||||
url: 'http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream'
|
||||
url: 'http://rtc.vr.testtool.online:1985/rtc/v1/whep/?app=live&stream=livestream1'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'opt.source.url': {
|
||||
handler(newUrl) {
|
||||
// 根据URL自动设置对应的type
|
||||
if (newUrl.endsWith('.mp4')) {
|
||||
this.opt.source.type = 'normal'
|
||||
} else if (newUrl.endsWith('.m3u8')) {
|
||||
this.opt.source.type = 'hls'
|
||||
} else if (newUrl.endsWith('.flv')) {
|
||||
this.opt.source.type = 'flv'
|
||||
} else if (newUrl.includes('whep')) {
|
||||
this.opt.source.type = 'whep'
|
||||
}
|
||||
|
||||
// 增加componentKey强制vr-live组件重新渲染
|
||||
this.componentKey += 1
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vr-live{
|
||||
.vr-live {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.container{
|
||||
margin: 80px auto 0 auto;
|
||||
padding: 15px;
|
||||
width: 70vw;
|
||||
height: calc(70vw / 16 * 9);
|
||||
background: rgba(125,125,125,1);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 2000;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 10px 0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.url-selector {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2001;
|
||||
|
||||
select {
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 2002;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
option {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin: 10px 0 0 0;
|
||||
position: relative;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 15px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(125,125,125,1);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.container{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
height: calc(100vw / 16 * 9);
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
.controls {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.url-selector select {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -70,11 +70,35 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.webrtc-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
z-index: 1000;
|
||||
|
||||
.video-js {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏视频控件的边框 */
|
||||
:deep(.vjs-default-skin) {
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* 确保视频元素本身没有边框 */
|
||||
video {
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@ module.exports = {
|
||||
open: true,
|
||||
openPage: '',
|
||||
host: '0.0.0.0',
|
||||
port: 8081,
|
||||
port: 8080,
|
||||
https: false,
|
||||
proxy: null, // 设置代理
|
||||
before: app => {}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user