IM直播聊天--西瓜视频

使用插件：

xgplayer

IM SDK

下载：

npm install xgplayer

import "xgplayer";

import HlsJsPlayer from "xgplayer-hls.js";

 

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

import TIM from 'tim-js-sdk';
import COS from "cos-js-sdk-v5";

 

重点：

一、首先

//创建 SDK 实例

let tim = TIM.create({
  SDKAppID: 1400261558
});

//注册 COS SDK 插件

tim.registerPlugin({
  "cos-js-sdk": COSSDK
});

 data() {
    return {
       // 播放器实例
      player: null,
      // 播放器地址
      videoUrl: "",
      // tim 用户id
      timId: "",
      // tim 用户sig
      timSig: "",
      // 聊天室ID
      groupId: 0,
      // 聊天数据
      messageList: [],
      // 主播名称
      playerName: "",
      // 观看量
      watch: 0,
      // 主播头像
      avatar: ""
    };
  },
  mounted() {
    this.getData(window.location.search);
  },

//获取视频数据和 IM用到的数据

 // 获取数据
    getData(data) {
      this.$http
        .getPlayerDetail(`${data}`)
        .then(Response => {
          // console.log(Response.data);
          if (Response.code === this.$http_status.success) {
            this.videoUrl = Response.data.m3u8;

            this.timId = Response.data.uid;
            this.timSig = Response.data.userSig;
            this.groupId = Response.data.group_roomid;

            this.timLogin();
            this.playerInit();

            this.playerName = Response.data.nickName;
            this.watch = Response.data.watchNum;
            this.avatar = Response.data.head;
          } else if (Response.code === this.$http_status.error) {
            alert("主播还没开播");
            this.$router.push({ path: "/player-list" });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

//获取游客ID和用户登录即时通信 IM 的密码--timSing

// 获取游客tim账号
    getVisitor() {
      this.$http
        .getVisitor()
        .then(Response => {
          if (Response.code === this.$http_status.success) {
            this.timId = Response.data.uid;
            this.timSig = Response.data.userSig;
            //游客登录
            this.timInit();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

// IM登录--用户登录 IM SDK 才能正常收发消息，登录需要用户提供 UserID、UserSig 等信息

timLogin() {
      tim
        .login({
          userID: this.timId,
          userSig: this.timSig
        })
        .then(res => {
          console.log("登录成功: ", res);
          this.timListener();
        })
         //登录失败的消息
        .catch(imError => {
          if (imError.code === 2000) {
            console.error(imError.message + ", 请检查是否正确填写了 SDKAPPID");
          } else {
            console.error(imError.message);
          }
        });
    },

//登录之后通过监听事件TIM.EVENT.SDK_READY ，获取 SDK 状态。

// IM监听
timListener() {
   // 登录成功后会触发 SDK_READY 事件，该事件触发后，可正常使用 SDK 接口
    //onReadyStateUpdate 加群组事件
    tim.on(TIM.EVENT.SDK_READY, this.onReadyStateUpdate, this);
   // 收到新消息--onReceiveMessage事件
    tim.on(TIM.EVENT.MESSAGE_RECEIVED, this.onReceiveMessage);
  },

//登录成功之后触发加群组事件

 // 登录成功触发
    onReadyStateUpdate() {
      console.log("登录成功监听", this.groupId);
      // 加群
      tim.joinGroup({ groupID: this.groupId, type: "AVChatRoom" }).then(res => {
        if (res.data.status === "JoinedSuccess") {
          console.log("加群成功", res);
        }
      });
      tim.getGroupList().then(res => {
        console.log("群组：", res);
      });
    },

//触发接收新消息事件

// 收到消息触发
    onReceiveMessage(data) {
      console.log("收到消息:", data.data[0]);
      if (data.data[0].type === "TIMCustomElem") {
        let eleData = JSON.parse(data.data[0].payload.data);
        if (eleData.head.cmd === 6) {
          this.updateMessageList(eleData);
        }
      }
    },

//消息更新事件

// 更新数据
    updateMessageList(data) {
      this.messageList = [...this.messageList, data];
    },

二、视频部分

//定义视频

// 定义videojs
    playerInit() {
      this.player = new HlsJsPlayer({
        id: "video",
        useHls: true,
        url: this.videoUrl,
        autoplay: true,

        //开启ios和微信的内联模式
        playsinline: true,

        //适配屏幕
        height: window.innerHeight,
        width: window.innerWidth,

        //配置项关闭
        ignores: ["mobile"],
        controls: false,
        "x5-video-player-type": "h5",

        //自适应视频内容宽高
        fitVideoSize: "auto"
      });
    },

  // 点击提示下载app
    vjsClickTip() {
      if (
        confirm("此功能仅对APP开放，首次到应用市场下载“翠叮当APP“送1000元红包")
      ) {
        this.$router.push({ path: `/down-app` });
      }
    },
 // 点击关闭
    closeClick() {
      this.$router.push({ path: "/player-list" });
    },

 

三、页面部分
 

<template>
  <div class="player-detail">
    <div id="video"></div>
    <div class="vjs-top-layout">
      <img @click="closeClick" class="vjs-close-img" src="@/images/close.png" />
      <div class="vjs-liver-info">
        <img @click="vjsClickTip" id="vjsAvatar" class="vjs-liver-avatar" :src="imgUrl + avatar" />
        <div @click="vjsClickTip" class="vjs-liver-user-info">
          <span id="vjsName" class="vjs-liver-user-name">{{playerName}}</span>
          <span id="vjsWatchNumber" class="vjs-liver-watch-number">观看：{{watch}}</span>
        </div>
        <div class="vjs-liver-follow" @click="vjsClickTip">关注</div>
      </div>
      <div @click="vjsClickTip" class="vjs-tsjy">投诉建议</div>
      <img class="vjs-logo-img" src="http://zy.cuidingdang.xyz/FqJOczXooh2d9KXXyxB63Kd1pwfL" />
    </div>
    <div class="vjs-bottom-layout">
      <input @click="vjsClickTip" disabled type="text" class="vjs-tim-input" placeholder="说点什么吧..." />
      <div class="vjs-icons">
        <span @click="vjsClickTip" class="vjs-icons-span">
          <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/Fu0nJx1tKUqjKBkteCGOjIh6PGLt" />
        </span>
        <span @click="vjsClickTip" class="vjs-icons-span">
          <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/FnwHVndk2DGxCsSQBz2dOxeoFUSs" />
        </span>
        <span @click="vjsClickTip" class="vjs-icons-span">
          <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/Flar9ZXS56kK8MIeSKY3aOkpvw4O" />
        </span>
        <span @click="vjsClickTip" class="vjs-icons-span">
          <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/FkTvyrOkfC8_0J9VTauqmLUF-gN0" />
        </span>
      </div>
    </div>
    <div id="timMessageBox" class="vjs-message-box">
      <div class="vjs-message-list" v-for="(item, index) in messageList" :key="index">
        <div class="vjs-message-item">
          <div class="vjs-message-user">{{item.head.user.id}}:</div>
          <div class="vjs-message-content">{{item.body.msg}}</div>
        </div>
      </div>
    </div>
  </div>
</template>