|
|
@@ -1,157 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="roomsDetail">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24" class="info">
|
|
|
- <el-col :span="24" class="video">
|
|
|
- <el-col :span="15" class="videoLeft">
|
|
|
- <div id="look-video-left" class="video-box col-div" style="justify-content: flex-end"></div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="9" class="videoRight">
|
|
|
- <div id="look-video-right" class="video-box col-div" style="justify-content: flex-end"></div>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="chat">
|
|
|
- <chat></chat>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import TRTC from 'trtc-js-sdk';
|
|
|
-import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-const { mapActions: gensign } = createNamespacedHelpers('gensign');
|
|
|
-const { mapActions: room } = createNamespacedHelpers('room');
|
|
|
-import chat from '@/components/parts/chat.vue';
|
|
|
-export default {
|
|
|
- name: 'roomsDetail',
|
|
|
- props: {},
|
|
|
- components: {
|
|
|
- chat,
|
|
|
- },
|
|
|
- data: function() {
|
|
|
- return {
|
|
|
- client_: null,
|
|
|
- localStream_: null,
|
|
|
- sdkAppId_: '1400380125',
|
|
|
- userId_: '',
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.initclient();
|
|
|
- this.lookuserSearch();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...gensign(['gensignFetch']),
|
|
|
- ...room(['lookuserFetch']),
|
|
|
- async lookuserSearch() {
|
|
|
- let data = {};
|
|
|
- data.roomid = this.id;
|
|
|
- data.roomname = this.roomname;
|
|
|
- data.userid = this.user.userid;
|
|
|
- data.username = this.user.name;
|
|
|
- data.phone = this.user.phone;
|
|
|
- const res = await this.lookuserFetch(data);
|
|
|
- },
|
|
|
- onSubmit() {
|
|
|
- console.log(this.input);
|
|
|
- },
|
|
|
- async initclient() {
|
|
|
- this.userId_ = this.user.uid;
|
|
|
- const res = await this.gensignFetch({ userid: this.userId_ });
|
|
|
- if (this.$checkRes(res)) {
|
|
|
- this.client_ = TRTC.createClient({
|
|
|
- mode: 'live',
|
|
|
- sdkAppId: this.sdkAppId_,
|
|
|
- userId: this.userId_,
|
|
|
- userSig: res.data,
|
|
|
- });
|
|
|
- await this.client_.join({ roomId: this.roomname, role: 'audience' });
|
|
|
- let i = 0;
|
|
|
- this.client_.on('stream-subscribed', event => {
|
|
|
- const remoteStream = event.stream;
|
|
|
- // 远端流订阅成功，播放远端音视频流
|
|
|
- console.log('111' + remoteStream.getType());
|
|
|
- i = i + 1;
|
|
|
- if (i === 1) {
|
|
|
- remoteStream.play('look-video-right');
|
|
|
- } else {
|
|
|
- remoteStream.play('look-video-left');
|
|
|
- }
|
|
|
- });
|
|
|
- // 监听远端流增加事件
|
|
|
- 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');
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- 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 {
|
|
|
- .video {
|
|
|
- background: #fff;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-/deep/.video-js {
|
|
|
- height: 190px !important;
|
|
|
- border-radius: 10px;
|
|
|
-}
|
|
|
-#look-video-left {
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- grid-area: 1/1/3/4;
|
|
|
-}
|
|
|
-#look-video-right {
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- grid-area: 1/1/3/4;
|
|
|
-}
|
|
|
-</style>
|
