融云相关代码5.1版本

zongzi_494

已于 2022-11-16 17:21:54 修改

阅读量217

点赞数

分类专栏： vue页面文章标签：前端 javascript vue.js

于 2022-11-16 17:12:59 首次发布

本文链接：https://blog.csdn.net/zongzi494/article/details/127888728

版权

vue页面专栏收录该内容

22 篇文章 1 订阅

订阅专栏

这个是之前写比较老初版demo 后面在使用私有云的时候融云方面说不能用但是测试是可以用的哈所以整个代码就更换成最新的
如果只是应付项目演示用用还是没有问题
因为涉及上线才无奈换新的融云api

照例先贴出整个页面的代码这个我封装成组件了然后在最外层APP.vue页面引入
公有云和私有云的区别就是私有云有navi
基本傻瓜代码了引入就可以用了

getLoginUserToken这个接口是我们为了方便维护没有每次都去融云获取token
而是后端专门写了一个接口有一个获取token的页面存储起来长期使用

具体前端也可以去调用融云官方的api自己封装一个接口去实时获取token用来测试
上一篇应该有写如果配置转发
不过如果是内网上线还是要去后端转发来写接口的

在这里插入图片描述

<template>
  <div id="RongYun">
    <div class="rong-container">
      <!-- <h3 class="rong-title"> Web CallLib SDK Demo</h3> -->
      <div class="rong-action">
        <!-- <div  id='callee'>请等待在线 Demo 呼叫 ... </div> -->
        <div id='caller'>
          <span>当前登录用户：</span><span @click="DengL2"
                id='userId'></span><br />

          <div v-show="showpic">
            <div class="beonduty-flex ju-center">
              <div class="beonduty-img">
                <img :src="ToSrc">
              </div>
            </div>
            <div class="beonduty-flex ju-around">
              <div class="name">{{ToName}}</div>
              <div class="phone">{{targetIdvalue}}</div>
            </div>
          </div>

          <div>
            <!-- <input class="rong-input"
                   id="callUserId"
                   v-model="targetIdvalue"
                   type="text"
                   placeholder="被叫方用户 ID"
                   value=""
                   autocomplete="off"> -->

            <!-- <input id='call'
                   type="button"
                   value="发起通话"
                   @click="chaxunstatus()"> -->

            <div class="rong-flex"
                 v-show="showpic"
                 id='acceptID'>
              <div class="rong-btn rong-accept"
                   title="音频"
                   @click="chaxunstatus(1)"></div>
              <div class="rong-btn rong-video"
                   title="视频"
                   @click="chaxunstatus(2)"></div>
            </div>
          </div>

        </div>
      </div>
      <div class="rong-login-box">
        <div class="rong-video-box"></div>
        <div class="rong-input rong-btn rong-hungup rong-noshow"
             id='hunup'
             title="挂断"
             @click="hungup()"></div>
      </div>
      <!-- 来电的box -->
      <div class="rong-ringing"
           id='rong-ringing'>
        <div class="rong-flex">
          <div class="rong-btn rong-accept"
               title="接听"
               @click="accept()"></div>
          <div class="rong-btn rong-hungup"
               title="挂断"
               @click="hungup()"></div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>

import {
  getLoginUserToken,
  getUserStatus
} from "@/api/floodControlDrainage/floodControlDrainage.js";

import { getUserInfo } from "@/api/system/user";


export default {
  name: "RongYun",
  props: {
    Getphone: {
      type: String,
      default: () => ""
    },
    ToName: {
      type: String,
      default: () => ""
    },
    ToSrc: {
      type: String,
      default: () => require("@/assets/images/siping-fangxun/User-icon.png")
    },
    RYtype: {
      type: String,
      default: () => ""
    },
    // getmediaType: {
    //   type: Number,
    //   default: () => 1
    // }
  },
  data () {
    return {
      getmediaType: 1,
      showpic: true,
      targetIdvalue: '',

      callMessage: '',
      currentUserId: '',
      rongCallLib: '',
      token: '',
      appkey: 'bmdehs6pb8ivs',
      navi: '',


      // appkey: 'pvxdm11bfioir',
      // navi: 'https://59.198.32.237:1444',

      userId: '',
      names: '',
      userNos: '',

      status: '',
    }
  },
  computed: {},
  methods: {
    // 获取用户信息
    GetuserInfo () {
      getUserInfo().then(res => {
        this.userinfo = res.data.data;
        console.log('this.userinfo', this.userinfo);
        this.userId = res.data.data.phone
        this.names = res.data.data.name
        this.userNos = res.data.data.account

        this.$nextTick(() => {
          this.DengL2()
        })

      });
    },

    DengL2 () {
      let params = {
        userNo: this.userNos,
        userName: this.names,
        phone: this.userId
      }

      getLoginUserToken(params).then(res => {
        if (res.data.code == 200) {
          console.log(res.data.data);
          this.token = res.data.data.token;

          if (res.data.data.token) {
            this.$nextTick(() => {
              this.connectIM()
            })
          }
        } else {
          let userUUIDNode = this.getDom('#userId');
          userUUIDNode.innerHTML = '登录失败,请点击此处重新登录';
        }

      }).catch(error => {
        let userUUIDNode = this.getDom('#userId');
        userUUIDNode.innerHTML = '登录失败,请点击此处重新登录';
      })
    },


    getDom (key) {
      return document.querySelector(key);
    },

    connectIM (e) {
      var prams = {
        Config: {
          appkey: this.appkey,
          navi: this.navi,
        },
        token: this.token,
      }

      this.initIM(prams).then((userId, rtcClient) => {

        console.log('rtcClient', rtcClient);
        console.log('userId', userId);

        this.currentUserId = userId.id;
        let userUUIDNode = this.getDom('#userId');
        userUUIDNode.innerHTML = userId.id;


        this.callInit(userId.rtc);
      });
    },


    initIM (params) {
      var appkey = params.Config.appkey;
      var navi = params.Config.navi;
      var token = params.token;
      RongIMClient.init(appkey, null, {
        navi
      });

      RongIMClient.setConnectionStatusListener({
        onChanged: function (status) {
          console.log('status changed', status);
          switch (status) {
            case RongIMLib.ConnectionStatus.CONNECTING:
              break;
            case RongIMLib.ConnectionStatus.DISCONNECTED:
              break;
            case RongIMLib.ConnectionStatus.DOMAIN_INCORRECT:
            case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
              break;
          }
        }
      });

      RongIMClient.setOnReceiveMessageListener({
        onReceived: function (message) {
          console.log(message);
        }
      });
      return new Promise((resolve, reject) => {
        const rtcClient = RongIMClient.getInstance().install(RCRTC.installer);
        RongIMClient.getInstance().install(RongCallLib.installer)

        RongIMClient.connect(token, {
          onSuccess: function (userId) {
            var config = {
              im: RongIMClient.getInstance(),
              id: userId,
              rtc: rtcClient
            }
            resolve(config)
          },
          onTokenIncorrect: reject,
          onError: reject
        });
      });
    },

    callInit (rtcClient) {
      var that = this
      let config = {
        RongIMLib: RongIMLib,
        RongRTC: rtcClient,
        RongRTCAdapter: RCRTCAdapter,
        width: 640,
        height: 480,
        maxRate: 600,
        minRate: 50,
        frameRate: 15,
      };

      this.rongCallLib = RongCallLib.init(config);

      var videoWatcher = function (result) {
        console.log(result)
        let { type, isLocal } = result;
        const parentDom = document.querySelector('.rong-video-box');
        if (type === 'added') {
          let video = result.data;
          // video.muted = true;
          parentDom.appendChild(video);
          document.getElementById('hunup').classList.add('rong-show');
          document.getElementById('acceptID').classList.add('rong-noshow');
          if (isLocal) {
            console.log('we')
            // setTimeout(function () {
            //   that.rongCallLib.mute();
            // }, 500)

          }
        }
      };

      this.rongCallLib.videoWatch(videoWatcher);

      var commandWatcher = function (message) {
        console.log('message', message, that.commandEvents)
        that.callMessage = message
        that.commandEvents(message.messageType, message);
        // event && event(message);
      };
      this.rongCallLib.commandWatch(commandWatcher);
    },


    commandEvents (messageType, message) {
      console.log('messageType', messageType, message);
      switch (messageType) {
        case 'InviteMessage':
          this.InviteMessage(message)
          this.bus.$emit('openrongyuntype')
          break;
        case 'HungupMessage':
          this.HungupMessage(message)
          break;
        case 'SummaryMessage':
          if (this.RYtype == 'initiative') {
            this.showpic = true
          }
          this.SummaryMessage(message)
          break;
      }
    },


    InviteMessage (message) {
      this.callMessage = message;
      document.getElementById('rong-ringing').classList.add('rong-show');
      document.getElementById('acceptID').classList.add('rong-noshow');

      // NotificationComm('呼叫通知', { body: '收到呼叫等待您的接听' });
    },

    HungupMessage (message) {
      this.callMessage = message;
      this.hungup();
    },
    SummaryMessage () {
      document.getElementById('rong-ringing').classList.remove('rong-show');
      document.getElementById('acceptID').classList.remove('rong-noshow');
    },

    accept () {
      let params = this.messageToCallInfo(this.callMessage);
      this.rongCallLib.accept(params, function (error) {
        if (error) {
          console.error('接听通话失败', error);
        }
        document.getElementById('rong-ringing').classList.remove('rong-show');
        document.getElementById('acceptID').classList.remove('rong-noshow');

      });
    },

    hungup () {
      let params = this.messageToCallInfo(this.callMessage)
      var that = this
      this.rongCallLib.hungup(params, function (error) {
        if (error) {
          console.error('挂断通话失败', error);
        } else {

          document.getElementById('rong-ringing').classList.remove('rong-show');
          document.getElementById('acceptID').classList.remove('rong-noshow');


          document.getElementById('hunup').classList.remove('rong-show');
          const parentDom = document.querySelector('.rong-video-box');
          parentDom.innerHTML = '';
        }
      });
    },

    call () {
      console.log('getmediaType', this.getmediaType);
      let that = this
      let params = {
        conversationType: 1,
        targetId: this.targetIdvalue,
        inviteUserIds: [this.targetIdvalue],
        mediaType: this.getmediaType,
        extra: {
          name: 'test'
        }
      };
      this.callMessage = {
        conversationType: params.conversationType,
        targetId: params.targetId,
        content: {
          mediaType: params.mediaType
        }
      }
      this.rongCallLib.call(params, function (error) {
        if (error) {
          // console.error('发起通话失败', error);
          that.$message({
            type: "warning",
            message: '发起通话失败',
          });
        }
      });
    },

    // 查询当前用户是否在线
    async chaxunstatus (type) {
      this.getmediaType = type
      let prams = {
        phone: this.targetIdvalue
      }

      await getUserStatus(prams).then(res => {
        if (res.data.code == 200) {
          let data = JSON.parse(res.data.data)
          this.status = data.status == 1 ? true : false
          console.log('status', this.status);

          if (this.status) {
            this.call()
          } else {
            this.$message({
              type: "warning",
              message: '当前用户不在线！',
            });
          }

        }
      })
    },

    messageToCallInfo (message) {
      console.log('message', message);
      return {
        conversationType: message.conversationType,
        targetId: message.targetId,
        mediaType: message.content.mediaType,
        extra: {
          name: 'aaaa'
        }
      };
    },

  },
  // computed: {
  //   ...mapGetters([
  //     "userInfo",
  //   ]),
  // },
  watch: {
    // 便于调试 所以赋值方便可以修改电话
    Getphone: {
      handler (val) {
        if (val) {
          this.targetIdvalue = val
        }
      },
      immediate: true
    },
    // //控制判断是主动initiative打开 还是被动passivity呼叫打开
    //隐藏对应的图片
    RYtype: {
      handler (val) {
        if (val == 'initiative') {
          this.showpic = true
        } else {
          this.showpic = false
        }
      },
      immediate: true
    }
  },
  mounted () {
    // debugger
    this.GetuserInfo()
  },
  beforeDestroy () {
    // this.hungup()
  }
};
</script>
<style lang="less" scoped>
@import "./css/style.css";

#RongYun {
  width: 100%;
  height: 100%;
  font-size: 16px;
}

.rong-call input {
  color: #000 !important;
}

input:-internal-autofill-selected {
  -webkit-text-fill-color: #000 !important;
}
</style>

用v-show和bus操控显影这样才能做到页面只初始化加载一次而不报RTC重复加载的错误
下面是APP.VUE的bus相关作为参考

<template>
  <div id="app"
       :class="[$route.fullPath=='/fxkhPage/index'?'activesssssssss':'']">
    <router-view />

    <!-- 融云的弹框 -->
    <div class="RYdia bg-every"
         v-show="rongyuntype">
      <div class="closeBtn"
           @click="rongyuntype=false">X</div>
      <RongYunPage :Getphone='GetFXphone'
                   :ToName='ToName'
                   :ToSrc='ToSrc'
                   :RYtype='RYtype'></RongYunPage>
    </div>

  </div>
</template>

<script>
import RongYunPage from '@/page/rongyun/index'  //融云子组件


export default {
  components: {
    RongYunPage
  },
  name: "app",
  data () {
    return {
      rongyuntype: false,
      GetFXphone: '',
      ToName: '',
      ToSrc: '',
      RYtype: 'initiative',  //控制判断是主动initiative打开 还是被动passivity呼叫打开
    };
  },
  created () {
  },
  mounted () {
    this.bus.$on('closeFX', data => {
      this.rongyuntype = false
    })

    this.bus.$on('openrongyuntype', data => {
      this.RYtype = 'passivity'
      this.rongyuntype = true
    })

    this.bus.$on('GetFXphone', data => {
      console.log(data);
      this.RYtype = 'initiative'
      this.GetFXphone = data.phone
      this.ToName = data.name
      this.ToSrc = data.src
      // this.getmediaType = Number(data.mediaType)

      this.$nextTick(() => {
        this.chaxunstatus()
      })

    })

    this.bus.$on((isOneMap) => {
      console.log(isOneMap, "isOneMap");
    });
    console.log(process.env);
  },
  beforeDestroy () {
    this.bus.$off('GetFXphone')
    this.bus.$off('closeFX')
    this.bus.$off('openrongyuntype')

  },

  methods: {
    chaxunstatus () {
      if (this.GetFXphone) {
        this.rongyuntype = true
      } else {
        this.$message({
          type: 'error',
          message: '无电话号码！',
        });
      }
    },
  },

这里是index.html引入部分需要去融云管网下载对应的js 一般是需要官方提供账号密码才可以下载的哦

  <script src="./rongyun/RongCallLib.3.2.1.min.js" type="text/javascript"></script>
  <script src="./rongyun/RongIMLib-2.9.8-enterprise.2.prod.js" type="text/javascript"></script>
  <script src="./rongyun/RCRTC-5.1.latest.js" type="text/javascript"></script>
  <script src="./rongyun/RCRTC-5.1.0-enterprise.4.prod.js" type="text/javascript"></script>
  <script src="./rongyun/RCRTCAdapter-1.0.5.prod.js" type="text/javascript"></script>

最后就是传值调取这个弹框然后点击调用最后的方法了

    // 调取融云服务
    torongyun (name, phone, src, mediaType) {
      let data = {
        phone: phone ? phone : '13455556666',
        name: name ? name : '默认姓名',
        src: src,
      }
      this.bus.$emit('GetFXphone', data)
    },