差别
这里会显示出您选择的修订版和当前版本之间的差别。
| 两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
|
rtc:one2one:web [2020/07/29 02:59] zhangdong [集成步骤] |
rtc:one2one:web [2020/12/17 08:37] (当前版本) huangfeipeng [5.视频呼叫] |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| - | ====== Web集成1对1通话 ====== | + | ======= Web集成1对1通话 ======= |
| - | easemob-webrtc 支持实时通话功能。用户可以与好友进行实时视频聊天。 | + | ====== 跑通Demo ======= |
| + | ===== 示例代码 ===== | ||
| - | **注意：** ''视频通话功能只支持 https+Webkit 浏览器。 | + | ** 1.进入官网下载页面[[http://www.easemob.com/download/im|下载环信demo]]，点击Web平台的SDK+Demo源码，下载最新Demo源码 **\\ |
| - | 不支持使用http/socks5 代理。'' | + | ** 2.进入github开源网站 [[https://github.com/easemob/webim|克隆代码]] **\\ |
| - | ===== 集成步骤 ===== | + | ===== 前提条件 ===== |
| + | 1.安装一款 Easemob Web SDK 支持的浏览器 | ||
| + | 2.本地安装 node 环境 >= 6.3.0 | ||
| - | 集成步骤如下： | + | ===== 运行 Demo ===== |
| + | 1. demo 目录结构 webim/demo\\ | ||
| + | 2. 进入 webim/demo 文件夹\\ | ||
| + | 3. 安装依赖包 | ||
| + | <code javascript> | ||
| + | npm install | ||
| + | </code> | ||
| + | 4. 启动项目 | ||
| + | <code javascript> | ||
| + | HTTPS=true npm start | ||
| + | </code> | ||
| - | 说明：easemob-webrtc包含了easemob-emedia，easemob-webrtc为单人+多人sdk，easemob-emedia为多人sdk，当然也可以用easemob-emedia自己去实现单人1v1的场景，两个sdk只需要引入其中一个。 | ||
| - | 1. 引入文件，其中easemob-webrtc音视频sdk，依赖easemob-websdk即时通讯sdk，支持npm安装和<script>标签两种方式引入： | + | ====== 快速集成 ====== |
| + | ===== 1. 环信后台注册 appkey ===== | ||
| + | 在开始集成前，你需要注册环信开发者账号并创建后台应用，参见[[http://docs-im.easemob.com/im/ios/sdk/prepare#注册并创建应用|注册并创建应用]] | ||
| + | ===== 2. 创建项目 ===== | ||
| + | a.可以简单的写一个 html,引入 SDK 测试 | ||
| + | b.或者使用 脚手架搭建一个项目 | ||
| + | ===== 3.引入 SDK ===== | ||
| + | '' ** 1v1 需要依赖 IM SDK 进行通信，所以首先需要引入 IM SDK ** '' \\ | ||
| - | a. 通过npm安装 | + | === 3.1通过 scrpit 标签的 src 引入 === |
| + | <code javascript> | ||
| + | <script src="../sdk/webimSDK.js"></script> //im SDK | ||
| + | <script src="../sdk/EMedia_x1v1.js"></script> | ||
| + | </code> | ||
| + | ===3.2使用 npm 获取 SDK=== | ||
| <code javascript> | <code javascript> | ||
| npm install easemob-websdk --save | npm install easemob-websdk --save | ||
| npm install easemob-webrtc --save | npm install easemob-webrtc --save | ||
| - | npm install easemob-emedia --save | ||
| - | </code> | ||
| - | b.通过<script>标签引入,WebIMConfig.js为webimSDK的配置文件 | ||
| - | <code html> | ||
| - | <script src="./WebIMConfig.js"></script> //webimSDK配置文件 | ||
| - | <script src="../sdk/webimSDK.js"></script> //im SDK | ||
| - | <script src="../sdk/EMedia_x1v1.js"></script> 或者 <script src="../sdk/EMedia_sdk-dev.js"></script> //音视频SDK | ||
| </code> | </code> | ||
| - | 2. 初始化 WebRTC Call 。 | + | ===== 4.初始化 SDK ===== |
| + | '' ** 必须依赖 IM SDK [[http://docs-im.easemob.com/im/web/intro/integration|IM SDK 集成文档]] ** ''\\ | ||
| + | ===4.1 引入 sdk === | ||
| + | <code javascript> | ||
| + | import webrtc from 'easemob-webrtc' | ||
| + | </code> | ||
| + | === 4.2 初始化 WebRTC Call，用于实现 1v1 音视频通话 === | ||
| <code javascript> | <code javascript> | ||
| - | var rtcCall = new WebIM.WebRTC.Call({ | + | var rtcCall = new webrtc.Call({ |
| - | connection: conn, | + | connection: conn, // WebIM 的链接信息 |
| mediaStreamConstaints: { | mediaStreamConstaints: { | ||
| audio: true, | audio: true, | ||
| 行 66: | 行 88: | ||
| console.log('onIceConnectionStateChange::', 'iceState:', iceState); | console.log('onIceConnectionStateChange::', 'iceState:', iceState); | ||
| }, | }, | ||
| + | // 通话断网监听 | ||
| + | onNetWorkDisconnect(endType) { // endType: local || remote, 哪一端断网 | ||
| + | console.log('1v1 onNetWorkDisconnect', endType); | ||
| + | }, | ||
| onError: function (e) { | onError: function (e) { | ||
| console.log(e); | console.log(e); | ||
| 行 73: | 行 99: | ||
| </code> | </code> | ||
| - | 3. 调用 RTC 接口。 | + | ===== 5.视频呼叫 ===== |
| + | ** 整个呼叫过程：\\ | ||
| + | 1. 主叫发起呼叫 \\ | ||
| + | 2. 被叫收到呼叫（主叫被叫分属于两个页面，通过服务器发送消息）\\ | ||
| + | 3. 被叫接受呼叫或者拒绝呼叫 \\ | ||
| + | 4. 主叫收到被叫接受或者拒绝的回调 \\ | ||
| + | 5. 通话建立成功 \\ | ||
| + | 6. 一方挂断另一方收到挂断的回调 ** | ||
| + | ** config 参数为主动呼叫时的配置参数（该功能主要用作web端对APP端呼叫时使用） ** | ||
| <code javascript> | <code javascript> | ||
| - | // 视频呼叫对方 | + | var config = { |
| - | var config = { | + | |
| push: true, // 对方(app端)不在线时是否推送 | push: true, // 对方(app端)不在线时是否推送 | ||
| timeoutTime: 30000, // 超时时间 | timeoutTime: 30000, // 超时时间 | ||
| 行 83: | 行 116: | ||
| pushMsg: 'user is calling you' //推送内容 | pushMsg: 'user is calling you' //推送内容 | ||
| }; | }; | ||
| - | var call = function () { | ||
| - | rtcCall.caller = 'mengyuanyuan'; | ||
| - | //第三个参数为是否录制、第四个参数为是否合并，参数可以为空 | ||
| - | rtcCall.makeVideoCall('asdfghj',null,true,true,config); | ||
| - | }; | ||
| - | // 音频呼叫对方 | ||
| - | var call = function () { | ||
| - | rtcCall.caller = 'mengyuanyuan'; | ||
| - | rtcCall.makeVoiceCall('asdfghj',null,true,true,config);//用法同视频 | ||
| - | }; | ||
| - | // 关掉/拒绝视频 | ||
| - | var endCall = function () { | ||
| - | rtcCall.endCall(); | ||
| - | } | ||
| - | // 接受对方呼叫 | ||
| - | var acceptCall = function () { | ||
| - | rtcCall.acceptCall(); | ||
| - | } | ||
| </code> | </code> | ||
| - | 4. 绑定事件。 | + | === 5.1 主叫发起呼叫 === |
| + | <code javascript> | ||
| + | callBtn.onclick = function () { | ||
| + | rtcCall.caller = 'mengyuanyuan'; // 指定呼叫方名字 | ||
| + | rtcCall.makeVideoCall(callee,null,true,true,config); | ||
| + | }; | ||
| + | </code> | ||
| + | 在 rtcCall.makeVideoCall 方法中 注意以下参数的设置\\ | ||
| + | * 第一个参数callee: 被呼叫人名字 必需 string | ||
| + | * 第二个参数 指定传 null 必需 null | ||
| + | * 第三个参数 是否开启录制 非必需 boolean | ||
| + | * 第四个参数 是否开启录制合并 非必需 boolean | ||
| + | * 第五个参数 主动呼叫扩展配置 非必需 object | ||
| + | |||
| + | |||
| + | === 5.2 被叫方收到呼叫回调 === | ||
| <code javascript> | <code javascript> | ||
| - | document.getElementById('rtCall').onclick = call; | + | // 初始化的函数 |
| - | document.getElementById('rtEndCall').onclick = endCall; | + | var rtcCall = new webrtc.Call({ |
| - | document.getElementById('rtAcceptCall').onclick = acceptCall; | + | ... |
| + | listener: { | ||
| + | ... | ||
| + | onRinging: function (caller, streamType) { | ||
| + | console.log("onRinging", caller) | ||
| + | }, | ||
| + | } | ||
| + | }); | ||
| </code> | </code> | ||
| - | ===== 常见问题 ===== | + | === 5.3 被叫方接受呼叫 === |
| + | <code javascript> | ||
| + | rtcCall.acceptCall() // 无参数 | ||
| + | </code> | ||
| + | |||
| + | === 5.4 主叫方收到被叫接受呼叫的回调 === | ||
| + | <code javascript> | ||
| + | // 初始化的函数 | ||
| + | var rtcCall = new webrtc.Call({ | ||
| + | ... | ||
| + | listener: { | ||
| + | ... | ||
| + | onGotLocalStream: function (stream, streamType) { | ||
| + | // stream：媒体流，streamType：流类型 VIDEO 视频流、VOICE 语音流， 可根据不同的流类型做不同的UI展示 | ||
| + | var video = document.getElementById('localVideo'); | ||
| + | video.srcObject = stream; // 将流设置给 video标签 用于显示 | ||
| + | }, | ||
| + | } | ||
| + | }); | ||
| + | </code> | ||
| + | |||
| + | ===== 6. 关掉/拒绝通话 ===== | ||
| + | <code javascript> | ||
| + | rtcCall.endCall() // 无参数 | ||
| + | </code> | ||
| + | |||
| + | === 6.1 收到通话结束的回调 === | ||
| + | <code javascript> | ||
| + | // 初始化的函数 | ||
| + | var rtcCall = new webrtc.Call({ | ||
| + | ... | ||
| + | listener: { | ||
| + | ... | ||
| + | onTermCall: function (reason) { | ||
| + | |||
| + | }, | ||
| + | } | ||
| + | }); | ||
| + | </code> | ||
| + | ===== 7. 音频通话 ===== | ||
| + | 音频通话步骤与视频通话一致 | ||
| + | 回调方法共用 | ||
| + | 只是在回调中的 streamType 不同 | ||
| + | 结束通话方法相同 | ||
| + | === 7.1 发起音频通话 === | ||
| + | <code javascript> | ||
| + | callBtn.onclick = function () { | ||
| + | rtcCall.caller = 'mengyuanyuan'; // 指定呼叫方名字 | ||
| + | rtcCall.makeVoiceCall('asdfghj',null,true,true,config); | ||
| + | }; | ||
| + | </code> | ||
| + | ====== 进阶功能 ====== | ||
| + | ===== 取日志 ===== | ||
| + | 在控制台 调用 WebIM.EMedia.fileReport 方法可下载日志文件 | ||
| + | <code javascript> | ||
| + | WebIM.EMedia.fileReport() // 无参数 | ||
| + | </code> | ||
| + | ===== 通话中音视频控制 ===== | ||
| + | 调用 rtcCall.controlStream 方法可以控制 音视频的打开/关闭 | ||
| + | <code javascript> | ||
| + | rtcCall.controlStream(controlType, to) | ||
| + | </code> | ||
| + | 在 rtcCall.controlStream 方法中 注意以下参数的设置\\ | ||
| + | * controlType: 操作类型 ** 0:打开麦克风；1:关闭麦克风；2:关闭摄像头；3:打开摄像头 **,必需 number | ||
| + | * to: 对方 userId，,必需 string | ||
| + | |||
| + | ** 对方会收到回调函数 ** | ||
| + | <code javascript> | ||
| + | // 对方操作音频的回调 opened: true:打开音频、false:关闭音频 | ||
| + | onOtherUserOpenVoice: function (from, opened) { } , | ||
| + | |||
| + | // 对方操作视频的回调 opened: true:打开视频、false:关闭视频 | ||
| + | onOtherUserOpenVideo: function (from, opened) { }, | ||
| + | </code> | ||
| + | ===== 设置通话参数 ===== | ||
| + | 可以在初始化 ** rtcCall ** 的时候，指定** mediaStreamConstaints **字段 \\ | ||
| + | 自定义分辨率、采样率 | ||
| + | <code javascript> | ||
| + | var rtcCall = new webrtc.Call({ | ||
| + | ... | ||
| + | mediaStreamConstaints: { | ||
| + | audio: { //音频采样率 | ||
| + | sampleRate: 44100, | ||
| + | sampleSize: 16 | ||
| + | }, | ||
| + | video: { // 视频分辨率 宽度和高度 | ||
| + | width: { | ||
| + | exact: 1280 | ||
| + | }, | ||
| + | height: { | ||
| + | exact: 720 | ||
| + | } | ||
| + | } | ||
| + | }, | ||
| + | }, | ||
| + | </code> | ||
| + | |||
| + | ===== 离线推送 ===== | ||
| + | 在进行视频或者音频呼叫的时候，可指定是否推送消息 | ||
| + | |||
| + | <code javascript> | ||
| + | var config = { | ||
| + | push: true, // 对方(app端)不在线时是否推送 | ||
| + | ... | ||
| + | }; | ||
| + | callBtn.onclick = function () { | ||
| + | rtcCall.caller = 'mengyuanyuan'; // 指定呼叫方名字 | ||
| + | rtcCall.makeVideoCall(callee,null,true,true,config); | ||
| + | }; | ||
| + | </code> | ||
| + | ===== 云端录制 ===== | ||
| + | 在进行视频或者音频呼叫的时候，可指定是否录制和录制合并 | ||
| + | |||
| + | <code javascript> | ||
| + | var option = { | ||
| + | callee: //被叫者， | ||
| + | rec: //是否开启录制， | ||
| + | recMerge: //是否开启录制合并， | ||
| + | config: //其他配置参数 | ||
| + | } | ||
| + | callBtn.onclick = function () { | ||
| + | rtcCall.caller = 'mengyuanyuan'; // 指定呼叫方名字 | ||
| + | rtcCall.makeVideoCall(option.callee,null,option.rec,option.recMerge,option.config); | ||
| + | }; | ||
| + | </code> | ||
| + | ===== 断网检测 ===== | ||
| + | ** 在通话进行前指定监听函数 onNetWorkDisconnect ** | ||
| + | <code javascript> | ||
| + | var rtcCall = new webrtc.Call({ | ||
| + | ... | ||
| + | listener: { | ||
| + | ... | ||
| + | onNetWorkDisconnect(endType) { // endType: local || remote, 哪一端断网 | ||
| + | console.log('1v1 onNetWorkDisconnect', endType); | ||
| + | }, | ||
| + | } | ||
| + | }) | ||
| + | |||
| + | </code> | ||
| + | |||
| + | ===== 海外代理 ===== | ||
| + | 1v1通话支持不同集群区域的人员通话使用代理，减小延迟； | ||
| + | 使用多集群代理需要音视频后台配置IP及端口的映射文件rtcconfig.json,并禁用相关appkey的直连, | ||
| + | 也可以指定 rtcconfig.json 的私有化部署 | ||
| + | 调用 ** webrtc.emedia.config 方法开启海外代理 ** | ||
| + | <code javascript> | ||
| + | webrtc.emedia.config({ | ||
| + | ... | ||
| + | useDeployMore: true, // 默认：false 不开启 | ||
| + | rtcConfigUrl: 'your rtcConfigUrl' // 如果不设置，将使用 sdk 后台配置的代理文件 | ||
| + | }) | ||
| + | </code> | ||
| + | ===== 私有部署 ===== | ||
| + | |||
| + | 私有部署设置方法参见[[http://docs-im.easemob.com/im/web/other/privatedeploy|私有云sdk集成配置]]。 | ||
| + | |||
| + | |||
| + | ====== 客户端api ====== | ||
| + | 1V1音视频通话的API包括以下接口 | ||
| + | * option 创建通话类的参数配置 | ||
| + | * makeVideoCall 发起视频呼叫 | ||
| + | * makeVoiceCall 发起音频呼叫 | ||
| + | |||
| + | ^ 方法 ^ 功能 | ||
| + | | [[http://webim-h5.easemob.com/webrtc/jsdoc/out/-_Call.html | option]] | 创建类时的配置 | | ||
| + | | [[http://webim-h5.easemob.com/webrtc/jsdoc/out/global.html#makeVideoCall | makeVideoCall]] | 发起视频通话| | ||
| + | | [[http://webim-h5.easemob.com/webrtc/jsdoc/out/global.html#makeVoiceCall | makeVoiceCall]] | 发起音频通话| | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| - | Q：发起视频聊天时，收到提示“An error occurred when calling webrtc”，怎么办？ | ||
| - | A：请开启浏览器使用摄像头的权限。以Chrome为例，在地址栏中输入chrome:%%//%%settings/content，在“内容设置”页面下拉，找到“摄像头”，选择“当网站要求使用您的摄像头时询问您（推荐）”。 | ||