1.进入官网下载页面下载环信demo，点击Web平台的SDK+Demo源码，下载最新Demo源码
2.进入github开源网站 克隆代码

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

1. demo 目录结构 webim/demo
2. 进入 webim/demo 文件夹
3. 安装依赖包

npm install

4. 启动项目

HTTPS=true npm start

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

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

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

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

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

必须依赖 IM SDK IM SDK 集成文档

import webrtc from 'easemob-webrtc'

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);
        }
     }
});

整个呼叫过程：
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' //推送内容
    };

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

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

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

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

rtcCall.acceptCall() // 无参数

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

rtcCall.endCall() // 无参数

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

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

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);
        },
      }
})

1v1通话支持不同集群区域的人员通话使用代理，减小延迟；
使用多集群代理需要音视频后台配置IP及端口的映射文件rtcconfig.json,并禁用相关appkey的直连,
也可以指定 rtcconfig.json 的私有化部署

调用 webrtc.emedia.config 方法开启海外代理

webrtc.emedia.config({
   ...
   useDeployMore: true, // 默认：false 不开启
   rtcConfigUrl: 'your rtcConfigUrl' // 如果不设置，将使用 sdk 后台配置的代理文件
})

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

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

• option 创建通话类的参数配置
• makeVideoCall 发起视频呼叫
• makeVoiceCall 发起音频呼叫