用TcPlayer+即时通讯IM实现h5直播聊天室

使用插件
视频播放：TcPlayer
直播间聊天：IM
1、安装和引入tim

 // IM Web SDK
npm install tim-js-sdk --save
// 发送图片、文件等消息需要的 COS SDK
npm install cos-js-sdk-v5 --save

2、创建实例

//tim.js代码
import TIM from 'tim-js-sdk';
import COSSDK from "cos-js-sdk-v5";
let tim = TIM.create({
    SDKAppID: 1400280493
});
tim.registerPlugin({
    "cos-js-sdk": COSSDK
});
export default tim

3、js代码

 import tim from '@/utils/tim'
 import TIM from 'tim-js-sdk';

methods: {
            //通过直播id获取聊天群号，视频地址
            getLiveP: function() {
                let _this = this
                let data = {
                    live_id: this.live_id,
                }
                liveP(data).then((res) => {
                    if (res.code == 200) {
                        this.liveText = res.data.live
                        this.video_m = this.liveText.play_url_m3u8
                        this.video_flv = this.liveText.play_url_flv
                        this.groupId = this.liveText.chat_group_id
                        this.currentNum = res.data.num;
                        _this.playV();
                    }
                })
            },
            //登录人用token获取timId，timSig （通过后台获取）
            getTokenV: function() {
                let _this = this;
                let data = {
                    token: this.token,
                };
                tokenV(data).then((res) => {
                    if (res.code == 200) {
                        _this.timId = res.data.msisdn.toString();
                        _this.timSig = res.data.timsign;
                        _this.nickname = res.data.nickname;
                        _this.timLogin();
                    }
                })
            },
            //登录聊天室
            timLogin()  {
                let _this = this;
                tim.login({
                    userID:  _this.timId,
                    userSig:  _this.timSig
                }).then(res  =>  {
                    _this.timListener();
                }).catch(imError  =>  {
                 //登录失败的消息
                });
            },
            // IM监听
            timListener() {
                let _this = this;
                console.log(TIM.EVENT.SDK_READY + '登录成功后会触发 SDK_READY 事件，该事件触发后，可正常使用 SDK 接口')
                // 登录成功后会触发 SDK_READY 事件，该事件触发后，可正常使用 SDK 接口
                //onReadyStateUpdate 加群组事件
                tim.on(TIM.EVENT.SDK_READY, this.onReadyStateUpdate, this);
                // 收到新消息--onReceiveMessage事件
                tim.on(TIM.EVENT.MESSAGE_RECEIVED, this.onReceiveMessage);
            },
            // 登录成功触发
            onReadyStateUpdate() {
                // 加入群聊
                let _this = this;
                tim.joinGroup({
                    groupID: _this.groupId,
                    type: "AVChatRoom"
                }).then(res => {
                    if (res.data.status === "JoinedSuccess") {
                        console.log('加入群聊成功')
                    }
                }).catch(imError  =>  {
                   //加入群聊失败
                });
                // 获取群详细资料
                tim.getGroupProfile({
                    groupID: this.groupId
                }).then(res => {
                    // _this.currentNum = res.data.group.memberNum;  //群人数(当前直播间的人数)
                });
            },
            // 收到消息触发
            onReceiveMessage(data) {
                let _this = this;
                console.log("收到消息:", data);

                // 根据消息类型判断，执行不同操作
                if (data.data[0].type == "TIMTextElem") {
                    // 群成员发送消息
                    let eleData = JSON.parse(data.data[0].payload.text);
                    // 获取群聊消息，消息上屏
                    this.updateMessageList(eleData);
                }
                if (data.data[0].payload.operationType == 5) {
                    // 群聊解散
                }
                if (data.data[0].type == "TIMGroupSystemNoticeElem") {
                    // 商品推送
                }
                tim.getGroupProfile({
                    groupID: this.groupId
                }).then(res => {
                    console.log("当前群人数：", res.data.group.memberNum);
                    // _this.currentNum = res.data.group.memberNum;
                });
                _this.conversationID = data.data[0].conversationID;
            },
            // 更新数据push进消息列表
            updateMessageList(data) {
                this.messageList = [...this.messageList, data];
                // console.log(this.messageList)
                this.scrollToBottom()
            },
            //发送聊天
            sendTextMessage() {
                let _this = this;
                if (
                    this.messageContent === '' ||
                    this.messageContent.trim().length === 0
                ) {
                    this.messageContent = '';
                    vant.Toast('不能发送空消息哦');
                    return
                }
                //拼接消息，包括内容，昵称，头像
                let data = {
                    'userName': _this.nickname,
                    'content': _this.messageContent,
                };
                // 1. 创建消息实例，接口返回的实例可以上屏
                let message = tim.createTextMessage({
                    to: _this.groupId, //接收人
                    conversationType: TIM.TYPES.CONV_GROUP,
                    // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
                    // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
                    // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
                    payload: {
                        text: JSON.stringify(data) //消息内容
                    }
                });
                //  发送消息
                let promise = tim.sendMessage(message);
                promise.then(function(imResponse) {
                    // 发送成功
                    vant.Toast('发送消息成功');
                    console.log(imResponse.data)
                    _this.messageContent = '';
                    // 把自己发的消息拼接上屏(因为onReceiveMessage是监听不到自己发的消息的)
                    let text = JSON.parse(imResponse.data.message.payload.text);
                    _this.updateMessageList(text);

                }).catch(function(imError) {
                    // 发送失败
                    console.log('发送消息失败:', imError);
                });
            },
            //离开直播间，退出群聊
            quitGroup() {
                tim.quitGroup(this.groupId).then(() => {
                    console.log('退群成功')
                    let promise = tim.logout();
                    promise.then(function(imResponse) {
                        console.log('登出成功'); //
                    }).catch(function(imError) {
                        console.warn('登出失败');
                    });
                }).catch(error => {
                    console.log('退群失败')
                });
            },
            /*视频播放*/
            playV(){
                let _this = this;
                _this.$nextTick(() => {
                    _this.player = new TcPlayer('hls-video', {
                        'm3u8': _this.video_m,
                        'autoplay': true,
                        'controls': 'none',
                        "width" : _this.vwidth,      //视频的显示宽度，请尽量使用视频分辨率宽度
                        "height" : _this.vheight,    //视频的显示高度，请尽量使用视频分辨率高度
                        'poster': 'http://h5-live.worthcloud.tv/live618/live_cover2.png',
                    });
                })
            },
        },

4、html代码

<div class="live-video-wrapper">
        <div class="head">
            <div class="shop-box">
                <img :src="liveText.image">
                <div class="text">
                    <h4>{{liveText.title}}</h4>
                    <p>{{currentNum}}人观看</p>
                </div>
            </div>
        </div>
        <div class="video-box">
            <!--视频-->
            <div id="hls-video" style="width: 100%;height: auto;"></div>
        </div>
        <div class="chat" id="scroll_div">
            <div class="chat_h3 clearfix">
                <p>公告</p>
                <p>郑重提示：购买直播推荐商品请确认您拍下的购买链接描述与实际商品一致，切勿相信其他交易方式（如直接转账）谨防上当受骗！</p>
            </div>
            <div class="msg-wrapper">
                <ul>
                    <!--消息列表-->
                    <li v-for="(item, index) in messageList" :key="index">
                        <div class="text1 clearfix">
                            <h5>{{item.userName}}</h5>
                            <p>{{item.content}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

效果图如下，直播视频的格式是flv或者m3u8。视频播放的插件可以用video.js，但个人认为TcPlayer兼容性好点