298 lines
8.7 KiB
Vue
298 lines
8.7 KiB
Vue
<template>
|
||
<div class="liveing">
|
||
<a-breadcrumb separator=">">
|
||
<a-breadcrumb-item>Home</a-breadcrumb-item>
|
||
<a-breadcrumb-item href=""> Application Center </a-breadcrumb-item>
|
||
<a-breadcrumb-item href=""> Application List </a-breadcrumb-item>
|
||
<a-breadcrumb-item>An Application</a-breadcrumb-item>
|
||
</a-breadcrumb>
|
||
<div class="top">
|
||
<div class="left">直播页面</div>
|
||
<div class="right">
|
||
<img src="@/static/images/liveshare.png" alt="" @click="fenxiang()" />
|
||
<img src="@/static/images/liveend.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<LiveingWatcher></LiveingWatcher>
|
||
<div class="LivePlaying">
|
||
<LivePlaying></LivePlaying>
|
||
<div class="comment">
|
||
<div class="commentitem">
|
||
<span>13:32:30</span>
|
||
<span class="name"> Andy ： </span>
|
||
<span> 老师，这个部分可以讲的慢一些吗？ </span>
|
||
</div>
|
||
<div class="commentitem">
|
||
<span>13:32:30</span>
|
||
<span class="name"> Andy ： </span>
|
||
<span> 老师，这个部分可以讲的慢一些吗？ </span>
|
||
</div>
|
||
<div class="commentitem">
|
||
<span>13:32:30</span>
|
||
<span class="name"> Andy ： </span>
|
||
<span> 老师，这个部分可以讲的慢一些吗？ </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="others">
|
||
<div class="othersitem">
|
||
<div class="watcher"></div>
|
||
<div class="name">asdsada</div>
|
||
<img src="" alt="" />
|
||
</div>
|
||
<div class="othersitem">
|
||
<div class="watcher"></div>
|
||
<div class="name">asdsada</div>
|
||
<img src="" alt="" />
|
||
</div>
|
||
<div class="othersitem">
|
||
<div class="watcher"></div>
|
||
<div class="name">asdsada</div>
|
||
<img src="" alt="" />
|
||
</div>
|
||
<div class="othersitem">
|
||
<div class="watcher"></div>
|
||
<div class="name">asdsada</div>
|
||
<img src="" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style lang="scss" scoped>
|
||
.liveing ::v-deep(.ant-breadcrumb) > span:last-child {
|
||
color: #08ae98;
|
||
}
|
||
.liveing {
|
||
width: 1320px;
|
||
height: 563px;
|
||
.top {
|
||
width: 1321px;
|
||
height: 57px;
|
||
background: white;
|
||
border-radius: 18px;
|
||
margin-top: 23px;
|
||
margin-bottom: 29px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #121212;
|
||
font-size: 13px;
|
||
align-items: center;
|
||
.left {
|
||
margin-left: 40px;
|
||
font-weight: bold;
|
||
}
|
||
.right {
|
||
margin-right: 27px;
|
||
> img {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
.info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.LivePlaying {
|
||
border-radius: 18px;
|
||
margin: 0 35px;
|
||
.comment {
|
||
width: 797px;
|
||
height: 153px;
|
||
background: white;
|
||
border-radius: 18px;
|
||
margin-top: 29px;
|
||
padding: 30px;
|
||
font-size: 12px;
|
||
|
||
color: #121212;
|
||
|
||
.commentitem {
|
||
margin-bottom: 17px;
|
||
.name {
|
||
margin-left: 28px;
|
||
color: #08ae98;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.liveinfo {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 58px;
|
||
align-items: center;
|
||
.left {
|
||
display: flex;
|
||
color: #121212;
|
||
font-size: 13px;
|
||
margin-left: 29px;
|
||
> div {
|
||
margin-right: 57px;
|
||
}
|
||
.icon {
|
||
width: 25px;
|
||
height: 24px;
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
.right {
|
||
width: 74px;
|
||
height: 29px;
|
||
border: 1px solid #08ae98;
|
||
border-radius: 3px;
|
||
margin-right: 29px;
|
||
color: #08ae98;
|
||
font-size: 13px;
|
||
line-height: 29px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.others {
|
||
width: 252px;
|
||
height: 630px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.othersitem {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 132px;
|
||
margin-bottom: 35px;
|
||
.watcher {
|
||
width: 228px;
|
||
height: 29px;
|
||
background: #000000;
|
||
color: white;
|
||
position: absolute;
|
||
opacity: 0.1;
|
||
border-radius: 18px 18px 0px 0px;
|
||
top: 0;
|
||
}
|
||
> img {
|
||
width: 228px;
|
||
height: 132px;
|
||
border-radius: 18px;
|
||
}
|
||
.name {
|
||
position: absolute;
|
||
top: 9px;
|
||
left: 28px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<script lang="ts">
|
||
import { defineComponent, onMounted } from "vue";
|
||
import LivePlaying from "@/components/LivePlaying.vue";
|
||
import LiveingWatcher from "@/components/LiveingWatcher.vue";
|
||
import TRTC from "trtc-js-sdk"
|
||
import { usersig } from '@/api';
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
LivePlaying,
|
||
LiveingWatcher,
|
||
},
|
||
setup() {
|
||
console.log(1);
|
||
let client: any;
|
||
let localStream: any;
|
||
let statie = true;
|
||
let userSing = '';
|
||
onMounted(async ()=>{
|
||
userSing = await usersig(10);
|
||
|
||
init(pingmu, userSing);
|
||
|
||
})
|
||
function fenxiang(){
|
||
console.log(localStream)
|
||
|
||
|
||
// client.unpublish(localStream).then(() => {
|
||
// // 关闭屏幕分享流
|
||
// console.log("关闭")
|
||
// client.leave().then(() => {
|
||
// // leaving room success
|
||
// console.log("关闭成功")
|
||
// }).catch((error: string) => {
|
||
// console.error('leaving room failed: ' + error);
|
||
// });
|
||
// });
|
||
init(statie ? shexiang : pingmu, userSing);
|
||
statie = !statie;
|
||
}
|
||
function init(fun: any, userSig: string){
|
||
console.log(userSig)
|
||
const el = document.querySelector("#local_stream");
|
||
if(el){
|
||
el.innerHTML = ""
|
||
}
|
||
client = TRTC.createClient({
|
||
mode: 'rtc',
|
||
sdkAppId: '1400400340',
|
||
userId: 10,
|
||
userSig: userSig
|
||
});
|
||
client
|
||
.join({ roomId: 11 })
|
||
.catch((error: string) => {
|
||
console.error('进房失败 ' + error);
|
||
})
|
||
.then(() => {
|
||
console.log('进房成功');
|
||
fun()
|
||
});
|
||
}
|
||
function pingmu(){
|
||
localStream = TRTC.createStream({ userid: 10, audio: true, screen: true });
|
||
|
||
localStream
|
||
.initialize()
|
||
.catch((error: string) => {
|
||
console.error('初始化本地流失败 ' + error);
|
||
})
|
||
.then(() => {
|
||
console.log('初始化本地流成功');
|
||
client
|
||
.publish(localStream)
|
||
.catch((error: string) => {
|
||
console.error('本地流发布失败 ' + error);
|
||
})
|
||
.then(() => {
|
||
localStream.play('local_stream');
|
||
console.log('本地流发布成功');
|
||
});
|
||
});
|
||
}
|
||
function shexiang(){
|
||
localStream = TRTC.createStream({ userId: 10, audio: true, video: true });
|
||
localStream
|
||
.initialize()
|
||
.catch((error: string) => {
|
||
console.error('初始化本地流失败 ' + error);
|
||
})
|
||
.then(() => {
|
||
console.log('初始化本地流成功');
|
||
client
|
||
.publish(localStream)
|
||
.catch((error: string) => {
|
||
console.error('本地流发布失败 ' + error);
|
||
})
|
||
.then(() => {
|
||
localStream.play('local_stream');
|
||
console.log('本地流发布成功');
|
||
});
|
||
});
|
||
}
|
||
return{
|
||
fenxiang
|
||
}
|
||
},
|
||
});
|
||
</script> |