Web集成1对1通话

大约 5 分钟

Web集成1对1通话

跑通Demo

1. 示例代码

或进入环信客户端下载页面，选择Web SDK + Demo下载

2. 前提条件

1.安装一款 Easemob Web SDK  支持的浏览器
2.本地安装 node 环境 >= 6.3.0

3. 运行 Demo

  1. demo 目录结构 webim/demo
  2. 进入 webim/demo 文件夹
  3. 安装依赖包
npm install
  1. 启动项目
HTTPS=true npm start

快速集成

1. 环信后台注册 appkey

在开始集成前，你需要注册环信开发者账号并在后台创建应用，参见创建应用 。

2. 创建项目

a.可以简单的写一个 html,引入 SDK 测试 
b.或者使用 脚手架搭建一个项目

3. 引入 SDK

1v1 需要依赖 IM SDK 进行通信，所以首先需要引入 IM SDK

3.1 通过 scrpit 标签的 src 引入

<script src="../sdk/webimSDK.js"></script> //im SDK
<script src="../sdk/EMedia_x1v1.js"></script>

3.2 使用 npm 获取 SDK

npm install easemob-websdk --save
npm install easemob-webrtc --save

4. 初始化 SDK

4.1 引入 sdk

import webrtc from 'easemob-webrtc'

4.2 初始化 WebRTC Call，用于实现 1v1 音视频通话

var rtcCall = new webrtc.Call({
    connection: conn, // WebIM 的链接信息
	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);
		},
        // 通话断网监听
        onNetWorkDisconnect(endType) { // endType: local || remote, 哪一端断网
            console.log('1v1 onNetWorkDisconnect', endType);
        },
        onError: function (e) {
            console.log(e);
        }
     }
});

5. 视频呼叫

整个呼叫过程：

  1. 主叫发起呼叫
  2. 被叫收到呼叫（主叫被叫分属于两个页面，通过服务器发送消息）
  3. 被叫接受呼叫或者拒绝呼叫
  4. 主叫收到被叫接受或者拒绝的回调
  5. 通话建立成功
  6. 一方挂断另一方收到挂断的回调

config 参数为主动呼叫时的配置参数（该功能主要用作web端对APP端呼叫时使用）

var config = {
        push: true, // 对方(app端)不在线时是否推送
        timeoutTime: 30000, // 超时时间
        txtMsg: 'I gave you a video call.', // 给对方发送的消息
        pushMsg: 'user is calling you' //推送内容
    };

5.1 主叫发起呼叫

callBtn.onclick = function () {
    rtcCall.caller = 'mengyuanyuan'; // 指定呼叫方名字
    rtcCall.makeVideoCall(callee,null,true,true,config);
};

在 rtcCall.makeVideoCall 方法中 注意以下参数的设置

  • 第一个参数callee: 被呼叫人名字 必需 string
  • 第二个参数 指定传 null 必需 null
  • 第三个参数 是否开启录制 非必需 boolean
  • 第四个参数 是否开启录制合并 非必需 boolean
  • 第五个参数 主动呼叫扩展配置 非必需 object

5.2 被叫方收到呼叫回调

// 初始化的函数
var rtcCall = new webrtc.Call({
    ...
    listener: {
		...
		onRinging: function (caller, streamType) {
                   console.log("onRinging", caller)
		},
     }
});

5.3 被叫方接受呼叫

rtcCall.acceptCall() // 无参数

5.4 主叫方收到被叫接受呼叫的回调

// 初始化的函数
var rtcCall = new webrtc.Call({
    ...
    listener: {
		...
		onGotLocalStream: function (stream, streamType) {
			// stream：媒体流，streamType：流类型 VIDEO 视频流、VOICE 语音流， 可根据不同的流类型做不同的UI展示
			var video = document.getElementById('localVideo');
			video.srcObject = stream; // 将流设置给 video标签 用于显示
		},
     }
});

6. 关掉/拒绝通话

rtcCall.endCall() // 无参数

6.1 收到通话结束的回调

// 初始化的函数
var rtcCall = new webrtc.Call({
    ...
    listener: {
		...
		onTermCall: function (reason) {
			
		},
     }
});

7. 音频通话

音频通话步骤与视频通话一致
回调方法共用
只是在回调中的 streamType 不同
结束通话方法相同

7.1 发起音频通话

callBtn.onclick = function () {
    rtcCall.caller = 'mengyuanyuan'; // 指定呼叫方名字
    rtcCall.makeVoiceCall('asdfghj',null,true,true,config);
};

进阶功能

取日志

在控制台 调用 WebIM.EMedia.fileReport 方法可下载日志文件

WebIM.EMedia.fileReport() // 无参数

通话中音视频控制

调用 rtcCall.controlStream 方法可以控制 音视频的打开/关闭

rtcCall.controlStream(controlType, to)

在 rtcCall.controlStream 方法中 注意以下参数的设置

  • controlType: 操作类型 0:打开麦克风；1:关闭麦克风；2:关闭摄像头；3:打开摄像头 ,必需 number
  • to: 对方 userId，,必需 string

对方会收到回调函数

// 对方操作音频的回调 opened: true:打开音频、false:关闭音频
onOtherUserOpenVoice: function (from, opened) { } ,

// 对方操作视频的回调 opened: true:打开视频、false:关闭视频
onOtherUserOpenVideo: function (from, opened) { },

设置通话参数

可以在初始化 rtcCall 的时候，指定 mediaStreamConstaints 字段 自定义分辨率、采样率

var rtcCall = new webrtc.Call({
      ...
      mediaStreamConstaints: {
            audio: { //音频采样率
                  sampleRate: 44100,
                  sampleSize: 16
            },
            video: { // 视频分辨率 宽度和高度
                  width: {
                    exact: 1280
                  },
                  height: {
                    exact: 720
                  }
            }
      },
},

离线推送

在进行视频或者音频呼叫的时候，可指定是否推送消息

var config = {
    push: true, // 对方(app端)不在线时是否推送
    ...
};
callBtn.onclick = function () {
    rtcCall.caller = 'mengyuanyuan'; // 指定呼叫方名字
    rtcCall.makeVideoCall(callee,null,true,true,config);
};

云端录制

在进行视频或者音频呼叫的时候，可指定是否录制和录制合并

var option = {
  callee: //被叫者，
  rec: //是否开启录制，
  recMerge: //是否开启录制合并，
  config: //其他配置参数
}
callBtn.onclick = function () {
    rtcCall.caller = 'mengyuanyuan'; // 指定呼叫方名字
    rtcCall.makeVideoCall(option.callee,null,option.rec,option.recMerge,option.config);
};

断网检测

在通话进行前指定监听函数 onNetWorkDisconnect

var rtcCall = new webrtc.Call({
      ...
      listener: {
        ...
        onNetWorkDisconnect(endType) { // endType: local || remote, 哪一端断网
            console.log('1v1 onNetWorkDisconnect', endType);
        },
      }
})

私有部署

私有部署设置方法参见私有云sdk集成配置。

客户端API

1V1音视频通话的API包括以下接口

  • option 创建通话类的参数配置
  • makeVideoCall 发起视频呼叫
  • makeVoiceCall 发起音频呼叫
方法
optionopen in new window创建类时的配置
makeVideoCallopen in new window发起视频通话
makeVoiceCallopen in new window发起音频通话
环信 IM 文档 Version: 1.0.0 ©️环信