vue-cli项目集成：环信-实时视频

1.npm install easemob-websdk --save

2.npm install strophe.js

3.找到node_modules/easemob-websdk/src/connection.js 在17行加入

var Strophe = require('strophe.js').Strophe;
var meStrophe = require('strophe.js');
$iq = meStrophe.$iq;
$build = meStrophe.$build;
$msg = meStrophe.$msg;
$pres = meStrophe.$pres;

4.在737行 加入

var config = {    
    xmppURL: 'im-api.easemob.com',    
    apiURL: (location.protocol === 'https:' ? 'https:' : 'http:') + '//a1.easemob.com',    
    appkey: '*****************', //去环信自己申请一个appkey就行    
    https: false,    
    isMultiLoginSessions: true,    
    isAutoLogin: true,    
    isWindowSDK: false,    
    isSandBox: false,    
    isDebug: false,    
    autoReconnectNumMax: 2,    
    autoReconnectInterval: 2,    
    isWebRTC: (/Firefox/.test(navigator.userAgent) || /WebKit/.test(navigator.userAgent)) && /^https\:$/.test(window.location.protocol),    
    heartBeatWait: 4500,    
    isHttpDNS: false,    
    msgStatus: true,    
    delivery: true,    
    read: true,    
    saveLocal: false,    
    encrypt: {        
        type: 'none'    
    }
}

5.在4654行加入：

WebIM.config = config;

6.找到node_modules/strophe.js/dist/strophe.js 在2892行加入以下代码

  setJid: function (jid) {    
    this.jid = jid;    
    this.authzid = Strophe.getBareJidFromJid(this.jid);    
    this.authcid = Strophe.getNodeFromJid(this.jid);  
  },  
  getJid: function () {    
    return this.jid;  
  },

7.接下来就可以在main中使用了

8.静态文件static走引入EMedia_sdk-2.1.1.de86e59.js文件（可从官网上下载）

9.EMedia_sdk-2.1.1.de86e59.js文件中修改为自己的数据：

10.下面就可以在组件中使用了

<template>
  <div>
    <video ref="test" autoPlay playsInline/>
    <button @click="send">发送</button>
  </div>
</template>

<script>
import emedia from '../../../static/EMedia_sdk-2.1.1.de86e59'

export default {
  data() {
    return {
      $imconn: {},
      $imoption: {},
      localVideo: {},
      videoUrl: {},
      password: ''
    }
  },
  mounted() {
    this.$imconn = this.$imconn
    this.$imoption = this.$imoption
    this.loginWebIM()
  },
  methods: {
    listen() {
      const _this = this
      this.$imconn.listen({
        onClosed: function(message) {}, // 连接关闭回调
        onTextMessage: function(message) {}, // 收到文本消息
        onCmdMessage: function(message) {
          console.log('收到命令消息', message)
          if (message.action === 'ACTIONMONITOR') {
            const confrId = message.ext.ConferenceId
            const password = message.ext.ConferencePWD
            const webIM = emedia.mgr
            emedia.mgr.onStreamAdded = function(member, stream) {
              const video = _this.$refs['test']
              const located = stream.located()
              if (!located) {
                _this.videoUrl = stream
                emedia.mgr.onMediaChanaged(video, function(constaints) {
                  _this.videoUrl = stream
                })
                emedia.mgr.subscribe(member, stream, true, true, video).then((res) => {
                  console.log('订阅成功')
                }).catch((err) => {
                  console.log('订阅失败', err)
                })
              }
            }
            setTimeout(() => {
              console.log('加入会议室')
              emedia.mgr.joinConference(confrId, password, 'user ext field').then(function() {
                console.log('推流')
                emedia.mgr.publish({ audio: true, video: true }, 'user ext field').then((res) => {
                  console.log('推流成功')
                }).catch((err) => {
                  console.log('推流失败', err)
                })
              }).catch(function(e) {
                console.error('失败', e)
              })
            }, 100)
          }
        }, // 收到命令消息
        onAudioMessage: function(message) {}, // 收到音频消息
        onVideoMessage: function(message) {
          var node = document.getElementById('privateVideo')
          var option = {
            url: message.url,
            headers: {
              'Accept': 'audio/mp4'
            },
            onFileDownloadComplete: function(response) {
              var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response)
              node.src = objectURL
            },
            onFileDownloadError: function() {
              console.log('File down load error.')
            }
          }
          WebIM.utils.download.call(conn, option)
        }, // 收到视频消息
        onPresence: function(message) {}, // 处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
        onRoster: function(message) {}, // 处理好友申请
        onInviteMessage: function(message) {}, // 处理群组邀请
        onError: function(message) {}, // 失败回调
        onReceivedMessage: function(message) {}, // 收到消息送达服务器回执
        onMutedMessage: function(message) {} // 如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
      })
    },
    send() {
      var id = this.$imconn.getUniqueId() // 生成本地消息id
      var msg = new WebIM.message('cmd', id) // 创建命令消息
      msg.set({
        msg: 'msg',
        to: '*******', // 接收消息对象
        action: 'ACTIONMONITOR', // 用户自定义，cmd消息必填
        ext: { 'extmsg': 'extends messages' }, // 用户自扩展的消息内容（群聊用法相同）
        success: function(id, serverMsgId) {
        }, // 消息发送成功回调
        fail: function(err) {
          console.log(999, err)
        }
      })
      this.$imconn.send(msg.body)
      this.listen()
    },
    // 登录环信
    loginWebIM() { // 这儿是测试用的账号和密码
      this.$imoption.user = '*****'
      this.$imoption.pwd = '*******'
      this.$imconn.open(this.$imoption)
      this.listen()
    }
  }

}
</script>

 

转载于:https://my.oschina.net/zoujinxia/blog/3030128