|
|
@@ -0,0 +1,213 @@
|
|
|
+<template>
|
|
|
+ <div id="roomsDetail">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="title">
|
|
|
+ <span>{{ roomInfos.title }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="video">
|
|
|
+ <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="chat">
|
|
|
+ <el-col :span="24" class="chatList">
|
|
|
+ <el-button type="success" round @click="liveon()">成功按钮</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="chatList">
|
|
|
+ 聊天列表
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="chatInput">
|
|
|
+ <el-col :span="19" class="input">
|
|
|
+ <el-input v-model="content"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="btn">
|
|
|
+ <el-button type="primary" size="mini" @click="onSubmit">发送</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import TRTC from 'trtc-js-sdk';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+import Vue from 'vue';
|
|
|
+import { Swipe, SwipeItem, Lazyload } from 'vant';
|
|
|
+import { Image as VanImage } from 'vant';
|
|
|
+Vue.use(Swipe);
|
|
|
+Vue.use(SwipeItem);
|
|
|
+Vue.use(VanImage);
|
|
|
+Vue.use(Lazyload);
|
|
|
+const { mapActions: gensign } = createNamespacedHelpers('gensign');
|
|
|
+const { mapActions: room } = createNamespacedHelpers('room');
|
|
|
+export default {
|
|
|
+ name: 'roomsDetail',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ client_: null,
|
|
|
+ localStream_: null,
|
|
|
+ sdkAppId_: '1400380125',
|
|
|
+ userId_: '',
|
|
|
+ userSig_: '',
|
|
|
+ roomInfos: {},
|
|
|
+ sendmemo: '',
|
|
|
+ total: 0,
|
|
|
+ content: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initclient();
|
|
|
+ this.lookuserSearch();
|
|
|
+ this.lookusercountsel();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...gensign(['gensignFetch']),
|
|
|
+ ...room(['lookuserFetch', 'fetch', 'lookusercount']),
|
|
|
+ async lookuserSearch() {
|
|
|
+ let data = {};
|
|
|
+ data.roomid = this.id;
|
|
|
+ data.roomname = this.roomname;
|
|
|
+ data.userid = this.user.userid;
|
|
|
+ data.username = this.user.name;
|
|
|
+ const res = await this.lookuserFetch(data);
|
|
|
+ // 根据房间id查询房间详细信息
|
|
|
+ let result = await this.fetch(this.id);
|
|
|
+ if (this.$checkRes(result)) {
|
|
|
+ console.log(result.data);
|
|
|
+ this.$set(this, `roomInfos`, result.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async lookusercountsel() {
|
|
|
+ // 根据房间id查询房间详细信息
|
|
|
+ let result = await this.lookusercount({ roomname: this.roomname });
|
|
|
+ if (this.$checkRes(result)) {
|
|
|
+ console.log(result.total);
|
|
|
+ this.$set(this, `total`, result.total);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ console.log(this.sendmemo);
|
|
|
+ },
|
|
|
+ async initclient() {
|
|
|
+ this.userId_ = this.user.uid;
|
|
|
+ const res = await this.gensignFetch({ userid: this.userId_ });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.userSig_ = res.data;
|
|
|
+ this.client_ = TRTC.createClient({
|
|
|
+ mode: 'live',
|
|
|
+ sdkAppId: this.sdkAppId_,
|
|
|
+ userId: this.userId_,
|
|
|
+ userSig: res.data,
|
|
|
+ });
|
|
|
+ await this.client_.join({ roomId: this.roomname, role: 'anchor' });
|
|
|
+ let i = 0;
|
|
|
+ this.client_.on('stream-subscribed', event => {
|
|
|
+ const remoteStream = event.stream;
|
|
|
+ // 远端流订阅成功，播放远端音视频流
|
|
|
+ console.log('111' + remoteStream.getType());
|
|
|
+ remoteStream.play('look-video');
|
|
|
+ });
|
|
|
+ // 监听远端流增加事件
|
|
|
+ this.client_.on('stream-added', event => {
|
|
|
+ const remoteStream = event.stream;
|
|
|
+ console.log('222' + remoteStream.getType());
|
|
|
+ // 订阅远端音频和视频流
|
|
|
+ this.client_.subscribe(remoteStream, { audio: false, video: true }).catch(e => {
|
|
|
+ console.error('failed to subscribe remoteStream');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async liveon() {
|
|
|
+ this.localStream_ = await TRTC.createStream({
|
|
|
+ audio: true,
|
|
|
+ video: true,
|
|
|
+ // cameraId: this.cameraId,
|
|
|
+ // microphoneId: this.microphoneId,
|
|
|
+ userId: this.userId_,
|
|
|
+ });
|
|
|
+ this.localStream_.setVideoProfile('480p');
|
|
|
+ await this.localStream_.initialize();
|
|
|
+ console.log('initialize local stream success');
|
|
|
+ // publish the local stream
|
|
|
+ await this.client_.publish(this.localStream_);
|
|
|
+ this.localStream_.play('look-video');
|
|
|
+ },
|
|
|
+ imgclick(url) {
|
|
|
+ location.href = url;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ id() {
|
|
|
+ return this.$route.query.id;
|
|
|
+ },
|
|
|
+ roomname() {
|
|
|
+ return this.$route.query.roomname;
|
|
|
+ },
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.info {
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .video {
|
|
|
+ background: #000;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .videoLeft {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ .videoRight {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chat {
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ .chatList {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ min-height: 300px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ .chatInput {
|
|
|
+ .el-button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 13px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.my-swipe .van-swipe-item {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 150px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #39a9ed;
|
|
|
+}
|
|
|
+/deep/.video-js {
|
|
|
+ height: 190px !important;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+#look-video {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ grid-area: 1/1/3/4;
|
|
|
+}
|
|
|
+</style>
|
liuyu