直播一部分 #88
@ -15,6 +15,7 @@
|
||||
"core-js": "^3.6.5",
|
||||
"dayjs": "^1.9.1",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"tim-js-sdk": "^2.8.0",
|
||||
"trtc-js-sdk": "^4.6.5",
|
||||
"vod-js-sdk-v6": "^1.4.10",
|
||||
"vue": "^3.0.0-0",
|
||||
|
||||
@ -101,7 +101,10 @@ export default defineComponent({
|
||||
// todo 修改后报错
|
||||
function kaishi(){
|
||||
if(props.info != undefined){
|
||||
livestart(props.info.liveid)
|
||||
const id = props.info.liveid;
|
||||
livestart(id).then(()=>{
|
||||
router.push("/regime/liveing?id=" + id)
|
||||
})
|
||||
}
|
||||
}
|
||||
// const liveinfo = ref(props.liveinfo)
|
||||
|
||||
@ -36,6 +36,7 @@ import LiveCount from "@/components/LiveCount.vue";
|
||||
import VideoReview from "@/components/VideoReview.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { getliveinfo } from "@/api";
|
||||
import router from '@/router';
|
||||
export default defineComponent({
|
||||
components: {
|
||||
LiveCount,
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="left">直播页面</div>
|
||||
<div class="right">
|
||||
<img src="@/static/images/liveshare.png" alt="" @click="qiehuan()" />
|
||||
<img src="@/static/images/liveend.png" alt="" />
|
||||
<img src="@/static/images/liveend.png" alt="" @click="visible = true" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
@ -30,13 +30,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="others">
|
||||
<div id="s-10" class="othersitem">
|
||||
<div class="others" v-for="(item, index) in roominfo.studentlist" :key="index">
|
||||
<div :id="'s-' + item.memberid" class="othersitem">
|
||||
<div class="watcher"></div>
|
||||
<div class="name">asdsada</div>
|
||||
<div class="name">{{item.name}}</div>
|
||||
<!-- <img src="" alt="" /> -->
|
||||
</div>
|
||||
<div class="othersitem">
|
||||
<!-- <div class="othersitem">
|
||||
<div class="watcher"></div>
|
||||
<div class="name">asdsada</div>
|
||||
<img src="" alt="" />
|
||||
@ -50,9 +50,18 @@
|
||||
<div class="watcher"></div>
|
||||
<div class="name">asdsada</div>
|
||||
<img src="" alt="" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="othersitem" id="s-52">
|
||||
<div class="watcher"></div>
|
||||
<div class="name">测试</div>
|
||||
<!-- <img src="" alt="" /> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<a-modal v-model:visible="visible" title="Basic Modal" @ok="guanbi">
|
||||
<p>您确认关闭直播吗</p>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
@ -151,42 +160,48 @@
|
||||
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;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 132px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
.name {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 28px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
margin-bottom: 35px;
|
||||
background-color: #eee;
|
||||
border-radius: 18px 18px 0px 0px;
|
||||
overflow: hidden;
|
||||
.watcher {
|
||||
width: 100%;
|
||||
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 { defineComponent, onMounted, ref } from "vue";
|
||||
import LivePlaying from "@/components/LivePlaying.vue";
|
||||
import LiveingWatcher from "@/components/LiveingWatcher.vue";
|
||||
import TRTC from "trtc-js-sdk"
|
||||
import { usersig } from '@/api';
|
||||
import { getliveinfo, usersig } from '@/api';
|
||||
import { useRoute } from 'vue-router';
|
||||
import store from '@/store';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@ -200,10 +215,15 @@ export default defineComponent({
|
||||
let statie = true;
|
||||
let userSing = '';
|
||||
let type = false;
|
||||
const visible = ref(false);
|
||||
const roominfo = ref<any>([]);
|
||||
console.log(useRoute())
|
||||
const id = useRoute().query.id;
|
||||
|
||||
async function qiehuan(){
|
||||
// 1 屏幕分享 2 摄像头
|
||||
client.unpublish(localStream)
|
||||
localStream = type ? TRTC.createStream({ userid: 10, audio: true, screen: true }) : TRTC.createStream({ userId: 10, audio: true, video: true });
|
||||
localStream = type ? TRTC.createStream({ userid: store.state.userinfo.memberid, audio: true, screen: true }) : TRTC.createStream({ userId: 10, audio: true, video: true });
|
||||
type = !type;
|
||||
localStream.initialize().then(()=>{
|
||||
client
|
||||
@ -222,10 +242,10 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
}
|
||||
function pingmu(){
|
||||
localStream = TRTC.createStream({ userid: 10, audio: true, screen: true });
|
||||
|
||||
localStream
|
||||
async function pingmu(){
|
||||
localStream = TRTC.createStream({ userid: store.state.userinfo.memberid, audio: true, screen: true });
|
||||
const id = localStream.getId();
|
||||
await localStream
|
||||
.initialize()
|
||||
.catch((error: string) => {
|
||||
console.error('初始化本地流失败 ' + error);
|
||||
@ -240,12 +260,14 @@ export default defineComponent({
|
||||
.then(() => {
|
||||
localStream.play('local_stream');
|
||||
console.log('本地流发布成功');
|
||||
console.log(id , 123)
|
||||
});
|
||||
});
|
||||
}
|
||||
function shexiang(){
|
||||
localStream = TRTC.createStream({ userId: 10, audio: true, video: true });
|
||||
localStream
|
||||
async function shexiang(){
|
||||
localStream = TRTC.createStream({ userId: store.state.userinfo.memberid, audio: true, video: true });
|
||||
const id = localStream.getId();
|
||||
await localStream
|
||||
.initialize()
|
||||
.catch((error: string) => {
|
||||
console.error('初始化本地流失败 ' + error);
|
||||
@ -260,20 +282,27 @@ export default defineComponent({
|
||||
.then(() => {
|
||||
localStream.play('local_stream');
|
||||
console.log('本地流发布成功');
|
||||
console.log(id, 123)
|
||||
});
|
||||
});
|
||||
}
|
||||
function init(fun: any, userSig: string){
|
||||
async function init(fun: any, userSig: string): Promise<void>{
|
||||
console.log(userSig)
|
||||
const el = document.querySelector("#local_stream");
|
||||
if(el){
|
||||
el.innerHTML = ""
|
||||
}
|
||||
if (typeof id == "string") {
|
||||
roominfo.value = await getliveinfo(parseInt(id))
|
||||
console.log(roominfo.value)
|
||||
}
|
||||
|
||||
|
||||
client = TRTC.createClient({
|
||||
mode: 'rtc',
|
||||
sdkAppId: '1400400340',
|
||||
userId: 10,
|
||||
userSig: 'eJw1zMsKwjAUBNB-yVrqzatowaU7UcQgGNxEG5tLUGNSxQf*u7FWmM2cgXkRNVsVNxtJRVgBZNB1rO2pxQN2TP*aam9CwJpUVADkcAG-xd4DRptdSskAem3x*LUSOOdjoL0mbPLpvtx5rRbb4RIla86XBxNGKTePI391T64N6jQFgRu3ThPy-gBYczBk'
|
||||
userId: store.state.userinfo.memberid,
|
||||
userSig: userSig
|
||||
});
|
||||
client.on('stream-added', (event: { stream: any }) => {
|
||||
const remoteStream = event.stream;
|
||||
@ -283,12 +312,12 @@ export default defineComponent({
|
||||
});
|
||||
client.on('stream-subscribed', (event: { stream: any }) => {
|
||||
const remoteStream = event.stream;
|
||||
console.log('远端流订阅成功：' + remoteStream.getId());
|
||||
console.log(remoteStream);
|
||||
// 播放远端流
|
||||
remoteStream.play('s-' + remoteStream.getId());
|
||||
remoteStream.play('s-' + remoteStream.userId_);
|
||||
});
|
||||
client
|
||||
.join({ roomId: 11 })
|
||||
.join({ roomId: roominfo.value.roomid })
|
||||
.catch((error: string) => {
|
||||
console.error('进房失败 ' + error);
|
||||
})
|
||||
@ -297,34 +326,47 @@ export default defineComponent({
|
||||
fun()
|
||||
});
|
||||
}
|
||||
function fenxiang(){
|
||||
async 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);
|
||||
await client.unpublish(localStream).then(() => {
|
||||
// 关闭屏幕分享流
|
||||
console.log("关闭")
|
||||
client.leave().then(() => {
|
||||
// leaving room success
|
||||
console.log("关闭成功")
|
||||
}).catch((error: string) => {
|
||||
console.error('leaving room failed: ' + error);
|
||||
});
|
||||
});
|
||||
statie ? await shexiang() : await pingmu();
|
||||
statie = !statie;
|
||||
console.log(localStream.getId())
|
||||
}
|
||||
|
||||
function guanbi(){
|
||||
client.leave().then(() => {
|
||||
// leaving room success
|
||||
visible.value = false;
|
||||
|
||||
}).catch((error: string) => {
|
||||
message.error('关闭失败: ' + error);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(async ()=>{
|
||||
userSing = await usersig(10);
|
||||
userSing = await usersig(store.state.userinfo.memberid);
|
||||
|
||||
init(pingmu, userSing);
|
||||
|
||||
})
|
||||
|
||||
return{
|
||||
fenxiang,
|
||||
qiehuan
|
||||
qiehuan,
|
||||
roominfo,
|
||||
guanbi,
|
||||
visible
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@ -8774,6 +8774,11 @@ thunky@^1.0.2:
|
||||
resolved "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
|
||||
integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
|
||||
|
||||
tim-js-sdk@^2.8.0:
|
||||
version "2.8.0"
|
||||
resolved "https://registry.npmjs.org/tim-js-sdk/-/tim-js-sdk-2.8.0.tgz#bfba8a591cb209789484f54dc7d1dcfcd4e7e7cf"
|
||||
integrity sha512-dJbHdc6i4JBDfkCf6BRcmBgXZckot2yS2HxA8BvdtCiEyBrncgcG84EjN8pKsTqE+uomb5JfLC5nRnPmAkTm5w==
|
||||
|
||||
timers-browserify@^2.0.4:
|
||||
version "2.0.11"
|
||||
resolved "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user