TRTC学习之旅（三）-- 使用vue+ts集成互动直播

import Client from './Client'
import { TRTCOptions, JoinRoomOptions } from './../model/trtc.model.defs'
import TRTC from 'trtc-js-sdk';
import { TRTCMode, AppConfig, Role } from '../enum/mode';

/**
 * 实现直播功能
 * @export
 * @class LiveClient 直播客户端
 * @extends {Client} trtc客户端
 */
export default class LiveClient extends Client {
    role: string = Role.ANCHOR
    constructor(options: TRTCOptions) {
        super(options);
    }

    createClient() {
        this.client = TRTC.createClient({
            userId: this.userId,
            userSig: this.userSig,
            mode: TRTCMode.LIVE,  //采用互动直播模式
            sdkAppId: AppConfig.SDKAPPID
        })
    }
    /**
     * 进入房间
     * 完成房间初始化操作，包括本地流的发布
     * @param {JoinRoomOptions} options
     * @returns
     * @memberof LiveClient
     */
    async initRoom(options: JoinRoomOptions) {
        if (this.isJoined) {
            console.log('客户端已经加入过房间');
            return;
        }

        try {
            await this.client.join(options);
            this.role = <string>options.role;
            console.log('成功加入聊天室');
            this.isJoined = true;
            
            await this.initStream(); 
        } catch(err) {
            console.log('加入房间失败', err)
        }
    }
    async initStream() {
        //非主播角色不进行初始化流的操作
        if (this.role !== Role.ANCHOR) return;

        try {
            this.localStream = TRTC.createStream({
                audio: true,
                video: true,
                mirror: true
            })
            
            await this.localStream.initialize();
            
            this.localStream.on('player-state-change', (e: any) => {
                console.log(`本地流${e.type}，状态改变=>${e.state}，原因=>${e.reason}`);
            })

            await this.publishStream();
        } catch (err) {
            console.log(err)
        }
    }

    /**
     * 切换角色
     * 在调用了切换角色到观众之后，会自动把本地流取消发布
     * @param {Role} role 角色类型
     * @memberof LiveClient
     */
    async switchRole(role: Role) {
        try {
            await this.client.switchRole(role);
            this.role = role;

            //主播角色则进行初始化流操作
            //切换到非主播角色则取消发布流
            if (this.role === Role.ANCHOR) {
                await this.initStream();
            } else {
                //记得切换标记
                //如果不切换的话，因为之前代码的逻辑，会导致本地流无法被发布
                this.isPublished = false;
            }
        } catch (error) {
            console.log('切换角色失败', error);
        }
    }
}

import Client from './Client';
import TRTC from 'trtc-js-sdk';
import { TRTCMode, AppConfig } from './../enum/mode';
import { TRTCOptions } from './../model/trtc.model.defs'

export default class ShareClient extends Client {
    constructor(options: TRTCOptions) {
        super(options);
    }

    createClient() {
        this.client = TRTC.createClient({
            mode: TRTCMode.VIDEOCALL,
            sdkAppId: AppConfig.SDKAPPID,
            userId: this.userId,
            userSig: this.userSig
        })

        //共享屏幕的客户端默认不接收远端流
        this.client.setDefaultMuteRemoteStreams(true);
    }

    /**
     * 共享屏幕的流也需要重新初始化流的方法
     */
    async initStream() {
        //开始屏幕共享
        //屏幕共享流不需要开放摄像头和音频
        this.localStream = TRTC.createStream({
            audio: false,
            screen: true,
            video: false,
        })

        try {
            await this.localStream.initialize();
            console.log('本地流初始化成功');

            this.localStream.on('player-state-change', (e: any)  => {
                console.log(`本地流${e.type}，状态改变=>${e.state}，原因=>${e.reason}`);
            })

            await this.publishStream();
        } catch (err) {
            console.error('初始化本地流错误', err);
        }
    }
}

<template>
    <el-container>
        <el-aside width="240px" class="anchor-info">
            <el-avatar shape="square" :size="150" fit="cover" :src="url"></el-avatar>
            <p>{{userId}}</p>
            <el-row>
                <el-col :span="24" class="mt-20">
                    <el-button @click="changeVideo">送礼物</el-button>
                    <el-button @click="switchRole">{{isAnchor ? '下麦' : '上麦'}}</el-button>
                </el-col>
            </el-row>
        </el-aside>
        <el-main class="main-body">
            <video-list
                :anchor-stream="{
                        main: anchorStream.main,
                        share: anchorStream.share
                    }"
                :audience-streams="audienceStreams">
            </video-list>
        </el-main>
        <el-aside width="240px">
            <im-list></im-list>
        </el-aside>
    </el-container>
</template>

<script>
    import { Vue, Component } from 'vue-property-decorator'
    import LiveClient from '../../js/client/class/LiveClient'
    import { Role } from '../../js/client/enum/mode';
    import VideoList from './components/video-list'
    import ImList from './components/im-list'
    import Icon from '@/components/icon'
    import LiveStreamMap from './LiveStreamMap'

    @Component({
        components: {
            VideoList,
            ImList,
            Icon
        }
    })
    export default class LiveRoom extends Vue {
        mainClient = null;  //本地客户端
        userId = '';
        roomId = '';
        
        currentRole = Role.AUDIENCE;  //当前角色
        url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';

        anchorStream = {  //主播流
            main: '',
            share: ''
        }

        audienceStreamMap = new LiveStreamMap();  //上麦的观众流Map
        audienceStreams = []; //上麦的观众流数组

        //当前状态是否切换成主播
        get isAnchor() {
            return this.currentRole === Role.ANCHOR;
        }

        created() {
            
            //绑定change事件
            this.audienceStreamMap.on('change', (map) => {
                //获取当前观众流
                this.audienceStreams = map.getValues();
            })

            this.userId = sessionStorage.getItem('userId');
            this.roomId = this.$route.params.roomId;

            this.mainClient = new LiveClient({userId: this.userId});

            //事件绑定
            //本来想用peerJoin和peerLeave方法实现右侧显示 ***观众加入房间  的字样
            //但是在官网中发现，这两个方法只能监听到远端发布了流的客户端
            //要实现有哪些观众加入房间的功能，估计还是只能用IM即时通信实现了
            this.mainClient.handleEvents({
                streamAdded: this.streamAdded,
                streamSubscribed: this.streamSubscribed,
                streamRemoved: this.streamRemoved,
                peerJoin: this.peerJoin,
                peerLeave: this.peerLeave
            })
        }

        async mounted() {
            //初始化房间数据
            await Promise.all([
                this.mainClient.initRoom({ roomId: this.roomId, role: Role.AUDIENCE }),
            ])
        }

        /** 
         * 切换角色
         */
        switchRole() {
            this.currentRole = 
                this.currentRole === Role.AUDIENCE 
                ? Role.ANCHOR
                : Role.AUDIENCE
            
            this.mainClient.switchRole(this.currentRole).then(() => {

                //目前有个bug，本地流获取userId是undefined
                //如果要用本地流对象上的userId最好是自己设置一次
                this.mainClient.localStream.userId_ = this.userId;
                
                //切换成主播，添加本地流到观众流mao中
                //切换成观众，在map中删除本地流
                switch (this.currentRole) {
                    case Role.AUDIENCE:
                        this.audienceStreamMap.deleteStream(this.mainClient.localStream)
                        break;
                    case Role.ANCHOR:
                        this.audienceStreamMap.addStream(this.mainClient.localStream)
                        break;
                }
            });

        }

        peerJoin(e) {
            console.log('有用户进入了房间')
            console.log(e)
        }

        peerLeave(e) {
            console.log('有用户离开了房间')
            console.log(e)
        }

        streamAdded(e) {
            console.log('接收到了远端流', e)
            return true;
        }

        streamSubscribed(e) {
            const stream = e.stream;
            const userId = stream.getUserId();
            let isAnchor = userId.includes('anchor');
            let isShare = userId.includes('share');
            
            //目前由于没有后台接口的支持，无法判断用户是否是原始房间的主播，所以可以在userId中加入标记进行判断
            //流的对象数据里面无法区分当前流是摄像头还是屏幕分享，所以我还是在userId中加入标记
            //主播流添加到主播对象
            //观众的远端流添加到map
            if (isAnchor) {
                isShare 
                ? this.anchorStream.share = stream
                : this.anchorStream.main = stream;
            } else {
                this.audienceStreamMap.addStream(stream);
            }
        }
        streamRemoved(e) {
            this.audienceStreamMap.deleteStream(e.stream);

            console.log('远端流被移除了')
            console.log(e)
        }

        changeShare() {
            const actionFunc = () => {
                return this.isMuteShare 
                    ? this.shareClient.publishStream()
                    : this.shareClient.unpublishStream();
            }
                
            actionFunc()
                ? this.isMuteShare = !this.isMuteShare
                : this.$message({
                    type: 'warning',
                    message: '没有视频设备'
                })
        }
    }
</script>

<style lang="less" scoped>
.device-control {
    display: flex;
    .icon-container {
        flex: 1 1 50%;
        text-align: center;
        padding: 15px;
        cursor: pointer;
        transition: all .3s ease 0s;
        &:hover {
            background-color: rgba(221, 221, 221, .3);
        }
        &:first-child {
            border-right: 1px solid #ddd;
        }
    }
}
.main-body {
    height: 100vh;
    background-color: green;
}
.anchor-info {
    text-align: center;
    padding: 10px;
}

.video-container {
    height: 160px;
}


</style>

<template>
    <el-container>
        <el-aside width="240px" class="anchor-info">
            <el-avatar shape="square" :size="150" fit="cover" :src="url"></el-avatar>
            <p>{{userId}}</p>
            <el-row>
                <el-col :span="24" class="mt-20">
                    <el-button @click="changeVideo">{{ !isMuteVideo ? '关闭摄像头' : '打开摄像头' }}</el-button>
                </el-col>
                <el-col :span="24" class="mt-20">
                    <el-button @click="changeAudio">{{ !isMuteAudio ? '关闭音频' : '打开音频' }}</el-button>
                </el-col>
                <el-col :span="24" class="mt-20">
                    <el-button @click="changeShare">{{ !isMuteShare ? '关闭屏幕共享' : '打开屏幕共享' }}</el-button>
                </el-col>
                <!-- <el-col :span="24" class="mt-20">
                    <el-button @click="initRoom">initRoom</el-button>
                </el-col> -->
            </el-row>
        </el-aside>
        <el-main class="main-body">
            <video-list
                :anchor-stream="anchorStream"
                :audience-streams="audienceStreams">
            </video-list>
        </el-main>
        <el-aside width="240px">
            <im-list></im-list>
        </el-aside>
    </el-container>
</template>

<script>
    import { Vue, Component } from 'vue-property-decorator'
    import LiveClient from '../../js/client/class/LiveClient'
    import ShareClient from '../../js/client/class/ShareClient';
    import { Role } from '../../js/client/enum/mode';
    import ImList from './components/im-list'
    import Icon from '@/components/icon'
    import VideoList from './components/video-list';
    import LiveStreamMap from './LiveStreamMap'

    @Component({
        components: {
            ImList,
            Icon,
            VideoList
        }
    })
    export default class AnchorRoom extends Vue {
        mainClient = null;  //摄像头客户端
        shareClient = null;  //屏幕共享客户端
        mainStream = null;  //摄像头流
        shareStream = null;  //屏幕共享流

        userId = '';
        roomId = '';
        url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
        isMuteAudio = false; 
        isMuteVideo = false;
        isMuteShare = false; //是否禁用了屏幕分享
        
        audienceStreamMap = new LiveStreamMap();
        audienceStreams = [];

        get anchorStream() {
            let stream = {
                main: this.mainStream,
                share: this.shareStream
            }
            return stream;
        }

        created() {

            this.userId = sessionStorage.getItem('userId');
            this.roomId = this.$route.params.roomId;

            this.audienceStreamMap.on('change', (map) => {
                this.audienceStreams = map.getValues();
            })

            /** 
             * 目前web端无法通过客户端对象属性进行区分该流是屏幕分享流还是摄像头的视频流
             * 所以在web端开发过程中暂时用userId的自己命名来进行区分
             * 目前web端的一个客户端上只能有一个流，所以要实现摄像头和屏幕共享的话，我们需要两个客户端
             */
            this.mainClient = new LiveClient({userId: 'anchor_' + this.userId});
            this.shareClient = new ShareClient({userId: 'anchor_share_' + this.userId});

            this.mainClient.handleEvents({
                streamSubscribed: this.streamSubscribed,
                streamRemoved: this.streamRemoved,
                peerJoin: this.peerJoin,
                peerLeave: this.peerLeave
            })
        }

        async mounted() {
            await this.initRoom();
        }

        async initRoom() {
            //将两个客户端进行房间初始化
            await Promise.all([
                this.mainClient.initRoom({ roomId: this.roomId, role: Role.ANCHOR }),
                this.shareClient.initRoom({ roomId: this.roomId })
            ])

            this.mainStream = this.mainClient.localStream;
            this.shareStream = this.shareClient.localStream;
        }

        peerJoin(e) {
            console.log('有用户进入了房间')
            console.log(e)
        }

        peerLeave(e) {
            console.log('有用户离开了房间')
            console.log(e)
        }

        changeShare() {
            const actionFunc = () => {
                return this.isMuteShare 
                    ? this.shareClient.publishStream()
                    : this.shareClient.unpublishStream();
            }
                
            actionFunc()
                ? this.isMuteShare = !this.isMuteShare
                : this.$message({
                    type: 'warning',
                    message: '没有视频设备'
                })
        }

        /**
         * 切换音频状态
         */
        changeAudio() {
            const actionFunc = () => {
                return this.isMuteAudio 
                    ? this.mainClient.unmuteLocalAudio()
                    : this.mainClient.muteLocalAudio();
            }
                
            actionFunc()
                ? this.isMuteAudio = !this.isMuteAudio
                : this.$message({
                    type: 'warning',
                    message: '没有视频设备'
                })
        }

        /**
         * 切换视频状态
         */
        changeVideo() {
            console.log('this.mainStream', this.mainStream.getUserId());
            const actionFunc = () => {
                return this.isMuteVideo 
                    ? this.mainClient.unmuteLocalVideo()
                    : this.mainClient.muteLocalVideo();
            }
                
            actionFunc()
                ? this.isMuteVideo = !this.isMuteVideo
                : this.$message({
                    type: 'warning',
                    message: '没有视频设备'
                })
        }

        streamSubscribed(e) {
            const stream = e.stream;
            const userId = stream.getUserId();
            let isAnchor = userId.includes('anchor');

            //不是房间原始主播的话，就放入map中
            if (!isAnchor) {
                this.audienceStreamMap.addStream(stream);
            }
        }
        streamRemoved(e) {
            this.audienceStreamMap.deleteStream(e.stream);
            console.log('远端流被移除了')
            console.log(e)
        }
        
    }
</script>

<style lang="less" scoped>
.device-control {
    display: flex;
    .icon-container {
        flex: 1 1 50%;
        text-align: center;
        padding: 15px;
        cursor: pointer;
        transition: all .3s ease 0s;
        &:hover {
            background-color: rgba(221, 221, 221, .3);
        }
        &:first-child {
            border-right: 1px solid #ddd;
        }
    }
}
.main-body {
    height: 100vh;
    background-color: green;
}
.anchor-info {
    text-align: center;
    padding: 10px;
}
.anchor-area {
    height: 90vh;
}
.audience-area {
    height: 160px;
}
</style>