版本信息 'easemob-emedia': '^3.1.0',
'easemob-webrtc': '^3.1.0',
&nbs
版本信息
"easemob-emedia": "^3.1.0", "easemob-webrtc": "^3.1.0", "easemob-websdk": "^3.0.10",
通过npm安装
npm install easemob-websdk --save npm install easemob-webrtc --save npm install easemob-emedia --save
引入sdk
import WebIM from 'easemob-websdk'; import webrtc from 'easemob-webrtc'; import emedia from 'easemob-emedia'; import hx from '../../../static/common/hx.config.js';
文件hx.config.js
xmppURL: '//im-api-v2.easemob.com/ws', // xmpp Server地址 apiURL: '//a1.easemob.com', // rest Server地址 appkey: 'easemob-demo#chatdemoui', // App key https : false, // 是否使用https isHttpDNS: true, // 3.0 SDK支持，防止DNS劫持从服务端获取XMPPUrl、restUrl isMultiLoginSessions: false, // 是否开启多页面同步收消息，注意，需要先联系商务开通此功能 isDebug: false, // 打开调试，会自动打印log，在控制台的console中查看log autoReconnectNumMax: 2, // 断线重连最大次数 autoReconnectInterval: 2, // 断线重连时间间隔 heartBeatWait: 4500, // 使用webrtc（视频聊天）时发送心跳包的时间间隔，单位ms delivery: true, // 是否发送已读回
遇到的问题
1、Critical dependency: the request of a dependency is an expression
修改文件easemob-websdk\webimSDK3.0.10.js
return u(t);
//改为
return u(`${t}`);2、ReferenceError: regeneratorRuntime is not defined
第一步：下载babel-polyfill，
npm i babel-plugin-transform-runtime -D
Vue支持JSX语法
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-helper-vue-jsx-merge-props": "^2.0.3",
安装
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
第二步：配置.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"env",
"react",
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}3、
ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-stage-2' from
安装
npm install --save-dev babel-preset-stage-2
4、
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
降级版本，执行命令
npm install -D babel-loader@7 babel-core babel-preset-env babel-preset-react webpack
文件webpack.config.js中module增加
unknownContextCritical: false, strictExportPresence: true, exprContextCritical: false,
安装
npm install --save-dev babel-polyfill npm install --save babel-runtime
main.js添加
import 'babel-polyfill';
再次打包
ok完美
基本代码
// 配置
WebIM.config = hx.config;
WebIM.WebRTC = webrtc;
WebIM.EMedia = emedia;
// 创建连接
WebIM.conn = new WebIM.connection({
appKey : WebIM.config.appkey,
isHttpDNS : WebIM.config.isHttpDNS,
isMultiLoginSessions : WebIM.config.isMultiLoginSessions,
https : WebIM.config.https,
url : WebIM.config.xmppURL,
apiUrl : WebIM.config.apiURL,
isAutoLogin : WebIM.config.isAutoLogin,
heartBeatWait : WebIM.config.heartBeatWait,
autoReconnectNumMax : WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
isStropheLog : WebIM.config.isStropheLog,
delivery : WebIM.config.delivery
});
// 添加回调函数
WebIM.conn.listen({
onOpened(msg) { hx.oo(msg, t, WebIM); }, // 连接成功回调
onClosed(msg) { hx.oc(msg, t, WebIM); }, // 连接关闭回调
onTextMessage(msg) { hx.otm(msg, t, WebIM); }, // 收到文本消息
onEmojiMessage(msg) { hx.oem(msg, t, WebIM); }, // 收到表情消息
onPictureMessage(msg) { hx.opm(msg, t, WebIM); }, // 收到图片消息
onCmdMessage(msg) { hx.ocm(msg, t, WebIM); }, // 收到命令消息
onAudioMessage(msg) { hx.oam(msg, t, WebIM); }, // 收到音频消息
onLocationMessage(msg) { hx.olm(msg, t, WebIM); }, // 收到位置消息
onFileMessage(msg) { hx.ofm(msg, t, WebIM); }, // 收到文件消息
onVideoMessage(msg) { hx.ovm(msg, t, WebIM); }, // 收到视频消息
onPresence(msg) { hx.op(msg, t, WebIM); }, // 处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
onRoster(msg) { hx.or(msg, t, WebIM); }, // 处理好友申请
onInviteMessage(msg) { hx.oim(msg, t, WebIM); }, // 处理群组邀请
onOnline() { hx.ool(t, WebIM); }, // 本机网络连接成功
onOffline() { hx.off(t, WebIM); }, // 本机网络掉线
onError(msg) { hx.oe(msg, t, WebIM); }, // 失败回调
onBlacklistUpdate(list) { hx.oblu(list, t, WebIM); }, // 黑名单变动
onRecallMessage(msg) { hx.recall(msg, t, WebIM); }, // 收到撤回消息回调
onReceivedMessage(msg) { hx.orm(msg, t, WebIM); }, // 收到消息送达服务器回执
onDeliveredMessage(msg) { hx.odm(msg, t, WebIM); }, // 收到消息送达客户端回执
onReadMessage(msg) { hx.read(msg, t, WebIM); }, // 收到消息已读回执
onCreateGroup(msg) { hx.ocg(msg, t, WebIM); }, // 创建群组成功回执（需调用createGroupNew）
onMutedMessage(msg) { hx.omm(msg, t, WebIM); } // 如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
});
// 初始化 WebRTC Call
hx.rtc.call = new WebIM.WebRTC.Call({
connection: WebIM.conn,
/**
* 修改默认摄像头，可以按照以下设置，不支持视频过程中切换
* video:{ 'facingMode': "user" } 调用前置摄像头
* video: { facingMode: { exact: "environment" } } 后置
*/
mediaStreamConstaints: { audio: true, video: true },
listener: {
// 接受呼叫
onAcceptCall(from, options) { hx.rtc.oac(from, options, t, WebIM); },
// 获取对方媒体流
// 通过streamType区分视频流和音频流，streamType: 'VOICE'(音频流)，'VIDEO'(视频流)
onGotRemoteStream(stream, streamType) { hx.rtc.ogrs(stream, streamType, t, WebIM); },
// 获取本地媒体流
onGotLocalStream(stream, streamType) { hx.rtc.ogls(stream, streamType, t, WebIM); },
// 响铃
onRinging(caller, streamType) { hx.rtc.or(caller, streamType, t, WebIM); },
// 结束/拒绝通话
onTermCall(reason) { hx.rtc.otc(reason, t, WebIM); },
// Ice连接状态改变
onIceConnectionStateChange(iceState) { hx.rtc.oice(iceState, t, WebIM); },
// 错误
onError(e) { hx.rtc.oe(e, t, WebIM); },
// 对方打开麦克风
onOtherUserOpenVoice(e) { hx.rtc.oVoice(e, t, WebIM); },
// 对方打开摄像头
onOtherUserOpenVideo(e) { hx.rtc.oVideo(e, t, WebIM); }
}
});评论列表
发表评论
热评文章
相关阅读
