vue集成环信 web im视频通话

成功集成环信之后添加视频通话
因为只使用1对1视频，所以只记录一对一集成
1、集成一对一视频 需要引入音视频sdk，这边使用的是npm引入

npm install easemob-webrtc --save //单人视频

2、在maim.js引入

import webrtc from "easemob-webrtc"; // 单人视频

3、初始化 WebRTC Call

// 初始化 WebRTC Call 
var rtcCall = new WebIM.WebRTC.Call({
    connection: conn,
    mediaStreamConstaints: {
      audio: true,
      video: true,
      /**
      * 修改默认摄像头，可以按照以下设置，不支持视频过程中切换
      * video:{ 'facingMode': "user" } 调用前置摄像头
      * video: { facingMode: { exact: "environment" } } 后置
      */
    },
    listener: {
        onAcceptCall: function (from, options) {
            console.log('onAcceptCall::', 'from: ', from, 'options: ', options);
        },
        //通过streamType区分视频流和音频流，streamType: 'VOICE'(音频流)，'VIDEO'(视频流)
        onGotRemoteStream: function (stream, streamType) {
            console.log('onGotRemoteStream::', 'stream: ', stream, 'streamType: ', streamType);
            var video = document.getElementById('video');
            video.srcObject = stream;
        },
        onGotLocalStream: function (stream, streamType) {
            console.log('onGotLocalStream::', 'stream:', stream, 'streamType: ', streamType);
            var video = document.getElementById('localVideo');
            video.srcObject = stream;
        },
        onRinging: function (caller, streamType) {
            console.log("onRinging", caller)
        },
        onTermCall: function (reason) {
            console.log('onTermCall::');
            console.log('reason:', reason);
        },
        onIceConnectionStateChange: function (iceState) {
            console.log('onIceConnectionStateChange::', 'iceState:', iceState);
        },
        onError: function (e) {
            console.log(e);
        }
     }
});

4、添加到原型方便调用

Vue.prototype.$rtcCall = rtcCall;

5、A页面

// 记得插摄像头 记得插摄像头 记得插摄像头
<template>
  <div>
    <div @click="call">111</div>
    <video id="video" autoplay></video>
    <video id="localVideo" autoplay></video>
  </div>
</template>

<script>
  export default {
    data () {
      return {}
    },
    mounted () { // 页面加载完调用
      this.$login.user = '用户名'
      this.$login.pwd = '密码'
      this.$conn.open(this.$login) // 调用登录
      this.$conn.listen({
        onOpened: function ( message ) { //连接成功回调 
          console.log('登录成功')
        }
      })
      
      // 监听视频
      var taht = this
      taht.$rtcCall = new WebIM.WebRTC.Call({
          connection: taht.$conn,
          mediaStreamConstaints: {
            audio: true,
            video: true
          },
          listener: {
              onAcceptCall: function (from, options) {
                  console.log('onAcceptCall::', 'from: ', from, 'options: ', options);
              },
              //通过streamType区分视频流和音频流，streamType: 'VOICE'(音频流)，'VIDEO'(视频流)
              onGotRemoteStream: function (stream, streamType) { //接收音视频流
                  console.log('onGotRemoteStream::', 'stream: ', stream, 'streamType: ', streamType);
                  var video = document.getElementById('video');
                  video.srcObject = stream;
              },
              onGotLocalStream: function (stream, streamType) { // 发出音视频流
                  console.log('onGotLocalStream::', 'stream:', stream, 'streamType: ', streamType);
                  var video = document.getElementById('localVideo');
                  video.srcObject = stream;
              },
              onRinging: function (caller, streamType) { // 振铃
                  console.log("onRinging", caller)
                  taht.$rtcCall.acceptCall(); // 接受
              },
              onTermCall: function (reason) {
                  console.log('onTermCall::');
                  console.log('reason:', reason);
              },
              onIceConnectionStateChange: function (iceState) {
                  console.log('onIceConnectionStateChange::', 'iceState:', iceState);
              },
              onError: function (e) {
                  console.log(e);
              }
           }
      });
    },
    methods: {
      call () {
        // 音频呼叫对方
        // this.$rtcCall.caller = '自己id';
        // this.$rtcCall.makeVoiceCall('对方id'); //第三个参数为是否录制、第四个参数为是否合并，参数可以为空
        // 视频呼叫对方
        this.$rtcCall.caller = '自己id';
        this.$rtcCall.makeVideoCall('对方id');//用法同视频
      }
    }
  }
</script>

6、B页面

<template>
  <div>
    <div @click="call">222</div>
    <video id="video" autoplay></video>
    <video id="localVideo" autoplay></video>
  </div>
</template>

<script>
  export default {
    data () {
      return {}
    },
    mounted () { // 页面加载完调用
      this.$login.user = '用户名'
      this.$login.pwd = '密码'
      this.$conn.open(this.$login) // 登录
      this.$conn.listen({
        onOpened: function ( message ) { //连接成功回调 
          console.log('登录成功')
        }
      })
      // 初始化
      var taht = this
      taht.$rtcCall = new WebIM.WebRTC.Call({
          connection: taht.$conn,
          mediaStreamConstaints: {
            audio: true,
            video: true
          },
          listener: {
              onAcceptCall: function (from, options) {
                  console.log('onAcceptCall::', 'from: ', from, 'options: ', options);
              },
              //通过streamType区分视`频流和音频流，streamType: 'VOICE'(音频流)，'VIDEO'(视频流)
              onGotRemoteStream: function (stream, streamType) { // 接收音视频流
                  console.log('onGotRemoteStream::', 'stream: ', stream, 'streamType: ', streamType);
                  var video = document.getElementById('video');
                  video.srcObject = stream;
              },
              onGotLocalStream: function (stream, streamType) { // 发出音视频流
                  console.log('onGotLocalStream::', 'stream:', stream, 'streamType: ', streamType);
                  var video = document.getElementById('localVideo');
                  video.srcObject = stream;
              },
              onRinging: function (caller, streamType) { // 振铃
                  console.log("onRinging", caller)
                  taht.$rtcCall.acceptCall(); // 接受
              },
              onTermCall: function (reason) {
                  console.log('onTermCall::');
                  console.log('reason:', reason);
              },
              onIceConnectionStateChange: function (iceState) {
                  console.log('onIceConnectionStateChange::', 'iceState:', iceState);
              },
              onError: function (e) {
                  console.log(e);
              }
           }
      });
    },
    methods: {
      call () {
        // this.$rtcCall.caller = '自己id';
        // this.$rtcCall.makeVideoCall('对方id',null,false,false); //第三个参数为是否录制、第四个参数为是否合并，参数可以为空
      }
    }
  }
</script>

只是为了测试功能，所有页面略微简陋
自此 环信 web im 视频通话功能 集成完毕

以下是其他相关文章：
vue 集成环信 web im
vue 集成环信 web im 加 一对一视频通话