IM直播聊天--video.js

使用插件：

video.js  

IM SDK
下载：
npm install video.js

video.js/dist/video-js.css
video.js/dist/video.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,
      // 是否已经点击了播放按钮
      isPlay: false,
      // 展开
      boxshowup: true,
      // 收回
      boxshowclose: false,
      // 键盘显示
      keyPressinfo: false,
      // 弹窗
      toastinfo: false,
      // tim 用户id
      timId: "",
      // tim 用户sig
      timSig: "",
      // 聊天室ID
      groupId: 0,
      // 聊天数据
      messageList: []
    };
  },
  mounted() {
    this.getData(window.location.search);
    this.playerInit();
  },

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

  // 获取视频数据
    getData(data) {
      this.$http
        .getPlayerDetail(`${data}`)
        .then(Response => {
          // console.log("-------------", Response.data);
          if (Response.code === this.$http_status.success) {
            //this.player.src(Response.data.m3u8);
            //this.player.load();
            
            this.playerInit();   
            //房间号
            this.groupId = Response.data.group_roomid;
            //进入直播间立即获取游客信息并登录
            this.getVisitor();
            
            //直播间渲染--也是video.js的一个弊端，要用dom元素放上去
            document.getElementById("vjsName").innerText =
              Response.data.nickName;
            document.getElementById(
              "vjsWatchNumber"
            ).innerText = `观看：${Response.data.watchNum}`;
            document
              .getElementById("vjsAvatar")
              .setAttribute("src", `${qiniu_url}${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.timLogin();
          }
        })
        .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];
      let dom = "";
      for (let item of this.messageList) {
        dom += `
          <div class="vjs-message-list">
            <div class="vjs-message-item">
              <div class="vjs-message-user">${item.head.user.nickName}:</div>
              <div class="vjs-message-content">${item.body.msg}</div>
            </div>
          </div>
        `;
      }
      document.getElementById("timMessageBox").innerHTML = dom;
    },

二、视频部分

//定义视频

// 定义videojs
    playerInit() {
      this.player = videojs(
        this.$refs.videoPlayer,
        {
          sources: [
            {
              src: this.videoUrl,
              type: "application/x-mpegURL"
            }
          ],
          // controls: true,
          // controls: true,
          hls: {
          // flv: {
            withCredentials: true
          //   withCredentials: true
         // },
          // },
          fitVideoSize: "auto"
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      let dom = document.createElement("div");
      let topLine = `
      <div id="vjsErrorMask">
        <div id="vjsErrorMaskContent"></div>
        <div class="btn" onclick="window.$$vjsClickBack()">确认</div>
      </div>
      <div class="vjs-top-layout">
        <div class="vjs-liver-info">
          <img onclick="window.$$vjsClickTip()" id="vjsAvatar" class="vjs-liver-avatar" src="" />
          <div onclick="window.$$vjsClickTip()" class="vjs-liver-user-info">
            <span id="vjsName" class="vjs-liver-user-name">name</span>
            <span id="vjsWatchNumber" class="vjs-liver-watch-number">观看：0</span>
          </div>
          <div class="vjs-liver-follow" onclick="window.$$vjsClickTip()">关注</div>
        </div>
        <div onclick="window.$$vjsClickTip()" class="vjs-tsjy">投诉建议</div>
        <img class="vjs-logo-img" src="http://zy.cuidingdang.xyz/FqJOczXooh2d9KXXyxB63Kd1pwfL" />
      </div>
      `;
      let redpack = `
      <div onclick="window.$$vjsClickTip()" class="vjs-center-redpack">
          <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/Fl0l0WJSKFsZiIEdS2nHUrdMyJwS" />
      </div>

      `;
      let bottomLine = `
      <div class="vjs-bottom-layout">
        <input onclick="window.$$vjsClickTip()" type="text" class="vjs-tim-input" placeholder="说点什么吧..." />
        <div class="vjs-icons">
          <span onclick="window.$$vjsClickTip()" class="vjs-icons-span">
            <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/FujYesUmcOBDsplCuH4d_8vbG21F" />
          </span>
          <span onclick="window.$$vjsClickTip()" class="vjs-icons-span">
            <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/FguVnUn3fQUiYZUFkamX2rBcvdKh" />
          </span>
          <span onclick="window.$$vjsClickTip()" class="vjs-icons-span">
            <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/FtHLdHTlrr8FtF93LHYmX5Bt6_LX" />
          </span>
          <span onclick="window.$$vjsClickTip()" class="vjs-icons-span">
            <img class="vjs-icon-img" src="http://zy.cuidingdang.xyz/FvdVJja_EtlOKtCjRC7Y-OXmeocF" />
          </span>
        </div>
      </div>
      `;
      let messageBox = `
        <div id="timMessageBox" class="vjs-message-box"></div>
      `;

      dom.innerHTML = topLine + bottomLine + messageBox + redpack;
      document.getElementById("myVideo").append(dom);
    },

// 点击播放按钮
    playClick() {
      this.player.play();
      this.isPlay = true;
    },

 

三、页面部分
 

<template>
  <div class="player-detail">
    <video
      webkit-playsinline
      playsinline
      loop
      x5-video-player-type="h5"
      x5-playsinline
      x5-video-ignore-metadata
      x5-video-orientation="portraint"
      ref="videoPlayer"
      id="myVideo"
      class="video-js player-video"
      style="object-fit: cover;width:100vw;height: 100vh;"
    >
    </video>
    <img v-show="!isPlay" class="vjs-play" @click="playClick" src="@/images/plays.png" />
  </div>
</template>