客服云修改语言

客服云修改语言

1
评论

【环信合伙人】让一部分人钱包先鼓起来,1000元京东卡拿不停 合伙人 环信

beyond 发表了文章 • 148 次浏览 • 2020-05-18 18:54 • 来自相关话题

环信成立于2013年,是国内领先的企业级软件服务提供商,于2016年荣膺“Gartner 2016 Cool Vendor”。旗下主要产品线包括国内上线最早规模最大的即时通讯能力PaaS平台——环信即时通讯云,国内领先的全场景音视频PaaS平台——环信实时音视频云,全媒体智能客服SaaS平台——环信客服云,以及企业级人工智能服务能力平台——环信机器人,是国内唯一拥有云通讯、云客服和AI机器人三大赛道完整自主知识产权技术储备企服公司。目前已经服务了30万款APP,10万余家企业,注册开发者40万,SDK覆盖手机终端23亿部,现已覆盖包括保险、证券、银行、电商、教育、汽车、物流、出行等领域的众多标杆企业。环信合作人计划,人人为我我为人人,四大产品线总有一款适合小伙伴和小伙伴的朋友们。赠人玫瑰手留余香,500元和1000元京东卡不限次数拿不停。




















 
点击链接,即刻参与 http://www.easemob.com/event/partner 
  查看全部
环信成立于2013年,是国内领先的企业级软件服务提供商,于2016年荣膺“Gartner 2016 Cool Vendor”。旗下主要产品线包括国内上线最早规模最大的即时通讯能力PaaS平台——环信即时通讯云,国内领先的全场景音视频PaaS平台——环信实时音视频云,全媒体智能客服SaaS平台——环信客服云,以及企业级人工智能服务能力平台——环信机器人,是国内唯一拥有云通讯、云客服和AI机器人三大赛道完整自主知识产权技术储备企服公司。目前已经服务了30万款APP,10万余家企业,注册开发者40万,SDK覆盖手机终端23亿部,现已覆盖包括保险、证券、银行、电商、教育、汽车、物流、出行等领域的众多标杆企业。环信合作人计划,人人为我我为人人,四大产品线总有一款适合小伙伴和小伙伴的朋友们。赠人玫瑰手留余香,500元和1000元京东卡不限次数拿不停。
6.jpg

2.png

3.jpg

4.jpg

5.png

 
点击链接,即刻参与 http://www.easemob.com/event/partner 
 
2
评论

基于环信sdk在uni-app框架中快速开发一款多平台社交Demo SDK uni_app 环信

beyond 发表了文章 • 360 次浏览 • 2020-05-11 11:34 • 来自相关话题

说在前面:此款 demo 是基于 环信sdk 开发的一款具有单聊、群聊、聊天室、音视频等功能的应用。在此之前我们已经开发完 Vue、react(web端)、微信小程序。这三个热门领域的版本,如有需要源码可以后台留言索取。





 
安装开发工具

我们选用微信小程序来用做示例(如果选择百度、支付宝安装对应开发者工具即可)、

微信开发者工具建议还是安装最新版的。uni-app的开发也必须安装HBuilderX工具,这个是捆绑的,没得选择。要用uni-app,你必须得装!

工具安装:

微信开发者工具

HBuilderX

项目demo介绍:






项目demo启动预览:





 
快速集成环信 sdk:

1、复制整个utils文件






如果你想具体了解主要配置文件 请看这个链接:

http://docs-im.easemob.com/im/web/intro/start

2、如何使用环信的appkey ,可以在环信 console 后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到配置文件中 ,如下图所示:






以上两个重要的配置准备完成之后就可以进行一系列的操作了(收发消息、好友申请、进群入群通知等)

在uni-app中 使用环信 sdk 实现添加、删除好友:

1、在全局 App.vue 文件 钩子函数 onLaunch() 中监听各种事件 (好友申请、收到各类消息等)如图:






发送好友请求:






在onPresence(message)事件中接收到好友消息申请:






同意好友请求:






拒绝好友请求:






实现收发消息:

1、给好友发送消息:






2、接收到消息:

在onTextMessage(message)事件中接收到好友消息,然后做消息上屏处理(具体消息上屏逻辑可看demo中代码示例):





以上展示的仅仅为基本业务场景,更多的业务逻辑详情请看demo示例。api具体详情可以查看 环信sdk 文档

最后结语:基于uni-app这个框架可实现多平台, 虽然目前一期集成环信sdk的版本仅支持微信小程序版本,但二期我们将加入头条、支付宝等小程序,敬请期待。PS:对于安卓、ios移动端,我们建议使用针对移动端开发的sdk版本。

基于uni-app的开发其中也趟了不少坑,在这里就不多赘述了。回归到框架的选型来讲,选用uni-app开发小程序,可同时并行多端小程序,这点是真香,一次开发多端发布。至于审核嘛~ 时快时慢。 查看全部
说在前面:此款 demo 是基于 环信sdk 开发的一款具有单聊、群聊、聊天室、音视频等功能的应用。在此之前我们已经开发完 Vue、react(web端)、微信小程序。这三个热门领域的版本,如有需要源码可以后台留言索取。

1.jpg

 
安装开发工具

我们选用微信小程序来用做示例(如果选择百度、支付宝安装对应开发者工具即可)、

微信开发者工具建议还是安装最新版的。uni-app的开发也必须安装HBuilderX工具,这个是捆绑的,没得选择。要用uni-app,你必须得装!

工具安装:

微信开发者工具

HBuilderX

项目demo介绍:

2.jpg


项目demo启动预览:

3.jpg

 
快速集成环信 sdk:

1、复制整个utils文件

4.jpg


如果你想具体了解主要配置文件 请看这个链接:

http://docs-im.easemob.com/im/web/intro/start

2、如何使用环信的appkey ,可以在环信 console 后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到配置文件中 ,如下图所示:

5.jpg


以上两个重要的配置准备完成之后就可以进行一系列的操作了(收发消息、好友申请、进群入群通知等)

在uni-app中 使用环信 sdk 实现添加、删除好友:

1、在全局 App.vue 文件 钩子函数 onLaunch() 中监听各种事件 (好友申请、收到各类消息等)如图:

6.jpg


发送好友请求:

7.jpg


在onPresence(message)事件中接收到好友消息申请:

8.jpg


同意好友请求:

9.jpg


拒绝好友请求:

10.jpg


实现收发消息:

1、给好友发送消息:

11.jpg


2、接收到消息:

在onTextMessage(message)事件中接收到好友消息,然后做消息上屏处理(具体消息上屏逻辑可看demo中代码示例):

12.jpg

以上展示的仅仅为基本业务场景,更多的业务逻辑详情请看demo示例。api具体详情可以查看 环信sdk 文档

最后结语:基于uni-app这个框架可实现多平台, 虽然目前一期集成环信sdk的版本仅支持微信小程序版本,但二期我们将加入头条、支付宝等小程序,敬请期待。PS:对于安卓、ios移动端,我们建议使用针对移动端开发的sdk版本。

基于uni-app的开发其中也趟了不少坑,在这里就不多赘述了。回归到框架的选型来讲,选用uni-app开发小程序,可同时并行多端小程序,这点是真香,一次开发多端发布。至于审核嘛~ 时快时慢。
1
评论

手把手教程:4小时开发一个视频会议APP【附开源代码】 环信 开源 视频会议

fat1 发表了文章 • 868 次浏览 • 2020-04-17 00:29 • 来自相关话题

今年是不平凡的一年,没错,就是因为疫情,因为疫情原因 ,大家只能呆着家里,严重影响了我们正常的学习 生活 工作,在这种情况下,只能在家办公,这时候大家就会想到线上视频会议,目前很多互联网公司有这个产品,比较出名的就比如 腾讯会议 钉钉 zoom等,用这些是很方便,但是如果能开发自己的视频会议,那会不会更好或者是更有成就感,下面简单介绍这个这个项目,和大概的开发过程。本项目基于环信音视频云来完成,实现的主要功能有:
  创建会议、删除会议、获取指定会议室详情、加入会议室、退出会议室等关于会议的管理 ;  获取会议室参会人名列表、踢人,设置观众为主播,设置主播为观众等关于会议室的人员管理;  共享桌面(web端);
 三个端的实现:Android,iOS,Web

上面这些功能在项目中都已经实现。还有水印 ,变声等高级功能在环信音视频SDK的接口内部都已经封装好,本项目没有实现 ,大家可以自行去实现。有关多人音视频功能更详细的介绍大家可以参考:这儿。多人音视频实现的实现主要有以下一些场景:社交交友,远程心理咨询、远程医疗、一对一在线教育、远程视频辅助等。咳咳 ,接下来就是纯干货了,给大家介绍我是如何一步步开发出一个完整的多人音视频app。
 
项目截图
 
首先给大家展示下项目运行的效果图,会议界面 主窗口是一个大的 RelativeLayout ,最下面的那一排排小窗口是的实现方法是HorizontalScrollView加上一个开源的组件 com.jaouan.compoundlayout.RadioLayoutGroup 实现的,点击下面的小窗口后,可以 把小窗口的视频流显示在大屏上,具体是调用 updateRemoteSurfaceView(String streamId, EMCallSurfaceView remoteView)来更新SurfaceView,具体的细节大家可以看看代码里面的实现 最后会公布代码开源地址。
















准备工作
    大家得下载安装Android Studio,配置好Android 开发环境,怎么详细配置我就在这不再细说了 网上有很多的教程,大家自己可以找找看,然后大家可以看看环信多人音视频会议的主要功能和一些基本概念介绍。
集成 
  1. 首先大家会想问怎么调用环信的SDK ,大家可以使用 远程依赖SDK包,建议大家用最新版本的远程依赖:
     com.hyphenate:hyphenate-sdk:3.6.6 ,依赖包可以放在 build.gradle里面的 dependencies 选项下面,如下图所示





2.其次怎么使用环信的appkey ,可以在环信音视频云后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到AndroidManifest.xml中 ,如下图所示:






3.经过以上两个重要的前期配置准备 ,接下来我们就可以开始进行代码开发了,首先我们先创建一个项目的DemoApplication类和      DemoHelper类,DemoApplication 类和DemoHelper类都是一个单例类 ,DemoApplication 主要功能就是进行DemoHelper 的初始化,而DemoHelper里面主要是主要有一些option 配置和EMClient 进行初始化,代码如下所示:public void init(Context context) {
EMOptions options = initChatOptions(context);
EMClient.getInstance().init(context, options);
PreferenceManager.init(context);
}
  DemoHelper还有一个重要的功能就是设置  EMConferenceListener 进行会议监听,有关 EMConferenceListener的类的详细介绍 ,通过这个监听可以再加入会议的时候获取到已经在会议中的流和主播信息,分别是通过其中以下两个回调获取:@Override
public void onMemberJoined(EMConferenceMember member){

}

@Override
public void onStreamAdded(EMConferenceStream stream){

}
4.DemoApplication类完成以后,接下来就是怎么去登陆 环信IM 账号和 创建加入会议房间了,首次安装的时候都没有账号,我们使用的办法是自动注册一个账号 在本地进行保存,然后进行登录 ,注册 登录详细接口请看 这儿,  注册 登录的调用大概如下所示: 
 try {
        //注册一个环信ID
        EMClient.getInstance().createAccount(username, password);
            
        //注册成功进行登录
        PreferenceManager.getInstance().setCurrentUserName(username);
        PreferenceManager.getInstance().setCurrentuserPassword(password);
        login();
    } catch (final HyphenateException e) {
       runOnUiThread(new Runnable() {
               public void run() {
                  int errorCode=e.getErrorCode();
                   if(errorCode==EMError.NETWORK_ERROR){
                    Toast.makeText(getApplicationContext(), getResources().getString(R.string.network_anomalies), Toast.LENGTH_SHORT).show();
      }
   }   
}
 
  public void login() {
 
        //登录已经注册成功的环信ID
        EMClient.getInstance().login(username, password, new EMCallBack() {
            @Override
            public void onSuccess() {
                Log.d(TAG, "login: onSuccess");
                //登录成功进入会议房间
                joinRoom();
            }
            @Override
            public void onProgress(int progress, String status) {
                Log.d(TAG, "login: onProgress");
            }
            @Override
            public void onError(final int code, final String message) {
                Log.d(TAG, "login: onError: " + code);
                runOnUiThread(new Runnable() {
                    public void run() {
                        Toast.makeText(getApplicationContext(), getString(R.string.Login_failed) + message,Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });
    }
登录完成以后,我们可以根据房间名创建并加入房间,主要代码大概如下: EMClient.getInstance().conferenceManager().joinRoom(currentRoomname, currentPassword, conferenceRole,roomConfig, new EMValueCallBack<EMConference>(){
@Override
public void onSuccess(EMConference value) {
EMLog.i(TAG, "join conference success");
Intent intent = new Intent(MainActivity.this, ConferenceActivity.class);
startActivity(intent);
finish();
}
@Override
public void onError(final int error, final String errorMsg) {
EMLog.e(TAG, "join conference failed error " + error + ", msg " + errorMsg);
runOnUiThread(new Runnable() {
@Override
public void run() {
setBtnEnable(true);
if(error == CALL_TALKER_ISFULL) {
takerFullDialogDisplay();
}else{
Toast.makeText(getApplicationContext(), "Join conference failed " + error + " " + errorMsg, Toast.LENGTH_SHORT).show();
}
}
});
}
});
EMClient.getInstance().conferenceManager().joinRoom() API可以根据房间名创建指定会议,当以该房间名命名的会议不存在时候,会直接创建,当会议已经创建好 可以根据正确的房间名和密码加入房间 ,到这一步为止,我们已经成功的创建 并加入会议。
5.加入会议以后我们进入到会议界面,展示从DemoHelper类 EMConferenceListener 中的 onStreamAdded 回调 和 onMemberJoined 获取到的流和主播列表 ,在ConferenceActivity 中实现 EMConferenceListener ,然后直接把 ConferenceActivity 注册监听,用以下方法  EMClient.getInstance().conferenceManager().addConferenceListener(this); 这样就可实现 EMConferenceListener 事件的处理,比如
 主播 进出房间 :
public void onMemberJoined(final EMConferenceMember member);
public void onMemberExited(final EMConferenceMember member);

增加流 移除流:
public void onStreamAdded(final EMConferenceStream stream)
 public void onStreamRemoved(final EMConferenceStream stream)

管理员变更: 
public void onAdminAdded(String streamId) ;  
public void onAdminRemoved(String streamId)

角色变更  用户被踢  谁在说话等各种回调,可以处理各种业务逻辑 ,详细的请参考 项目中的实现 ,最后会附上项目的开源地址。

6 进入会议房间以后如果用户角色为主播可以进行发布视频流 ,观众只能订阅视频流 不能发布视频流 ,可以调用SDK的publish接口发布流,该接口用到了EMStreamParam参数,你可以自由配置,比如是否上传视频,是否上传音频,使用前置或后置摄像头,视频码率,显示视频页面等等,具体实现可以参考 中发布 订阅视频流的内容, 关于以上的代码逻辑如以 如以下: //发布视频流
normalParam = new EMStreamParam();
normalParam.setStreamType(EMConferenceStream.StreamType.NORMAL);
normalParam.setVideoOff(true);
normalParam.setAudioOff(true);

EMClient.getInstance().conferenceManager().publish(normalParam, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
conference.setPubStreamId(value, EMConferenceStream.StreamType.NORMAL);
addOrUpdateStreamList("local-stream", value);

PhoneStateManager.get(ConferenceActivity.this).addStateCallback(phoneStateCallback);
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "publish failed: error=" + error + ", msg=" + errorMsg);
}
});
//订阅其他主播的视频流
private void subscribe(EMConferenceStream stream, EMCallSurfaceView surfaceView) {
EMClient.getInstance().conferenceManager().subscribe(stream, surfaceView, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
}

@Override
public void onError(int error, String errorMsg) {

}
});
}
7.有关上麦 下麦 的逻辑处理,观众可以请求上麦成为主播,主播可以下麦成为观众,上麦 下麦 是利用 EMConferenceAttribute进行处理 ,EMConferenceAttribute  是一个事件广播,广播事件是一个key-value格式,key-value 可以由开发者进行自行定义,增添事件以后 ,服务器会把事件进行广播。会议中成员会收到 onAttributesUpdated回调。例如本项目中的会议上麦 下麦 代码如下所示://上麦申请

EMClient.getInstance().conferenceManager().setConferenceAttribute(
EMClient.getInstance().getCurrentUser(),
"request_tobe_speaker",
new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_speaker scuessed");

}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_speaker failed: error=" + error

}
});

//下麦申请
EMClient.getInstance().conferenceManager().setConferenceAttribute(EMClient.getInstance().getCurrentUser()
, "request_tobe_audience", new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_audience scuessed");
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_audience failed: error=" + error + ", msg=" + errorMsg);
}
});
 上麦 下麦 请求发出以后 只能由主持人去处理,处理在 EMConferenceListener  的回调 onAttributesUpdated(EMConferenceAttribute attributes) 去处理 ,收到回调以后 解析attributes 然后进行处理请求,处理的过程代码大概如下: EMClient.getInstance().conferenceManager().grantRole(conference.getConferenceId()
, new EMConferenceMember(memName, null, null,null)
, EMConferenceManager.EMConferenceRole.Talker, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole success, result: " + value);
dialog.dismiss();
}
@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole failed, error: " + error + " - " + errorMsg);

}
});
下麦也是和上麦一样是利用 EMConferenceAttribute进行处理。

9.有关退出会议 销毁会议 普通主播  观众只能退出会议 ,主持人还可以 销毁会议 正在进行中的会议可以进行销毁,退出会议 销毁会议 具体代码如下: EMClient.getInstance().conferenceManager().exitConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功退出当前会议!", Toast.LENGTH_SHORT).show();
}
});
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "exit conference failed " + error + ", " + errorMsg);
}
});

EMClient.getInstance().conferenceManager().destroyConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功销毁当前会议!", Toast.LENGTH_SHORT).show();
}
});
EMLog.i(TAG, "finish ConferenceActivity");
finish();
}

尾语
至此 整个 多人音视频会议开发的详细步骤 已经完成 ,虽然比较麻烦 但是每个步骤都很清晰 ,有不太清楚的欢迎大家积极讨论, 附上本项目的github地址:https://github.com/easemob/videocall-android  欢迎大家积极参与 ,谢谢支持。
Demo下载 二维码如下 欢迎大家体验(iOS版和web版下载地址请见:https://www.easemob.com/download/rtc)






  查看全部
今年是不平凡的一年,没错,就是因为疫情,因为疫情原因 ,大家只能呆着家里,严重影响了我们正常的学习 生活 工作,在这种情况下,只能在家办公,这时候大家就会想到线上视频会议,目前很多互联网公司有这个产品,比较出名的就比如 腾讯会议 钉钉 zoom等,用这些是很方便,但是如果能开发自己的视频会议,那会不会更好或者是更有成就感,下面简单介绍这个这个项目,和大概的开发过程。本项目基于环信音视频云来完成,实现的主要功能有:
  •   创建会议、删除会议、获取指定会议室详情、加入会议室、退出会议室等关于会议的管理 ;
  •   获取会议室参会人名列表、踢人,设置观众为主播,设置主播为观众等关于会议室的人员管理;
  •   共享桌面(web端);

 三个端的实现:Android,iOS,Web

上面这些功能在项目中都已经实现。还有水印 ,变声等高级功能在环信音视频SDK的接口内部都已经封装好,本项目没有实现 ,大家可以自行去实现。有关多人音视频功能更详细的介绍大家可以参考:这儿。多人音视频实现的实现主要有以下一些场景:社交交友,远程心理咨询、远程医疗、一对一在线教育、远程视频辅助等。咳咳 ,接下来就是纯干货了,给大家介绍我是如何一步步开发出一个完整的多人音视频app。
 
项目截图
 
首先给大家展示下项目运行的效果图,会议界面 主窗口是一个大的 RelativeLayout ,最下面的那一排排小窗口是的实现方法是HorizontalScrollView加上一个开源的组件 com.jaouan.compoundlayout.RadioLayoutGroup 实现的,点击下面的小窗口后,可以 把小窗口的视频流显示在大屏上,具体是调用 updateRemoteSurfaceView(String streamId, EMCallSurfaceView remoteView)来更新SurfaceView,具体的细节大家可以看看代码里面的实现 最后会公布代码开源地址。

20200410140627956.jpg


20200410140855852.jpg


20200410141055394.jpg


准备工作
    大家得下载安装Android Studio,配置好Android 开发环境,怎么详细配置我就在这不再细说了 网上有很多的教程,大家自己可以找找看,然后大家可以看看环信多人音视频会议的主要功能和一些基本概念介绍。
集成 
  1. 首先大家会想问怎么调用环信的SDK ,大家可以使用 远程依赖SDK包,建议大家用最新版本的远程依赖:
     com.hyphenate:hyphenate-sdk:3.6.6 ,依赖包可以放在 build.gradle里面的 dependencies 选项下面,如下图所示
2020040917363212.png


2.其次怎么使用环信的appkey ,可以在环信音视频云后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到AndroidManifest.xml中 ,如下图所示:

20200409213959916.png


3.经过以上两个重要的前期配置准备 ,接下来我们就可以开始进行代码开发了,首先我们先创建一个项目的DemoApplication类和      DemoHelper类,DemoApplication 类和DemoHelper类都是一个单例类 ,DemoApplication 主要功能就是进行DemoHelper 的初始化,而DemoHelper里面主要是主要有一些option 配置和EMClient 进行初始化,代码如下所示:
public void init(Context context) {
EMOptions options = initChatOptions(context);
EMClient.getInstance().init(context, options);
PreferenceManager.init(context);
}

  DemoHelper还有一个重要的功能就是设置  EMConferenceListener 进行会议监听,有关 EMConferenceListener的类的详细介绍 ,通过这个监听可以再加入会议的时候获取到已经在会议中的流和主播信息,分别是通过其中以下两个回调获取:
@Override 
public void onMemberJoined(EMConferenceMember member){

}

@Override
public void onStreamAdded(EMConferenceStream stream){

}

4.DemoApplication类完成以后,接下来就是怎么去登陆 环信IM 账号和 创建加入会议房间了,首次安装的时候都没有账号,我们使用的办法是自动注册一个账号 在本地进行保存,然后进行登录 ,注册 登录详细接口请看 这儿,  注册 登录的调用大概如下所示: 
 try {
        //注册一个环信ID
        EMClient.getInstance().createAccount(username, password);
            
        //注册成功进行登录
        PreferenceManager.getInstance().setCurrentUserName(username);
        PreferenceManager.getInstance().setCurrentuserPassword(password);
        login();
    } catch (final HyphenateException e) {
       runOnUiThread(new Runnable() {
               public void run() {
                  int errorCode=e.getErrorCode();
                   if(errorCode==EMError.NETWORK_ERROR){
                    Toast.makeText(getApplicationContext(), getResources().getString(R.string.network_anomalies), Toast.LENGTH_SHORT).show();
      }
   }   
}
 
  public void login() {
 
        //登录已经注册成功的环信ID
        EMClient.getInstance().login(username, password, new EMCallBack() {
            @Override
            public void onSuccess() {
                Log.d(TAG, "login: onSuccess");
                //登录成功进入会议房间
                joinRoom();
            }
            @Override
            public void onProgress(int progress, String status) {
                Log.d(TAG, "login: onProgress");
            }
            @Override
            public void onError(final int code, final String message) {
                Log.d(TAG, "login: onError: " + code);
                runOnUiThread(new Runnable() {
                    public void run() {
                        Toast.makeText(getApplicationContext(), getString(R.string.Login_failed) + message,Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });
    }
登录完成以后,我们可以根据房间名创建并加入房间,主要代码大概如下:
 EMClient.getInstance().conferenceManager().joinRoom(currentRoomname, currentPassword, conferenceRole,roomConfig, new EMValueCallBack<EMConference>(){
@Override
public void onSuccess(EMConference value) {
EMLog.i(TAG, "join conference success");
Intent intent = new Intent(MainActivity.this, ConferenceActivity.class);
startActivity(intent);
finish();
}
@Override
public void onError(final int error, final String errorMsg) {
EMLog.e(TAG, "join conference failed error " + error + ", msg " + errorMsg);
runOnUiThread(new Runnable() {
@Override
public void run() {
setBtnEnable(true);
if(error == CALL_TALKER_ISFULL) {
takerFullDialogDisplay();
}else{
Toast.makeText(getApplicationContext(), "Join conference failed " + error + " " + errorMsg, Toast.LENGTH_SHORT).show();
}
}
});
}
});

EMClient.getInstance().conferenceManager().joinRoom() API可以根据房间名创建指定会议,当以该房间名命名的会议不存在时候,会直接创建,当会议已经创建好 可以根据正确的房间名和密码加入房间 ,到这一步为止,我们已经成功的创建 并加入会议。
5.加入会议以后我们进入到会议界面,展示从DemoHelper类 EMConferenceListener 中的 onStreamAdded 回调 和 onMemberJoined 获取到的流和主播列表 ,在ConferenceActivity 中实现 EMConferenceListener ,然后直接把 ConferenceActivity 注册监听,用以下方法  EMClient.getInstance().conferenceManager().addConferenceListener(this); 这样就可实现 EMConferenceListener 事件的处理,比如
 主播 进出房间 :
public void onMemberJoined(final EMConferenceMember member);
public void onMemberExited(final EMConferenceMember member);

增加流 移除流:
public void onStreamAdded(final EMConferenceStream stream)
 public void onStreamRemoved(final EMConferenceStream stream)

管理员变更: 
public void onAdminAdded(String streamId) ;  
public void onAdminRemoved(String streamId)

角色变更  用户被踢  谁在说话等各种回调,可以处理各种业务逻辑 ,详细的请参考 项目中的实现 ,最后会附上项目的开源地址。

6 进入会议房间以后如果用户角色为主播可以进行发布视频流 ,观众只能订阅视频流 不能发布视频流 ,可以调用SDK的publish接口发布流,该接口用到了EMStreamParam参数,你可以自由配置,比如是否上传视频,是否上传音频,使用前置或后置摄像头,视频码率,显示视频页面等等,具体实现可以参考 中发布 订阅视频流的内容, 关于以上的代码逻辑如以 如以下:
 //发布视频流
normalParam = new EMStreamParam();
normalParam.setStreamType(EMConferenceStream.StreamType.NORMAL);
normalParam.setVideoOff(true);
normalParam.setAudioOff(true);

EMClient.getInstance().conferenceManager().publish(normalParam, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
conference.setPubStreamId(value, EMConferenceStream.StreamType.NORMAL);
addOrUpdateStreamList("local-stream", value);

PhoneStateManager.get(ConferenceActivity.this).addStateCallback(phoneStateCallback);
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "publish failed: error=" + error + ", msg=" + errorMsg);
}
});
//订阅其他主播的视频流
private void subscribe(EMConferenceStream stream, EMCallSurfaceView surfaceView) {
EMClient.getInstance().conferenceManager().subscribe(stream, surfaceView, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
}

@Override
public void onError(int error, String errorMsg) {

}
});
}

7.有关上麦 下麦 的逻辑处理,观众可以请求上麦成为主播,主播可以下麦成为观众,上麦 下麦 是利用 EMConferenceAttribute进行处理 ,EMConferenceAttribute  是一个事件广播,广播事件是一个key-value格式,key-value 可以由开发者进行自行定义,增添事件以后 ,服务器会把事件进行广播。会议中成员会收到 onAttributesUpdated回调。例如本项目中的会议上麦 下麦 代码如下所示:
//上麦申请  

EMClient.getInstance().conferenceManager().setConferenceAttribute(
EMClient.getInstance().getCurrentUser(),
"request_tobe_speaker",
new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_speaker scuessed");

}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_speaker failed: error=" + error

}
});

//下麦申请
EMClient.getInstance().conferenceManager().setConferenceAttribute(EMClient.getInstance().getCurrentUser()
, "request_tobe_audience", new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_audience scuessed");
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_audience failed: error=" + error + ", msg=" + errorMsg);
}
});

 上麦 下麦 请求发出以后 只能由主持人去处理,处理在 EMConferenceListener  的回调 onAttributesUpdated(EMConferenceAttribute attributes) 去处理 ,收到回调以后 解析attributes 然后进行处理请求,处理的过程代码大概如下:
   EMClient.getInstance().conferenceManager().grantRole(conference.getConferenceId()
, new EMConferenceMember(memName, null, null,null)
, EMConferenceManager.EMConferenceRole.Talker, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole success, result: " + value);
dialog.dismiss();
}
@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole failed, error: " + error + " - " + errorMsg);

}
});

下麦也是和上麦一样是利用 EMConferenceAttribute进行处理。

9.有关退出会议 销毁会议 普通主播  观众只能退出会议 ,主持人还可以 销毁会议 正在进行中的会议可以进行销毁,退出会议 销毁会议 具体代码如下:
 EMClient.getInstance().conferenceManager().exitConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功退出当前会议!", Toast.LENGTH_SHORT).show();
}
});
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "exit conference failed " + error + ", " + errorMsg);
}
});

EMClient.getInstance().conferenceManager().destroyConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功销毁当前会议!", Toast.LENGTH_SHORT).show();
}
});
EMLog.i(TAG, "finish ConferenceActivity");
finish();
}

尾语
至此 整个 多人音视频会议开发的详细步骤 已经完成 ,虽然比较麻烦 但是每个步骤都很清晰 ,有不太清楚的欢迎大家积极讨论, 附上本项目的github地址:https://github.com/easemob/videocall-android  欢迎大家积极参与 ,谢谢支持。
Demo下载 二维码如下 欢迎大家体验(iOS版和web版下载地址请见:https://www.easemob.com/download/rtc)


20200410142228530.png

 
2
评论

停课不停学,停班不停工!重塑IMGEEK论坛移动开发者的力量! 5G音视频 集成3.0demo 集成demo 集成问题 环信

beyond 发表了文章 • 729 次浏览 • 2020-04-14 17:53 • 来自相关话题

亲爱的环信生态开发者们,受制于新冠疫情的影响,导致无数的移动开发项目停滞,程序猿们的就业和收入都受到了一定程度的影响,正所谓停课不停学,停班不停工,为了尽快帮助大家恢复生产,环信将重新注入资源重塑IMGEEK论坛,将论坛初期打造成为即时通讯云+音视频云开发者们自己的家园。





 
IMGEEK论坛将导入环信数年积累的海量即时通讯云开发常见问题及解析,论坛将引入环信研发资源实时回答小伙伴在开发过程中碰到的难点和疑点,我们鼓励互帮互助,程序猿帮助程序猿,同时论坛将建设积分兑换商城,所有答题所获积分都能实时兑换,初期礼品包括笔记本、手机、耳机、运动手环、环信文化衫、环信马克杯等礼品,同时我们也将重新开放现金打赏功能,让每一个问题都得到尊重,让每一个精准回答都得到物质回报。IMGEEK论坛,我们又重新回来了!

凡是过往,皆为序章。2019年,环线即时通讯云走过了第6个年头,我们从技术、产品、解决方案以及大客户方面都取得了长足的进步,环信即时通讯云国内行业首批通过华为云“鲲鹏”认证,我们保持每周更新,每月一个大版本的迭代速度,推出了数个新版SDK和Demo,包括视频会议Demo、互动白板Demo、直播聊天室Demo、语音连麦聊天室Demo等市场热点产品,累计服务了30万款APP,覆盖了近40万开发者。凡是未来,皆有可期,你好2020!以梦为马,不负韶华!











要点:

1,环信移动开发者生态资源导入

2,环信30+技术支持团队全员入驻

3,建设环信积分商城

4,重启现金打赏功能

其他:

积分兑换礼品:马克杯、文化衫、蓝牙耳机、运动手环、小米手机、笔记本

积分兑换规则:后续参看环信积分商城 查看全部
亲爱的环信生态开发者们,受制于新冠疫情的影响,导致无数的移动开发项目停滞,程序猿们的就业和收入都受到了一定程度的影响,正所谓停课不停学,停班不停工,为了尽快帮助大家恢复生产,环信将重新注入资源重塑IMGEEK论坛,将论坛初期打造成为即时通讯云+音视频云开发者们自己的家园。

3.png

 
IMGEEK论坛将导入环信数年积累的海量即时通讯云开发常见问题及解析,论坛将引入环信研发资源实时回答小伙伴在开发过程中碰到的难点和疑点,我们鼓励互帮互助,程序猿帮助程序猿,同时论坛将建设积分兑换商城,所有答题所获积分都能实时兑换,初期礼品包括笔记本、手机、耳机、运动手环、环信文化衫、环信马克杯等礼品,同时我们也将重新开放现金打赏功能,让每一个问题都得到尊重,让每一个精准回答都得到物质回报。IMGEEK论坛,我们又重新回来了!

凡是过往,皆为序章。2019年,环线即时通讯云走过了第6个年头,我们从技术、产品、解决方案以及大客户方面都取得了长足的进步,环信即时通讯云国内行业首批通过华为云“鲲鹏”认证,我们保持每周更新,每月一个大版本的迭代速度,推出了数个新版SDK和Demo,包括视频会议Demo、互动白板Demo、直播聊天室Demo、语音连麦聊天室Demo等市场热点产品,累计服务了30万款APP,覆盖了近40万开发者。凡是未来,皆有可期,你好2020!以梦为马,不负韶华!

1.jpg

2.jpg



要点:

1,环信移动开发者生态资源导入

2,环信30+技术支持团队全员入驻

3,建设环信积分商城

4,重启现金打赏功能

其他:

积分兑换礼品:马克杯、文化衫、蓝牙耳机、运动手环、小米手机、笔记本

积分兑换规则:后续参看环信积分商城
8
评论

【源码下载】一款使用环信实现的开源灵魂社交APP(含服务器) 猿匹配 开源

beyond 发表了文章 • 16168 次浏览 • 2019-07-01 10:48 • 来自相关话题

#前言
近期,环信热心开发者-穿裤衩闯天下使用环信IM开发了一款实时聊天应用,包含简单的服务器端,现在正式开源给小伙伴们。感兴趣的同学可以一起搞一下哦,详细介绍请往下看。






  上代码
服务器:VMServer
客户端:VMMatch
 
 #VMMatch
猿匹配 —— 国内首个程序猿非严肃婚恋交友应用,让我们一言不合就来场匹配吧
 
#介绍#
首先说下中文名:为什么叫这个名字呢,因为这是一个程序猿(媛)之间匹配交流的应用啊其实这是一个使用环信 IM 开发的一款开源聊天项目,涵盖了时下流行的一些聊天元素,同时已将 IM 功能封装为单独库,可以直接引用,方便使用
项目还处在初期阶段,还有许多功能需要实现,有兴趣的可以一起来
项目资源均来自于互联网,如果有侵权请联系我
 
 #下载体验
猿匹配 小米商店 审核中
猿匹配 Google Play
 
  #项目截图

























  
 #开发环境
项目基本属于在最新的Android开发环境下开发,使用Java8的一些新特性,比如Lambda表达式,
然后项目已经适配Android6.x以上的动态权限适配,以及7.x的文件选择,和8.x的通知提醒等;
· Mac OS 10.14.4
· Android Studio 3.3.2
  #项目模块儿
本项目包含两部分:
一部分是项目主模块app,这部分主要包含了项目的业务逻辑,比如匹配、信息修改、设置等
另一部分是封装成library的vmim,这是为了方便大家引用到自己的项目中做的一步封装,不用再去复杂的复制代码和资源等,
只需要将vmim以module导入到自己的项目中就行了,具体使用方式参见项目app模块儿;
 
  #功能与 TODO
IM部分功能
· [x] 链接监听
· [x] 登录注册
· [x] 会话功能
      。[x] 置顶
      。[x] 标为未读
      。[x] 删除与清空
      。[x] 草稿功能
· [x] 消息功能
      。[x] 下拉加载更多
      。[x] 消息复制(仅文字类消息)
      。[x] 消息删除
      。[x] 文本+Emoji消息收发
      。[x] 大表情消息收发
      。[x] 图片消息
        ~[x] 查看大图
        ~[ ] 保存图片
      。[x] 语音消息
        ~[x] 语音录制
        ~[x] 语音播放(可暂停,波形待优化)
        ~[x] 听筒和扬声器播放切换
      。[x] 语音实时通话功能
      。[x] 视频实时通话功能
      。[x] 通话过程中的娱乐消息收发
        ~[x] 骰子
        ~[x] 石头剪刀布
        ~[x] 大表情
      。[x] 昵称头像处理(通过回调实现)
App部分功能
· [x] 登录注册(包括业务逻辑和 IM 逻辑)
· [x] 匹配
      。[x] 提交匹配信息
      。[x] 拉取匹配信息
· [x] 聊天(这里直接加载 IM 模块儿)
· [x] 我的
      。[x] 个人信息展示
      。[x] 上传头像
      。[x] 设置昵称
      。[x] 设置签名
· [x] 设置
      。[x] 个人信息设置
      。[x] 通知提醒
      。[x] 聊天
      。[ ] 隐私(随业务部分一起完善)
      。[ ] 通用(随业务部分一起完善)
      。[ ] 帮助反馈(随业务部分一起完善)
      。[x] 关于
      。[x] 退出
· [ ] 社区
      。[ ] 发布
      。[ ] 评论
      。[ ] 收藏
      。[ ] 关注
发布功能
· [x] 多渠道打包
· [x] 签名配置
· [x] 开发与线上环境配置
· [x] 敏感信息保护
 
  #配置运行
1.首先复制config.default.gradle到config.gradle
2.配置下config.gradle环信appkey以及bugly统计Id
3.正式打包需要配置下签名信息,同时将签名文件放置在项目根目录
 
  #参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge
 
 #关联项目
服务器端由nodejs实现,地址见这里 VMServer
 
  #VMServer
是为Android开源项目VMMatch项目(中文名猿匹配)实现的服务端
 
  #简介
这个项目包含两部分
· 根目录:服务逻辑及API接口实现
· client目录:前端界面,和服务器端代码端放置在同一仓库下(暂未实现)
 
 #使用
简单介绍下运行环境及部署方法
1.安装nodejs开发时使用的是v10.16.0版本
2.需要安装mongodb并启动,开发使用版本4.0.10
3.下载项目到服务器,可以下载压缩包,或者用git clone命令
4.复制config_default.js到config.js,可根据自己需要修改配置文件
5.安装依赖npm install
6.全局安装pm2npm install pm2 -g 
7.运行 vmshell.sh
 




扫码备注【开源项目】邀你加入环信开源社群
 
转载自https://blog.melove.net/develop-open-source-im-match-and-server/ 
  查看全部
#前言
近期,环信热心开发者-穿裤衩闯天下使用环信IM开发了一款实时聊天应用,包含简单的服务器端,现在正式开源给小伙伴们。感兴趣的同学可以一起搞一下哦,详细介绍请往下看。

猿匹配_logo_副本.png


  上代码
服务器:VMServer
客户端:VMMatch
 
 #VMMatch
猿匹配 —— 国内首个程序猿非严肃婚恋交友应用,让我们一言不合就来场匹配吧
 
#介绍#
首先说下中文名:为什么叫这个名字呢,因为这是一个程序猿(媛)之间匹配交流的应用啊其实这是一个使用环信 IM 开发的一款开源聊天项目,涵盖了时下流行的一些聊天元素,同时已将 IM 功能封装为单独库,可以直接引用,方便使用
项目还处在初期阶段,还有许多功能需要实现,有兴趣的可以一起来
项目资源均来自于互联网,如果有侵权请联系我
 
 #下载体验
猿匹配 小米商店 审核中
猿匹配 Google Play
 
  #项目截图

1.png

2.png

3.png

4.png

5.png

6.png

  
 #开发环境
项目基本属于在最新的Android开发环境下开发,使用Java8的一些新特性,比如Lambda表达式,
然后项目已经适配Android6.x以上的动态权限适配,以及7.x的文件选择,和8.x的通知提醒等;
· Mac OS 10.14.4
· Android Studio 3.3.2
  #项目模块儿
本项目包含两部分:
一部分是项目主模块app,这部分主要包含了项目的业务逻辑,比如匹配、信息修改、设置等
另一部分是封装成library的vmim,这是为了方便大家引用到自己的项目中做的一步封装,不用再去复杂的复制代码和资源等,
只需要将vmim以module导入到自己的项目中就行了,具体使用方式参见项目app模块儿;
 
  #功能与 TODO
IM部分功能
· [x] 链接监听
· [x] 登录注册
· [x] 会话功能
      。[x] 置顶
      。[x] 标为未读
      。[x] 删除与清空
      。[x] 草稿功能
· [x] 消息功能
      。[x] 下拉加载更多
      。[x] 消息复制(仅文字类消息)
      。[x] 消息删除
      。[x] 文本+Emoji消息收发
      。[x] 大表情消息收发
      。[x] 图片消息
        ~[x] 查看大图
        ~[ ] 保存图片
      。[x] 语音消息
        ~[x] 语音录制
        ~[x] 语音播放(可暂停,波形待优化)
        ~[x] 听筒和扬声器播放切换
      。[x] 语音实时通话功能
      。[x] 视频实时通话功能
      。[x] 通话过程中的娱乐消息收发
        ~[x] 骰子
        ~[x] 石头剪刀布
        ~[x] 大表情
      。[x] 昵称头像处理(通过回调实现)
App部分功能
· [x] 登录注册(包括业务逻辑和 IM 逻辑)
· [x] 匹配
      。[x] 提交匹配信息
      。[x] 拉取匹配信息
· [x] 聊天(这里直接加载 IM 模块儿)
· [x] 我的
      。[x] 个人信息展示
      。[x] 上传头像
      。[x] 设置昵称
      。[x] 设置签名
· [x] 设置
      。[x] 个人信息设置
      。[x] 通知提醒
      。[x] 聊天
      。[ ] 隐私(随业务部分一起完善)
      。[ ] 通用(随业务部分一起完善)
      。[ ] 帮助反馈(随业务部分一起完善)
      。[x] 关于
      。[x] 退出
· [ ] 社区
      。[ ] 发布
      。[ ] 评论
      。[ ] 收藏
      。[ ] 关注
发布功能
· [x] 多渠道打包
· [x] 签名配置
· [x] 开发与线上环境配置
· [x] 敏感信息保护
 
  #配置运行
1.首先复制config.default.gradle到config.gradle
2.配置下config.gradle环信appkey以及bugly统计Id
3.正式打包需要配置下签名信息,同时将签名文件放置在项目根目录
 
  #参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge
 
 #关联项目
服务器端由nodejs实现,地址见这里 VMServer
 
  #VMServer
是为Android开源项目VMMatch项目(中文名猿匹配)实现的服务端
 
  #简介
这个项目包含两部分
· 根目录:服务逻辑及API接口实现
· client目录:前端界面,和服务器端代码端放置在同一仓库下(暂未实现)
 
 #使用
简单介绍下运行环境及部署方法
1.安装nodejs开发时使用的是v10.16.0版本
2.需要安装mongodb并启动,开发使用版本4.0.10
3.下载项目到服务器,可以下载压缩包,或者用git clone命令
4.复制config_default.js到config.js,可根据自己需要修改配置文件
5.安装依赖
npm install

6.全局安装pm2
npm install pm2 -g
 
7.运行 vmshell.sh
 
环信冬冬_副本.jpg

扫码备注【开源项目】邀你加入环信开源社群
 
转载自https://blog.melove.net/develop-open-source-im-match-and-server/ 
 
4
评论

在微信小程序里实现聊天室 聊天室 小程序

Tolazy 发表了文章 • 44496 次浏览 • 2019-04-19 17:49 • 来自相关话题

第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
下载环信 小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明



集成
登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改


在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用


修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室


然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉然后在roomlist.wxml 修改对应的 变量绑定名称





demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面


Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了





就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx 查看全部
第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

4
评论

【开源项目】全国首个开源直播小程序源码

beyond 发表了文章 • 188079 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
19
评论

【新手快速入门】集成环信常见问题+解决方案汇总

dujiepeng 发表了文章 • 26622 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
0
评论

客服云 修改语言 客服云修改语言

coinci 发表了文章 • 600 次浏览 • 2019-10-17 10:39 • 来自相关话题

*****修改客服系统语言********
  客服系统切换语言(支持中英文切换)

1.登录的时候
浏览器打开 https://kefu.easemob.com/
界面右上角可以切换语言





2.如果是已登录状态,切换到客服模式
客服模式--客服信息 语言一栏可以切换,最后需点击右下角保存




*********************************************************************
************网页集成切换到英文**************
webim 后面添加/en-US/





切换后界面如下




  查看全部
*****修改客服系统语言********
  客服系统切换语言(支持中英文切换)

1.登录的时候
浏览器打开 https://kefu.easemob.com/
界面右上角可以切换语言
27-1修改语言.png


2.如果是已登录状态,切换到客服模式
客服模式--客服信息 语言一栏可以切换,最后需点击右下角保存
27-2修改语言.png

*********************************************************************
************网页集成切换到英文**************
webim 后面添加/en-US/
27-3修改语言.png


切换后界面如下
27-4修改语言.png

 
1
评论

【环信合伙人】让一部分人钱包先鼓起来,1000元京东卡拿不停 合伙人 环信

beyond 发表了文章 • 148 次浏览 • 2020-05-18 18:54 • 来自相关话题

环信成立于2013年,是国内领先的企业级软件服务提供商,于2016年荣膺“Gartner 2016 Cool Vendor”。旗下主要产品线包括国内上线最早规模最大的即时通讯能力PaaS平台——环信即时通讯云,国内领先的全场景音视频PaaS平台——环信实时音视频云,全媒体智能客服SaaS平台——环信客服云,以及企业级人工智能服务能力平台——环信机器人,是国内唯一拥有云通讯、云客服和AI机器人三大赛道完整自主知识产权技术储备企服公司。目前已经服务了30万款APP,10万余家企业,注册开发者40万,SDK覆盖手机终端23亿部,现已覆盖包括保险、证券、银行、电商、教育、汽车、物流、出行等领域的众多标杆企业。环信合作人计划,人人为我我为人人,四大产品线总有一款适合小伙伴和小伙伴的朋友们。赠人玫瑰手留余香,500元和1000元京东卡不限次数拿不停。




















 
点击链接,即刻参与 http://www.easemob.com/event/partner 
  查看全部
环信成立于2013年,是国内领先的企业级软件服务提供商,于2016年荣膺“Gartner 2016 Cool Vendor”。旗下主要产品线包括国内上线最早规模最大的即时通讯能力PaaS平台——环信即时通讯云,国内领先的全场景音视频PaaS平台——环信实时音视频云,全媒体智能客服SaaS平台——环信客服云,以及企业级人工智能服务能力平台——环信机器人,是国内唯一拥有云通讯、云客服和AI机器人三大赛道完整自主知识产权技术储备企服公司。目前已经服务了30万款APP,10万余家企业,注册开发者40万,SDK覆盖手机终端23亿部,现已覆盖包括保险、证券、银行、电商、教育、汽车、物流、出行等领域的众多标杆企业。环信合作人计划,人人为我我为人人,四大产品线总有一款适合小伙伴和小伙伴的朋友们。赠人玫瑰手留余香,500元和1000元京东卡不限次数拿不停。
6.jpg

2.png

3.jpg

4.jpg

5.png

 
点击链接,即刻参与 http://www.easemob.com/event/partner 
 
2
评论

基于环信sdk在uni-app框架中快速开发一款多平台社交Demo SDK uni_app 环信

beyond 发表了文章 • 360 次浏览 • 2020-05-11 11:34 • 来自相关话题

说在前面:此款 demo 是基于 环信sdk 开发的一款具有单聊、群聊、聊天室、音视频等功能的应用。在此之前我们已经开发完 Vue、react(web端)、微信小程序。这三个热门领域的版本,如有需要源码可以后台留言索取。





 
安装开发工具

我们选用微信小程序来用做示例(如果选择百度、支付宝安装对应开发者工具即可)、

微信开发者工具建议还是安装最新版的。uni-app的开发也必须安装HBuilderX工具,这个是捆绑的,没得选择。要用uni-app,你必须得装!

工具安装:

微信开发者工具

HBuilderX

项目demo介绍:






项目demo启动预览:





 
快速集成环信 sdk:

1、复制整个utils文件






如果你想具体了解主要配置文件 请看这个链接:

http://docs-im.easemob.com/im/web/intro/start

2、如何使用环信的appkey ,可以在环信 console 后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到配置文件中 ,如下图所示:






以上两个重要的配置准备完成之后就可以进行一系列的操作了(收发消息、好友申请、进群入群通知等)

在uni-app中 使用环信 sdk 实现添加、删除好友:

1、在全局 App.vue 文件 钩子函数 onLaunch() 中监听各种事件 (好友申请、收到各类消息等)如图:






发送好友请求:






在onPresence(message)事件中接收到好友消息申请:






同意好友请求:






拒绝好友请求:






实现收发消息:

1、给好友发送消息:






2、接收到消息:

在onTextMessage(message)事件中接收到好友消息,然后做消息上屏处理(具体消息上屏逻辑可看demo中代码示例):





以上展示的仅仅为基本业务场景,更多的业务逻辑详情请看demo示例。api具体详情可以查看 环信sdk 文档

最后结语:基于uni-app这个框架可实现多平台, 虽然目前一期集成环信sdk的版本仅支持微信小程序版本,但二期我们将加入头条、支付宝等小程序,敬请期待。PS:对于安卓、ios移动端,我们建议使用针对移动端开发的sdk版本。

基于uni-app的开发其中也趟了不少坑,在这里就不多赘述了。回归到框架的选型来讲,选用uni-app开发小程序,可同时并行多端小程序,这点是真香,一次开发多端发布。至于审核嘛~ 时快时慢。 查看全部
说在前面:此款 demo 是基于 环信sdk 开发的一款具有单聊、群聊、聊天室、音视频等功能的应用。在此之前我们已经开发完 Vue、react(web端)、微信小程序。这三个热门领域的版本,如有需要源码可以后台留言索取。

1.jpg

 
安装开发工具

我们选用微信小程序来用做示例(如果选择百度、支付宝安装对应开发者工具即可)、

微信开发者工具建议还是安装最新版的。uni-app的开发也必须安装HBuilderX工具,这个是捆绑的,没得选择。要用uni-app,你必须得装!

工具安装:

微信开发者工具

HBuilderX

项目demo介绍:

2.jpg


项目demo启动预览:

3.jpg

 
快速集成环信 sdk:

1、复制整个utils文件

4.jpg


如果你想具体了解主要配置文件 请看这个链接:

http://docs-im.easemob.com/im/web/intro/start

2、如何使用环信的appkey ,可以在环信 console 后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到配置文件中 ,如下图所示:

5.jpg


以上两个重要的配置准备完成之后就可以进行一系列的操作了(收发消息、好友申请、进群入群通知等)

在uni-app中 使用环信 sdk 实现添加、删除好友:

1、在全局 App.vue 文件 钩子函数 onLaunch() 中监听各种事件 (好友申请、收到各类消息等)如图:

6.jpg


发送好友请求:

7.jpg


在onPresence(message)事件中接收到好友消息申请:

8.jpg


同意好友请求:

9.jpg


拒绝好友请求:

10.jpg


实现收发消息:

1、给好友发送消息:

11.jpg


2、接收到消息:

在onTextMessage(message)事件中接收到好友消息,然后做消息上屏处理(具体消息上屏逻辑可看demo中代码示例):

12.jpg

以上展示的仅仅为基本业务场景,更多的业务逻辑详情请看demo示例。api具体详情可以查看 环信sdk 文档

最后结语:基于uni-app这个框架可实现多平台, 虽然目前一期集成环信sdk的版本仅支持微信小程序版本,但二期我们将加入头条、支付宝等小程序,敬请期待。PS:对于安卓、ios移动端,我们建议使用针对移动端开发的sdk版本。

基于uni-app的开发其中也趟了不少坑,在这里就不多赘述了。回归到框架的选型来讲,选用uni-app开发小程序,可同时并行多端小程序,这点是真香,一次开发多端发布。至于审核嘛~ 时快时慢。
1
评论

手把手教程:4小时开发一个视频会议APP【附开源代码】 环信 开源 视频会议

fat1 发表了文章 • 868 次浏览 • 2020-04-17 00:29 • 来自相关话题

今年是不平凡的一年,没错,就是因为疫情,因为疫情原因 ,大家只能呆着家里,严重影响了我们正常的学习 生活 工作,在这种情况下,只能在家办公,这时候大家就会想到线上视频会议,目前很多互联网公司有这个产品,比较出名的就比如 腾讯会议 钉钉 zoom等,用这些是很方便,但是如果能开发自己的视频会议,那会不会更好或者是更有成就感,下面简单介绍这个这个项目,和大概的开发过程。本项目基于环信音视频云来完成,实现的主要功能有:
  创建会议、删除会议、获取指定会议室详情、加入会议室、退出会议室等关于会议的管理 ;  获取会议室参会人名列表、踢人,设置观众为主播,设置主播为观众等关于会议室的人员管理;  共享桌面(web端);
 三个端的实现:Android,iOS,Web

上面这些功能在项目中都已经实现。还有水印 ,变声等高级功能在环信音视频SDK的接口内部都已经封装好,本项目没有实现 ,大家可以自行去实现。有关多人音视频功能更详细的介绍大家可以参考:这儿。多人音视频实现的实现主要有以下一些场景:社交交友,远程心理咨询、远程医疗、一对一在线教育、远程视频辅助等。咳咳 ,接下来就是纯干货了,给大家介绍我是如何一步步开发出一个完整的多人音视频app。
 
项目截图
 
首先给大家展示下项目运行的效果图,会议界面 主窗口是一个大的 RelativeLayout ,最下面的那一排排小窗口是的实现方法是HorizontalScrollView加上一个开源的组件 com.jaouan.compoundlayout.RadioLayoutGroup 实现的,点击下面的小窗口后,可以 把小窗口的视频流显示在大屏上,具体是调用 updateRemoteSurfaceView(String streamId, EMCallSurfaceView remoteView)来更新SurfaceView,具体的细节大家可以看看代码里面的实现 最后会公布代码开源地址。
















准备工作
    大家得下载安装Android Studio,配置好Android 开发环境,怎么详细配置我就在这不再细说了 网上有很多的教程,大家自己可以找找看,然后大家可以看看环信多人音视频会议的主要功能和一些基本概念介绍。
集成 
  1. 首先大家会想问怎么调用环信的SDK ,大家可以使用 远程依赖SDK包,建议大家用最新版本的远程依赖:
     com.hyphenate:hyphenate-sdk:3.6.6 ,依赖包可以放在 build.gradle里面的 dependencies 选项下面,如下图所示





2.其次怎么使用环信的appkey ,可以在环信音视频云后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到AndroidManifest.xml中 ,如下图所示:






3.经过以上两个重要的前期配置准备 ,接下来我们就可以开始进行代码开发了,首先我们先创建一个项目的DemoApplication类和      DemoHelper类,DemoApplication 类和DemoHelper类都是一个单例类 ,DemoApplication 主要功能就是进行DemoHelper 的初始化,而DemoHelper里面主要是主要有一些option 配置和EMClient 进行初始化,代码如下所示:public void init(Context context) {
EMOptions options = initChatOptions(context);
EMClient.getInstance().init(context, options);
PreferenceManager.init(context);
}
  DemoHelper还有一个重要的功能就是设置  EMConferenceListener 进行会议监听,有关 EMConferenceListener的类的详细介绍 ,通过这个监听可以再加入会议的时候获取到已经在会议中的流和主播信息,分别是通过其中以下两个回调获取:@Override
public void onMemberJoined(EMConferenceMember member){

}

@Override
public void onStreamAdded(EMConferenceStream stream){

}
4.DemoApplication类完成以后,接下来就是怎么去登陆 环信IM 账号和 创建加入会议房间了,首次安装的时候都没有账号,我们使用的办法是自动注册一个账号 在本地进行保存,然后进行登录 ,注册 登录详细接口请看 这儿,  注册 登录的调用大概如下所示: 
 try {
        //注册一个环信ID
        EMClient.getInstance().createAccount(username, password);
            
        //注册成功进行登录
        PreferenceManager.getInstance().setCurrentUserName(username);
        PreferenceManager.getInstance().setCurrentuserPassword(password);
        login();
    } catch (final HyphenateException e) {
       runOnUiThread(new Runnable() {
               public void run() {
                  int errorCode=e.getErrorCode();
                   if(errorCode==EMError.NETWORK_ERROR){
                    Toast.makeText(getApplicationContext(), getResources().getString(R.string.network_anomalies), Toast.LENGTH_SHORT).show();
      }
   }   
}
 
  public void login() {
 
        //登录已经注册成功的环信ID
        EMClient.getInstance().login(username, password, new EMCallBack() {
            @Override
            public void onSuccess() {
                Log.d(TAG, "login: onSuccess");
                //登录成功进入会议房间
                joinRoom();
            }
            @Override
            public void onProgress(int progress, String status) {
                Log.d(TAG, "login: onProgress");
            }
            @Override
            public void onError(final int code, final String message) {
                Log.d(TAG, "login: onError: " + code);
                runOnUiThread(new Runnable() {
                    public void run() {
                        Toast.makeText(getApplicationContext(), getString(R.string.Login_failed) + message,Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });
    }
登录完成以后,我们可以根据房间名创建并加入房间,主要代码大概如下: EMClient.getInstance().conferenceManager().joinRoom(currentRoomname, currentPassword, conferenceRole,roomConfig, new EMValueCallBack<EMConference>(){
@Override
public void onSuccess(EMConference value) {
EMLog.i(TAG, "join conference success");
Intent intent = new Intent(MainActivity.this, ConferenceActivity.class);
startActivity(intent);
finish();
}
@Override
public void onError(final int error, final String errorMsg) {
EMLog.e(TAG, "join conference failed error " + error + ", msg " + errorMsg);
runOnUiThread(new Runnable() {
@Override
public void run() {
setBtnEnable(true);
if(error == CALL_TALKER_ISFULL) {
takerFullDialogDisplay();
}else{
Toast.makeText(getApplicationContext(), "Join conference failed " + error + " " + errorMsg, Toast.LENGTH_SHORT).show();
}
}
});
}
});
EMClient.getInstance().conferenceManager().joinRoom() API可以根据房间名创建指定会议,当以该房间名命名的会议不存在时候,会直接创建,当会议已经创建好 可以根据正确的房间名和密码加入房间 ,到这一步为止,我们已经成功的创建 并加入会议。
5.加入会议以后我们进入到会议界面,展示从DemoHelper类 EMConferenceListener 中的 onStreamAdded 回调 和 onMemberJoined 获取到的流和主播列表 ,在ConferenceActivity 中实现 EMConferenceListener ,然后直接把 ConferenceActivity 注册监听,用以下方法  EMClient.getInstance().conferenceManager().addConferenceListener(this); 这样就可实现 EMConferenceListener 事件的处理,比如
 主播 进出房间 :
public void onMemberJoined(final EMConferenceMember member);
public void onMemberExited(final EMConferenceMember member);

增加流 移除流:
public void onStreamAdded(final EMConferenceStream stream)
 public void onStreamRemoved(final EMConferenceStream stream)

管理员变更: 
public void onAdminAdded(String streamId) ;  
public void onAdminRemoved(String streamId)

角色变更  用户被踢  谁在说话等各种回调,可以处理各种业务逻辑 ,详细的请参考 项目中的实现 ,最后会附上项目的开源地址。

6 进入会议房间以后如果用户角色为主播可以进行发布视频流 ,观众只能订阅视频流 不能发布视频流 ,可以调用SDK的publish接口发布流,该接口用到了EMStreamParam参数,你可以自由配置,比如是否上传视频,是否上传音频,使用前置或后置摄像头,视频码率,显示视频页面等等,具体实现可以参考 中发布 订阅视频流的内容, 关于以上的代码逻辑如以 如以下: //发布视频流
normalParam = new EMStreamParam();
normalParam.setStreamType(EMConferenceStream.StreamType.NORMAL);
normalParam.setVideoOff(true);
normalParam.setAudioOff(true);

EMClient.getInstance().conferenceManager().publish(normalParam, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
conference.setPubStreamId(value, EMConferenceStream.StreamType.NORMAL);
addOrUpdateStreamList("local-stream", value);

PhoneStateManager.get(ConferenceActivity.this).addStateCallback(phoneStateCallback);
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "publish failed: error=" + error + ", msg=" + errorMsg);
}
});
//订阅其他主播的视频流
private void subscribe(EMConferenceStream stream, EMCallSurfaceView surfaceView) {
EMClient.getInstance().conferenceManager().subscribe(stream, surfaceView, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
}

@Override
public void onError(int error, String errorMsg) {

}
});
}
7.有关上麦 下麦 的逻辑处理,观众可以请求上麦成为主播,主播可以下麦成为观众,上麦 下麦 是利用 EMConferenceAttribute进行处理 ,EMConferenceAttribute  是一个事件广播,广播事件是一个key-value格式,key-value 可以由开发者进行自行定义,增添事件以后 ,服务器会把事件进行广播。会议中成员会收到 onAttributesUpdated回调。例如本项目中的会议上麦 下麦 代码如下所示://上麦申请

EMClient.getInstance().conferenceManager().setConferenceAttribute(
EMClient.getInstance().getCurrentUser(),
"request_tobe_speaker",
new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_speaker scuessed");

}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_speaker failed: error=" + error

}
});

//下麦申请
EMClient.getInstance().conferenceManager().setConferenceAttribute(EMClient.getInstance().getCurrentUser()
, "request_tobe_audience", new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_audience scuessed");
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_audience failed: error=" + error + ", msg=" + errorMsg);
}
});
 上麦 下麦 请求发出以后 只能由主持人去处理,处理在 EMConferenceListener  的回调 onAttributesUpdated(EMConferenceAttribute attributes) 去处理 ,收到回调以后 解析attributes 然后进行处理请求,处理的过程代码大概如下: EMClient.getInstance().conferenceManager().grantRole(conference.getConferenceId()
, new EMConferenceMember(memName, null, null,null)
, EMConferenceManager.EMConferenceRole.Talker, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole success, result: " + value);
dialog.dismiss();
}
@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole failed, error: " + error + " - " + errorMsg);

}
});
下麦也是和上麦一样是利用 EMConferenceAttribute进行处理。

9.有关退出会议 销毁会议 普通主播  观众只能退出会议 ,主持人还可以 销毁会议 正在进行中的会议可以进行销毁,退出会议 销毁会议 具体代码如下: EMClient.getInstance().conferenceManager().exitConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功退出当前会议!", Toast.LENGTH_SHORT).show();
}
});
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "exit conference failed " + error + ", " + errorMsg);
}
});

EMClient.getInstance().conferenceManager().destroyConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功销毁当前会议!", Toast.LENGTH_SHORT).show();
}
});
EMLog.i(TAG, "finish ConferenceActivity");
finish();
}

尾语
至此 整个 多人音视频会议开发的详细步骤 已经完成 ,虽然比较麻烦 但是每个步骤都很清晰 ,有不太清楚的欢迎大家积极讨论, 附上本项目的github地址:https://github.com/easemob/videocall-android  欢迎大家积极参与 ,谢谢支持。
Demo下载 二维码如下 欢迎大家体验(iOS版和web版下载地址请见:https://www.easemob.com/download/rtc)






  查看全部
今年是不平凡的一年,没错,就是因为疫情,因为疫情原因 ,大家只能呆着家里,严重影响了我们正常的学习 生活 工作,在这种情况下,只能在家办公,这时候大家就会想到线上视频会议,目前很多互联网公司有这个产品,比较出名的就比如 腾讯会议 钉钉 zoom等,用这些是很方便,但是如果能开发自己的视频会议,那会不会更好或者是更有成就感,下面简单介绍这个这个项目,和大概的开发过程。本项目基于环信音视频云来完成,实现的主要功能有:
  •   创建会议、删除会议、获取指定会议室详情、加入会议室、退出会议室等关于会议的管理 ;
  •   获取会议室参会人名列表、踢人,设置观众为主播,设置主播为观众等关于会议室的人员管理;
  •   共享桌面(web端);

 三个端的实现:Android,iOS,Web

上面这些功能在项目中都已经实现。还有水印 ,变声等高级功能在环信音视频SDK的接口内部都已经封装好,本项目没有实现 ,大家可以自行去实现。有关多人音视频功能更详细的介绍大家可以参考:这儿。多人音视频实现的实现主要有以下一些场景:社交交友,远程心理咨询、远程医疗、一对一在线教育、远程视频辅助等。咳咳 ,接下来就是纯干货了,给大家介绍我是如何一步步开发出一个完整的多人音视频app。
 
项目截图
 
首先给大家展示下项目运行的效果图,会议界面 主窗口是一个大的 RelativeLayout ,最下面的那一排排小窗口是的实现方法是HorizontalScrollView加上一个开源的组件 com.jaouan.compoundlayout.RadioLayoutGroup 实现的,点击下面的小窗口后,可以 把小窗口的视频流显示在大屏上,具体是调用 updateRemoteSurfaceView(String streamId, EMCallSurfaceView remoteView)来更新SurfaceView,具体的细节大家可以看看代码里面的实现 最后会公布代码开源地址。

20200410140627956.jpg


20200410140855852.jpg


20200410141055394.jpg


准备工作
    大家得下载安装Android Studio,配置好Android 开发环境,怎么详细配置我就在这不再细说了 网上有很多的教程,大家自己可以找找看,然后大家可以看看环信多人音视频会议的主要功能和一些基本概念介绍。
集成 
  1. 首先大家会想问怎么调用环信的SDK ,大家可以使用 远程依赖SDK包,建议大家用最新版本的远程依赖:
     com.hyphenate:hyphenate-sdk:3.6.6 ,依赖包可以放在 build.gradle里面的 dependencies 选项下面,如下图所示
2020040917363212.png


2.其次怎么使用环信的appkey ,可以在环信音视频云后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到AndroidManifest.xml中 ,如下图所示:

20200409213959916.png


3.经过以上两个重要的前期配置准备 ,接下来我们就可以开始进行代码开发了,首先我们先创建一个项目的DemoApplication类和      DemoHelper类,DemoApplication 类和DemoHelper类都是一个单例类 ,DemoApplication 主要功能就是进行DemoHelper 的初始化,而DemoHelper里面主要是主要有一些option 配置和EMClient 进行初始化,代码如下所示:
public void init(Context context) {
EMOptions options = initChatOptions(context);
EMClient.getInstance().init(context, options);
PreferenceManager.init(context);
}

  DemoHelper还有一个重要的功能就是设置  EMConferenceListener 进行会议监听,有关 EMConferenceListener的类的详细介绍 ,通过这个监听可以再加入会议的时候获取到已经在会议中的流和主播信息,分别是通过其中以下两个回调获取:
@Override 
public void onMemberJoined(EMConferenceMember member){

}

@Override
public void onStreamAdded(EMConferenceStream stream){

}

4.DemoApplication类完成以后,接下来就是怎么去登陆 环信IM 账号和 创建加入会议房间了,首次安装的时候都没有账号,我们使用的办法是自动注册一个账号 在本地进行保存,然后进行登录 ,注册 登录详细接口请看 这儿,  注册 登录的调用大概如下所示: 
 try {
        //注册一个环信ID
        EMClient.getInstance().createAccount(username, password);
            
        //注册成功进行登录
        PreferenceManager.getInstance().setCurrentUserName(username);
        PreferenceManager.getInstance().setCurrentuserPassword(password);
        login();
    } catch (final HyphenateException e) {
       runOnUiThread(new Runnable() {
               public void run() {
                  int errorCode=e.getErrorCode();
                   if(errorCode==EMError.NETWORK_ERROR){
                    Toast.makeText(getApplicationContext(), getResources().getString(R.string.network_anomalies), Toast.LENGTH_SHORT).show();
      }
   }   
}
 
  public void login() {
 
        //登录已经注册成功的环信ID
        EMClient.getInstance().login(username, password, new EMCallBack() {
            @Override
            public void onSuccess() {
                Log.d(TAG, "login: onSuccess");
                //登录成功进入会议房间
                joinRoom();
            }
            @Override
            public void onProgress(int progress, String status) {
                Log.d(TAG, "login: onProgress");
            }
            @Override
            public void onError(final int code, final String message) {
                Log.d(TAG, "login: onError: " + code);
                runOnUiThread(new Runnable() {
                    public void run() {
                        Toast.makeText(getApplicationContext(), getString(R.string.Login_failed) + message,Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });
    }
登录完成以后,我们可以根据房间名创建并加入房间,主要代码大概如下:
 EMClient.getInstance().conferenceManager().joinRoom(currentRoomname, currentPassword, conferenceRole,roomConfig, new EMValueCallBack<EMConference>(){
@Override
public void onSuccess(EMConference value) {
EMLog.i(TAG, "join conference success");
Intent intent = new Intent(MainActivity.this, ConferenceActivity.class);
startActivity(intent);
finish();
}
@Override
public void onError(final int error, final String errorMsg) {
EMLog.e(TAG, "join conference failed error " + error + ", msg " + errorMsg);
runOnUiThread(new Runnable() {
@Override
public void run() {
setBtnEnable(true);
if(error == CALL_TALKER_ISFULL) {
takerFullDialogDisplay();
}else{
Toast.makeText(getApplicationContext(), "Join conference failed " + error + " " + errorMsg, Toast.LENGTH_SHORT).show();
}
}
});
}
});

EMClient.getInstance().conferenceManager().joinRoom() API可以根据房间名创建指定会议,当以该房间名命名的会议不存在时候,会直接创建,当会议已经创建好 可以根据正确的房间名和密码加入房间 ,到这一步为止,我们已经成功的创建 并加入会议。
5.加入会议以后我们进入到会议界面,展示从DemoHelper类 EMConferenceListener 中的 onStreamAdded 回调 和 onMemberJoined 获取到的流和主播列表 ,在ConferenceActivity 中实现 EMConferenceListener ,然后直接把 ConferenceActivity 注册监听,用以下方法  EMClient.getInstance().conferenceManager().addConferenceListener(this); 这样就可实现 EMConferenceListener 事件的处理,比如
 主播 进出房间 :
public void onMemberJoined(final EMConferenceMember member);
public void onMemberExited(final EMConferenceMember member);

增加流 移除流:
public void onStreamAdded(final EMConferenceStream stream)
 public void onStreamRemoved(final EMConferenceStream stream)

管理员变更: 
public void onAdminAdded(String streamId) ;  
public void onAdminRemoved(String streamId)

角色变更  用户被踢  谁在说话等各种回调,可以处理各种业务逻辑 ,详细的请参考 项目中的实现 ,最后会附上项目的开源地址。

6 进入会议房间以后如果用户角色为主播可以进行发布视频流 ,观众只能订阅视频流 不能发布视频流 ,可以调用SDK的publish接口发布流,该接口用到了EMStreamParam参数,你可以自由配置,比如是否上传视频,是否上传音频,使用前置或后置摄像头,视频码率,显示视频页面等等,具体实现可以参考 中发布 订阅视频流的内容, 关于以上的代码逻辑如以 如以下:
 //发布视频流
normalParam = new EMStreamParam();
normalParam.setStreamType(EMConferenceStream.StreamType.NORMAL);
normalParam.setVideoOff(true);
normalParam.setAudioOff(true);

EMClient.getInstance().conferenceManager().publish(normalParam, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
conference.setPubStreamId(value, EMConferenceStream.StreamType.NORMAL);
addOrUpdateStreamList("local-stream", value);

PhoneStateManager.get(ConferenceActivity.this).addStateCallback(phoneStateCallback);
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "publish failed: error=" + error + ", msg=" + errorMsg);
}
});
//订阅其他主播的视频流
private void subscribe(EMConferenceStream stream, EMCallSurfaceView surfaceView) {
EMClient.getInstance().conferenceManager().subscribe(stream, surfaceView, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
}

@Override
public void onError(int error, String errorMsg) {

}
});
}

7.有关上麦 下麦 的逻辑处理,观众可以请求上麦成为主播,主播可以下麦成为观众,上麦 下麦 是利用 EMConferenceAttribute进行处理 ,EMConferenceAttribute  是一个事件广播,广播事件是一个key-value格式,key-value 可以由开发者进行自行定义,增添事件以后 ,服务器会把事件进行广播。会议中成员会收到 onAttributesUpdated回调。例如本项目中的会议上麦 下麦 代码如下所示:
//上麦申请  

EMClient.getInstance().conferenceManager().setConferenceAttribute(
EMClient.getInstance().getCurrentUser(),
"request_tobe_speaker",
new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_speaker scuessed");

}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_speaker failed: error=" + error

}
});

//下麦申请
EMClient.getInstance().conferenceManager().setConferenceAttribute(EMClient.getInstance().getCurrentUser()
, "request_tobe_audience", new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_audience scuessed");
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_audience failed: error=" + error + ", msg=" + errorMsg);
}
});

 上麦 下麦 请求发出以后 只能由主持人去处理,处理在 EMConferenceListener  的回调 onAttributesUpdated(EMConferenceAttribute attributes) 去处理 ,收到回调以后 解析attributes 然后进行处理请求,处理的过程代码大概如下:
   EMClient.getInstance().conferenceManager().grantRole(conference.getConferenceId()
, new EMConferenceMember(memName, null, null,null)
, EMConferenceManager.EMConferenceRole.Talker, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole success, result: " + value);
dialog.dismiss();
}
@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole failed, error: " + error + " - " + errorMsg);

}
});

下麦也是和上麦一样是利用 EMConferenceAttribute进行处理。

9.有关退出会议 销毁会议 普通主播  观众只能退出会议 ,主持人还可以 销毁会议 正在进行中的会议可以进行销毁,退出会议 销毁会议 具体代码如下:
 EMClient.getInstance().conferenceManager().exitConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功退出当前会议!", Toast.LENGTH_SHORT).show();
}
});
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "exit conference failed " + error + ", " + errorMsg);
}
});

EMClient.getInstance().conferenceManager().destroyConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功销毁当前会议!", Toast.LENGTH_SHORT).show();
}
});
EMLog.i(TAG, "finish ConferenceActivity");
finish();
}

尾语
至此 整个 多人音视频会议开发的详细步骤 已经完成 ,虽然比较麻烦 但是每个步骤都很清晰 ,有不太清楚的欢迎大家积极讨论, 附上本项目的github地址:https://github.com/easemob/videocall-android  欢迎大家积极参与 ,谢谢支持。
Demo下载 二维码如下 欢迎大家体验(iOS版和web版下载地址请见:https://www.easemob.com/download/rtc)


20200410142228530.png

 
2
评论

停课不停学,停班不停工!重塑IMGEEK论坛移动开发者的力量! 5G音视频 集成3.0demo 集成demo 集成问题 环信

beyond 发表了文章 • 729 次浏览 • 2020-04-14 17:53 • 来自相关话题

亲爱的环信生态开发者们,受制于新冠疫情的影响,导致无数的移动开发项目停滞,程序猿们的就业和收入都受到了一定程度的影响,正所谓停课不停学,停班不停工,为了尽快帮助大家恢复生产,环信将重新注入资源重塑IMGEEK论坛,将论坛初期打造成为即时通讯云+音视频云开发者们自己的家园。





 
IMGEEK论坛将导入环信数年积累的海量即时通讯云开发常见问题及解析,论坛将引入环信研发资源实时回答小伙伴在开发过程中碰到的难点和疑点,我们鼓励互帮互助,程序猿帮助程序猿,同时论坛将建设积分兑换商城,所有答题所获积分都能实时兑换,初期礼品包括笔记本、手机、耳机、运动手环、环信文化衫、环信马克杯等礼品,同时我们也将重新开放现金打赏功能,让每一个问题都得到尊重,让每一个精准回答都得到物质回报。IMGEEK论坛,我们又重新回来了!

凡是过往,皆为序章。2019年,环线即时通讯云走过了第6个年头,我们从技术、产品、解决方案以及大客户方面都取得了长足的进步,环信即时通讯云国内行业首批通过华为云“鲲鹏”认证,我们保持每周更新,每月一个大版本的迭代速度,推出了数个新版SDK和Demo,包括视频会议Demo、互动白板Demo、直播聊天室Demo、语音连麦聊天室Demo等市场热点产品,累计服务了30万款APP,覆盖了近40万开发者。凡是未来,皆有可期,你好2020!以梦为马,不负韶华!











要点:

1,环信移动开发者生态资源导入

2,环信30+技术支持团队全员入驻

3,建设环信积分商城

4,重启现金打赏功能

其他:

积分兑换礼品:马克杯、文化衫、蓝牙耳机、运动手环、小米手机、笔记本

积分兑换规则:后续参看环信积分商城 查看全部
亲爱的环信生态开发者们,受制于新冠疫情的影响,导致无数的移动开发项目停滞,程序猿们的就业和收入都受到了一定程度的影响,正所谓停课不停学,停班不停工,为了尽快帮助大家恢复生产,环信将重新注入资源重塑IMGEEK论坛,将论坛初期打造成为即时通讯云+音视频云开发者们自己的家园。

3.png

 
IMGEEK论坛将导入环信数年积累的海量即时通讯云开发常见问题及解析,论坛将引入环信研发资源实时回答小伙伴在开发过程中碰到的难点和疑点,我们鼓励互帮互助,程序猿帮助程序猿,同时论坛将建设积分兑换商城,所有答题所获积分都能实时兑换,初期礼品包括笔记本、手机、耳机、运动手环、环信文化衫、环信马克杯等礼品,同时我们也将重新开放现金打赏功能,让每一个问题都得到尊重,让每一个精准回答都得到物质回报。IMGEEK论坛,我们又重新回来了!

凡是过往,皆为序章。2019年,环线即时通讯云走过了第6个年头,我们从技术、产品、解决方案以及大客户方面都取得了长足的进步,环信即时通讯云国内行业首批通过华为云“鲲鹏”认证,我们保持每周更新,每月一个大版本的迭代速度,推出了数个新版SDK和Demo,包括视频会议Demo、互动白板Demo、直播聊天室Demo、语音连麦聊天室Demo等市场热点产品,累计服务了30万款APP,覆盖了近40万开发者。凡是未来,皆有可期,你好2020!以梦为马,不负韶华!

1.jpg

2.jpg



要点:

1,环信移动开发者生态资源导入

2,环信30+技术支持团队全员入驻

3,建设环信积分商城

4,重启现金打赏功能

其他:

积分兑换礼品:马克杯、文化衫、蓝牙耳机、运动手环、小米手机、笔记本

积分兑换规则:后续参看环信积分商城
8
评论

【源码下载】一款使用环信实现的开源灵魂社交APP(含服务器) 猿匹配 开源

beyond 发表了文章 • 16168 次浏览 • 2019-07-01 10:48 • 来自相关话题

#前言
近期,环信热心开发者-穿裤衩闯天下使用环信IM开发了一款实时聊天应用,包含简单的服务器端,现在正式开源给小伙伴们。感兴趣的同学可以一起搞一下哦,详细介绍请往下看。






  上代码
服务器:VMServer
客户端:VMMatch
 
 #VMMatch
猿匹配 —— 国内首个程序猿非严肃婚恋交友应用,让我们一言不合就来场匹配吧
 
#介绍#
首先说下中文名:为什么叫这个名字呢,因为这是一个程序猿(媛)之间匹配交流的应用啊其实这是一个使用环信 IM 开发的一款开源聊天项目,涵盖了时下流行的一些聊天元素,同时已将 IM 功能封装为单独库,可以直接引用,方便使用
项目还处在初期阶段,还有许多功能需要实现,有兴趣的可以一起来
项目资源均来自于互联网,如果有侵权请联系我
 
 #下载体验
猿匹配 小米商店 审核中
猿匹配 Google Play
 
  #项目截图

























  
 #开发环境
项目基本属于在最新的Android开发环境下开发,使用Java8的一些新特性,比如Lambda表达式,
然后项目已经适配Android6.x以上的动态权限适配,以及7.x的文件选择,和8.x的通知提醒等;
· Mac OS 10.14.4
· Android Studio 3.3.2
  #项目模块儿
本项目包含两部分:
一部分是项目主模块app,这部分主要包含了项目的业务逻辑,比如匹配、信息修改、设置等
另一部分是封装成library的vmim,这是为了方便大家引用到自己的项目中做的一步封装,不用再去复杂的复制代码和资源等,
只需要将vmim以module导入到自己的项目中就行了,具体使用方式参见项目app模块儿;
 
  #功能与 TODO
IM部分功能
· [x] 链接监听
· [x] 登录注册
· [x] 会话功能
      。[x] 置顶
      。[x] 标为未读
      。[x] 删除与清空
      。[x] 草稿功能
· [x] 消息功能
      。[x] 下拉加载更多
      。[x] 消息复制(仅文字类消息)
      。[x] 消息删除
      。[x] 文本+Emoji消息收发
      。[x] 大表情消息收发
      。[x] 图片消息
        ~[x] 查看大图
        ~[ ] 保存图片
      。[x] 语音消息
        ~[x] 语音录制
        ~[x] 语音播放(可暂停,波形待优化)
        ~[x] 听筒和扬声器播放切换
      。[x] 语音实时通话功能
      。[x] 视频实时通话功能
      。[x] 通话过程中的娱乐消息收发
        ~[x] 骰子
        ~[x] 石头剪刀布
        ~[x] 大表情
      。[x] 昵称头像处理(通过回调实现)
App部分功能
· [x] 登录注册(包括业务逻辑和 IM 逻辑)
· [x] 匹配
      。[x] 提交匹配信息
      。[x] 拉取匹配信息
· [x] 聊天(这里直接加载 IM 模块儿)
· [x] 我的
      。[x] 个人信息展示
      。[x] 上传头像
      。[x] 设置昵称
      。[x] 设置签名
· [x] 设置
      。[x] 个人信息设置
      。[x] 通知提醒
      。[x] 聊天
      。[ ] 隐私(随业务部分一起完善)
      。[ ] 通用(随业务部分一起完善)
      。[ ] 帮助反馈(随业务部分一起完善)
      。[x] 关于
      。[x] 退出
· [ ] 社区
      。[ ] 发布
      。[ ] 评论
      。[ ] 收藏
      。[ ] 关注
发布功能
· [x] 多渠道打包
· [x] 签名配置
· [x] 开发与线上环境配置
· [x] 敏感信息保护
 
  #配置运行
1.首先复制config.default.gradle到config.gradle
2.配置下config.gradle环信appkey以及bugly统计Id
3.正式打包需要配置下签名信息,同时将签名文件放置在项目根目录
 
  #参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge
 
 #关联项目
服务器端由nodejs实现,地址见这里 VMServer
 
  #VMServer
是为Android开源项目VMMatch项目(中文名猿匹配)实现的服务端
 
  #简介
这个项目包含两部分
· 根目录:服务逻辑及API接口实现
· client目录:前端界面,和服务器端代码端放置在同一仓库下(暂未实现)
 
 #使用
简单介绍下运行环境及部署方法
1.安装nodejs开发时使用的是v10.16.0版本
2.需要安装mongodb并启动,开发使用版本4.0.10
3.下载项目到服务器,可以下载压缩包,或者用git clone命令
4.复制config_default.js到config.js,可根据自己需要修改配置文件
5.安装依赖npm install
6.全局安装pm2npm install pm2 -g 
7.运行 vmshell.sh
 




扫码备注【开源项目】邀你加入环信开源社群
 
转载自https://blog.melove.net/develop-open-source-im-match-and-server/ 
  查看全部
#前言
近期,环信热心开发者-穿裤衩闯天下使用环信IM开发了一款实时聊天应用,包含简单的服务器端,现在正式开源给小伙伴们。感兴趣的同学可以一起搞一下哦,详细介绍请往下看。

猿匹配_logo_副本.png


  上代码
服务器:VMServer
客户端:VMMatch
 
 #VMMatch
猿匹配 —— 国内首个程序猿非严肃婚恋交友应用,让我们一言不合就来场匹配吧
 
#介绍#
首先说下中文名:为什么叫这个名字呢,因为这是一个程序猿(媛)之间匹配交流的应用啊其实这是一个使用环信 IM 开发的一款开源聊天项目,涵盖了时下流行的一些聊天元素,同时已将 IM 功能封装为单独库,可以直接引用,方便使用
项目还处在初期阶段,还有许多功能需要实现,有兴趣的可以一起来
项目资源均来自于互联网,如果有侵权请联系我
 
 #下载体验
猿匹配 小米商店 审核中
猿匹配 Google Play
 
  #项目截图

1.png

2.png

3.png

4.png

5.png

6.png

  
 #开发环境
项目基本属于在最新的Android开发环境下开发,使用Java8的一些新特性,比如Lambda表达式,
然后项目已经适配Android6.x以上的动态权限适配,以及7.x的文件选择,和8.x的通知提醒等;
· Mac OS 10.14.4
· Android Studio 3.3.2
  #项目模块儿
本项目包含两部分:
一部分是项目主模块app,这部分主要包含了项目的业务逻辑,比如匹配、信息修改、设置等
另一部分是封装成library的vmim,这是为了方便大家引用到自己的项目中做的一步封装,不用再去复杂的复制代码和资源等,
只需要将vmim以module导入到自己的项目中就行了,具体使用方式参见项目app模块儿;
 
  #功能与 TODO
IM部分功能
· [x] 链接监听
· [x] 登录注册
· [x] 会话功能
      。[x] 置顶
      。[x] 标为未读
      。[x] 删除与清空
      。[x] 草稿功能
· [x] 消息功能
      。[x] 下拉加载更多
      。[x] 消息复制(仅文字类消息)
      。[x] 消息删除
      。[x] 文本+Emoji消息收发
      。[x] 大表情消息收发
      。[x] 图片消息
        ~[x] 查看大图
        ~[ ] 保存图片
      。[x] 语音消息
        ~[x] 语音录制
        ~[x] 语音播放(可暂停,波形待优化)
        ~[x] 听筒和扬声器播放切换
      。[x] 语音实时通话功能
      。[x] 视频实时通话功能
      。[x] 通话过程中的娱乐消息收发
        ~[x] 骰子
        ~[x] 石头剪刀布
        ~[x] 大表情
      。[x] 昵称头像处理(通过回调实现)
App部分功能
· [x] 登录注册(包括业务逻辑和 IM 逻辑)
· [x] 匹配
      。[x] 提交匹配信息
      。[x] 拉取匹配信息
· [x] 聊天(这里直接加载 IM 模块儿)
· [x] 我的
      。[x] 个人信息展示
      。[x] 上传头像
      。[x] 设置昵称
      。[x] 设置签名
· [x] 设置
      。[x] 个人信息设置
      。[x] 通知提醒
      。[x] 聊天
      。[ ] 隐私(随业务部分一起完善)
      。[ ] 通用(随业务部分一起完善)
      。[ ] 帮助反馈(随业务部分一起完善)
      。[x] 关于
      。[x] 退出
· [ ] 社区
      。[ ] 发布
      。[ ] 评论
      。[ ] 收藏
      。[ ] 关注
发布功能
· [x] 多渠道打包
· [x] 签名配置
· [x] 开发与线上环境配置
· [x] 敏感信息保护
 
  #配置运行
1.首先复制config.default.gradle到config.gradle
2.配置下config.gradle环信appkey以及bugly统计Id
3.正式打包需要配置下签名信息,同时将签名文件放置在项目根目录
 
  #参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge
 
 #关联项目
服务器端由nodejs实现,地址见这里 VMServer
 
  #VMServer
是为Android开源项目VMMatch项目(中文名猿匹配)实现的服务端
 
  #简介
这个项目包含两部分
· 根目录:服务逻辑及API接口实现
· client目录:前端界面,和服务器端代码端放置在同一仓库下(暂未实现)
 
 #使用
简单介绍下运行环境及部署方法
1.安装nodejs开发时使用的是v10.16.0版本
2.需要安装mongodb并启动,开发使用版本4.0.10
3.下载项目到服务器,可以下载压缩包,或者用git clone命令
4.复制config_default.js到config.js,可根据自己需要修改配置文件
5.安装依赖
npm install

6.全局安装pm2
npm install pm2 -g
 
7.运行 vmshell.sh
 
环信冬冬_副本.jpg

扫码备注【开源项目】邀你加入环信开源社群
 
转载自https://blog.melove.net/develop-open-source-im-match-and-server/ 
 
4
评论

在微信小程序里实现聊天室 聊天室 小程序

Tolazy 发表了文章 • 44496 次浏览 • 2019-04-19 17:49 • 来自相关话题

第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
下载环信 小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明



集成
登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改


在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用


修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室


然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉然后在roomlist.wxml 修改对应的 变量绑定名称





demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面


Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了





就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx 查看全部
第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

4
评论

【开源项目】全国首个开源直播小程序源码

beyond 发表了文章 • 188079 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
19
评论

【新手快速入门】集成环信常见问题+解决方案汇总

dujiepeng 发表了文章 • 26622 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
1
评论

【环信合伙人】让一部分人钱包先鼓起来,1000元京东卡拿不停 合伙人 环信

beyond 发表了文章 • 148 次浏览 • 2020-05-18 18:54 • 来自相关话题

环信成立于2013年,是国内领先的企业级软件服务提供商,于2016年荣膺“Gartner 2016 Cool Vendor”。旗下主要产品线包括国内上线最早规模最大的即时通讯能力PaaS平台——环信即时通讯云,国内领先的全场景音视频PaaS平台——环信实时音视频云,全媒体智能客服SaaS平台——环信客服云,以及企业级人工智能服务能力平台——环信机器人,是国内唯一拥有云通讯、云客服和AI机器人三大赛道完整自主知识产权技术储备企服公司。目前已经服务了30万款APP,10万余家企业,注册开发者40万,SDK覆盖手机终端23亿部,现已覆盖包括保险、证券、银行、电商、教育、汽车、物流、出行等领域的众多标杆企业。环信合作人计划,人人为我我为人人,四大产品线总有一款适合小伙伴和小伙伴的朋友们。赠人玫瑰手留余香,500元和1000元京东卡不限次数拿不停。




















 
点击链接,即刻参与 http://www.easemob.com/event/partner 
  查看全部
环信成立于2013年,是国内领先的企业级软件服务提供商,于2016年荣膺“Gartner 2016 Cool Vendor”。旗下主要产品线包括国内上线最早规模最大的即时通讯能力PaaS平台——环信即时通讯云,国内领先的全场景音视频PaaS平台——环信实时音视频云,全媒体智能客服SaaS平台——环信客服云,以及企业级人工智能服务能力平台——环信机器人,是国内唯一拥有云通讯、云客服和AI机器人三大赛道完整自主知识产权技术储备企服公司。目前已经服务了30万款APP,10万余家企业,注册开发者40万,SDK覆盖手机终端23亿部,现已覆盖包括保险、证券、银行、电商、教育、汽车、物流、出行等领域的众多标杆企业。环信合作人计划,人人为我我为人人,四大产品线总有一款适合小伙伴和小伙伴的朋友们。赠人玫瑰手留余香,500元和1000元京东卡不限次数拿不停。
6.jpg

2.png

3.jpg

4.jpg

5.png

 
点击链接,即刻参与 http://www.easemob.com/event/partner 
 
2
评论

基于环信sdk在uni-app框架中快速开发一款多平台社交Demo SDK uni_app 环信

beyond 发表了文章 • 360 次浏览 • 2020-05-11 11:34 • 来自相关话题

说在前面:此款 demo 是基于 环信sdk 开发的一款具有单聊、群聊、聊天室、音视频等功能的应用。在此之前我们已经开发完 Vue、react(web端)、微信小程序。这三个热门领域的版本,如有需要源码可以后台留言索取。





 
安装开发工具

我们选用微信小程序来用做示例(如果选择百度、支付宝安装对应开发者工具即可)、

微信开发者工具建议还是安装最新版的。uni-app的开发也必须安装HBuilderX工具,这个是捆绑的,没得选择。要用uni-app,你必须得装!

工具安装:

微信开发者工具

HBuilderX

项目demo介绍:






项目demo启动预览:





 
快速集成环信 sdk:

1、复制整个utils文件






如果你想具体了解主要配置文件 请看这个链接:

http://docs-im.easemob.com/im/web/intro/start

2、如何使用环信的appkey ,可以在环信 console 后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到配置文件中 ,如下图所示:






以上两个重要的配置准备完成之后就可以进行一系列的操作了(收发消息、好友申请、进群入群通知等)

在uni-app中 使用环信 sdk 实现添加、删除好友:

1、在全局 App.vue 文件 钩子函数 onLaunch() 中监听各种事件 (好友申请、收到各类消息等)如图:






发送好友请求:






在onPresence(message)事件中接收到好友消息申请:






同意好友请求:






拒绝好友请求:






实现收发消息:

1、给好友发送消息:






2、接收到消息:

在onTextMessage(message)事件中接收到好友消息,然后做消息上屏处理(具体消息上屏逻辑可看demo中代码示例):





以上展示的仅仅为基本业务场景,更多的业务逻辑详情请看demo示例。api具体详情可以查看 环信sdk 文档

最后结语:基于uni-app这个框架可实现多平台, 虽然目前一期集成环信sdk的版本仅支持微信小程序版本,但二期我们将加入头条、支付宝等小程序,敬请期待。PS:对于安卓、ios移动端,我们建议使用针对移动端开发的sdk版本。

基于uni-app的开发其中也趟了不少坑,在这里就不多赘述了。回归到框架的选型来讲,选用uni-app开发小程序,可同时并行多端小程序,这点是真香,一次开发多端发布。至于审核嘛~ 时快时慢。 查看全部
说在前面:此款 demo 是基于 环信sdk 开发的一款具有单聊、群聊、聊天室、音视频等功能的应用。在此之前我们已经开发完 Vue、react(web端)、微信小程序。这三个热门领域的版本,如有需要源码可以后台留言索取。

1.jpg

 
安装开发工具

我们选用微信小程序来用做示例(如果选择百度、支付宝安装对应开发者工具即可)、

微信开发者工具建议还是安装最新版的。uni-app的开发也必须安装HBuilderX工具,这个是捆绑的,没得选择。要用uni-app,你必须得装!

工具安装:

微信开发者工具

HBuilderX

项目demo介绍:

2.jpg


项目demo启动预览:

3.jpg

 
快速集成环信 sdk:

1、复制整个utils文件

4.jpg


如果你想具体了解主要配置文件 请看这个链接:

http://docs-im.easemob.com/im/web/intro/start

2、如何使用环信的appkey ,可以在环信 console 后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到配置文件中 ,如下图所示:

5.jpg


以上两个重要的配置准备完成之后就可以进行一系列的操作了(收发消息、好友申请、进群入群通知等)

在uni-app中 使用环信 sdk 实现添加、删除好友:

1、在全局 App.vue 文件 钩子函数 onLaunch() 中监听各种事件 (好友申请、收到各类消息等)如图:

6.jpg


发送好友请求:

7.jpg


在onPresence(message)事件中接收到好友消息申请:

8.jpg


同意好友请求:

9.jpg


拒绝好友请求:

10.jpg


实现收发消息:

1、给好友发送消息:

11.jpg


2、接收到消息:

在onTextMessage(message)事件中接收到好友消息,然后做消息上屏处理(具体消息上屏逻辑可看demo中代码示例):

12.jpg

以上展示的仅仅为基本业务场景,更多的业务逻辑详情请看demo示例。api具体详情可以查看 环信sdk 文档

最后结语:基于uni-app这个框架可实现多平台, 虽然目前一期集成环信sdk的版本仅支持微信小程序版本,但二期我们将加入头条、支付宝等小程序,敬请期待。PS:对于安卓、ios移动端,我们建议使用针对移动端开发的sdk版本。

基于uni-app的开发其中也趟了不少坑,在这里就不多赘述了。回归到框架的选型来讲,选用uni-app开发小程序,可同时并行多端小程序,这点是真香,一次开发多端发布。至于审核嘛~ 时快时慢。
1
评论

手把手教程:4小时开发一个视频会议APP【附开源代码】 环信 开源 视频会议

fat1 发表了文章 • 868 次浏览 • 2020-04-17 00:29 • 来自相关话题

今年是不平凡的一年,没错,就是因为疫情,因为疫情原因 ,大家只能呆着家里,严重影响了我们正常的学习 生活 工作,在这种情况下,只能在家办公,这时候大家就会想到线上视频会议,目前很多互联网公司有这个产品,比较出名的就比如 腾讯会议 钉钉 zoom等,用这些是很方便,但是如果能开发自己的视频会议,那会不会更好或者是更有成就感,下面简单介绍这个这个项目,和大概的开发过程。本项目基于环信音视频云来完成,实现的主要功能有:
  创建会议、删除会议、获取指定会议室详情、加入会议室、退出会议室等关于会议的管理 ;  获取会议室参会人名列表、踢人,设置观众为主播,设置主播为观众等关于会议室的人员管理;  共享桌面(web端);
 三个端的实现:Android,iOS,Web

上面这些功能在项目中都已经实现。还有水印 ,变声等高级功能在环信音视频SDK的接口内部都已经封装好,本项目没有实现 ,大家可以自行去实现。有关多人音视频功能更详细的介绍大家可以参考:这儿。多人音视频实现的实现主要有以下一些场景:社交交友,远程心理咨询、远程医疗、一对一在线教育、远程视频辅助等。咳咳 ,接下来就是纯干货了,给大家介绍我是如何一步步开发出一个完整的多人音视频app。
 
项目截图
 
首先给大家展示下项目运行的效果图,会议界面 主窗口是一个大的 RelativeLayout ,最下面的那一排排小窗口是的实现方法是HorizontalScrollView加上一个开源的组件 com.jaouan.compoundlayout.RadioLayoutGroup 实现的,点击下面的小窗口后,可以 把小窗口的视频流显示在大屏上,具体是调用 updateRemoteSurfaceView(String streamId, EMCallSurfaceView remoteView)来更新SurfaceView,具体的细节大家可以看看代码里面的实现 最后会公布代码开源地址。
















准备工作
    大家得下载安装Android Studio,配置好Android 开发环境,怎么详细配置我就在这不再细说了 网上有很多的教程,大家自己可以找找看,然后大家可以看看环信多人音视频会议的主要功能和一些基本概念介绍。
集成 
  1. 首先大家会想问怎么调用环信的SDK ,大家可以使用 远程依赖SDK包,建议大家用最新版本的远程依赖:
     com.hyphenate:hyphenate-sdk:3.6.6 ,依赖包可以放在 build.gradle里面的 dependencies 选项下面,如下图所示





2.其次怎么使用环信的appkey ,可以在环信音视频云后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到AndroidManifest.xml中 ,如下图所示:






3.经过以上两个重要的前期配置准备 ,接下来我们就可以开始进行代码开发了,首先我们先创建一个项目的DemoApplication类和      DemoHelper类,DemoApplication 类和DemoHelper类都是一个单例类 ,DemoApplication 主要功能就是进行DemoHelper 的初始化,而DemoHelper里面主要是主要有一些option 配置和EMClient 进行初始化,代码如下所示:public void init(Context context) {
EMOptions options = initChatOptions(context);
EMClient.getInstance().init(context, options);
PreferenceManager.init(context);
}
  DemoHelper还有一个重要的功能就是设置  EMConferenceListener 进行会议监听,有关 EMConferenceListener的类的详细介绍 ,通过这个监听可以再加入会议的时候获取到已经在会议中的流和主播信息,分别是通过其中以下两个回调获取:@Override
public void onMemberJoined(EMConferenceMember member){

}

@Override
public void onStreamAdded(EMConferenceStream stream){

}
4.DemoApplication类完成以后,接下来就是怎么去登陆 环信IM 账号和 创建加入会议房间了,首次安装的时候都没有账号,我们使用的办法是自动注册一个账号 在本地进行保存,然后进行登录 ,注册 登录详细接口请看 这儿,  注册 登录的调用大概如下所示: 
 try {
        //注册一个环信ID
        EMClient.getInstance().createAccount(username, password);
            
        //注册成功进行登录
        PreferenceManager.getInstance().setCurrentUserName(username);
        PreferenceManager.getInstance().setCurrentuserPassword(password);
        login();
    } catch (final HyphenateException e) {
       runOnUiThread(new Runnable() {
               public void run() {
                  int errorCode=e.getErrorCode();
                   if(errorCode==EMError.NETWORK_ERROR){
                    Toast.makeText(getApplicationContext(), getResources().getString(R.string.network_anomalies), Toast.LENGTH_SHORT).show();
      }
   }   
}
 
  public void login() {
 
        //登录已经注册成功的环信ID
        EMClient.getInstance().login(username, password, new EMCallBack() {
            @Override
            public void onSuccess() {
                Log.d(TAG, "login: onSuccess");
                //登录成功进入会议房间
                joinRoom();
            }
            @Override
            public void onProgress(int progress, String status) {
                Log.d(TAG, "login: onProgress");
            }
            @Override
            public void onError(final int code, final String message) {
                Log.d(TAG, "login: onError: " + code);
                runOnUiThread(new Runnable() {
                    public void run() {
                        Toast.makeText(getApplicationContext(), getString(R.string.Login_failed) + message,Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });
    }
登录完成以后,我们可以根据房间名创建并加入房间,主要代码大概如下: EMClient.getInstance().conferenceManager().joinRoom(currentRoomname, currentPassword, conferenceRole,roomConfig, new EMValueCallBack<EMConference>(){
@Override
public void onSuccess(EMConference value) {
EMLog.i(TAG, "join conference success");
Intent intent = new Intent(MainActivity.this, ConferenceActivity.class);
startActivity(intent);
finish();
}
@Override
public void onError(final int error, final String errorMsg) {
EMLog.e(TAG, "join conference failed error " + error + ", msg " + errorMsg);
runOnUiThread(new Runnable() {
@Override
public void run() {
setBtnEnable(true);
if(error == CALL_TALKER_ISFULL) {
takerFullDialogDisplay();
}else{
Toast.makeText(getApplicationContext(), "Join conference failed " + error + " " + errorMsg, Toast.LENGTH_SHORT).show();
}
}
});
}
});
EMClient.getInstance().conferenceManager().joinRoom() API可以根据房间名创建指定会议,当以该房间名命名的会议不存在时候,会直接创建,当会议已经创建好 可以根据正确的房间名和密码加入房间 ,到这一步为止,我们已经成功的创建 并加入会议。
5.加入会议以后我们进入到会议界面,展示从DemoHelper类 EMConferenceListener 中的 onStreamAdded 回调 和 onMemberJoined 获取到的流和主播列表 ,在ConferenceActivity 中实现 EMConferenceListener ,然后直接把 ConferenceActivity 注册监听,用以下方法  EMClient.getInstance().conferenceManager().addConferenceListener(this); 这样就可实现 EMConferenceListener 事件的处理,比如
 主播 进出房间 :
public void onMemberJoined(final EMConferenceMember member);
public void onMemberExited(final EMConferenceMember member);

增加流 移除流:
public void onStreamAdded(final EMConferenceStream stream)
 public void onStreamRemoved(final EMConferenceStream stream)

管理员变更: 
public void onAdminAdded(String streamId) ;  
public void onAdminRemoved(String streamId)

角色变更  用户被踢  谁在说话等各种回调,可以处理各种业务逻辑 ,详细的请参考 项目中的实现 ,最后会附上项目的开源地址。

6 进入会议房间以后如果用户角色为主播可以进行发布视频流 ,观众只能订阅视频流 不能发布视频流 ,可以调用SDK的publish接口发布流,该接口用到了EMStreamParam参数,你可以自由配置,比如是否上传视频,是否上传音频,使用前置或后置摄像头,视频码率,显示视频页面等等,具体实现可以参考 中发布 订阅视频流的内容, 关于以上的代码逻辑如以 如以下: //发布视频流
normalParam = new EMStreamParam();
normalParam.setStreamType(EMConferenceStream.StreamType.NORMAL);
normalParam.setVideoOff(true);
normalParam.setAudioOff(true);

EMClient.getInstance().conferenceManager().publish(normalParam, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
conference.setPubStreamId(value, EMConferenceStream.StreamType.NORMAL);
addOrUpdateStreamList("local-stream", value);

PhoneStateManager.get(ConferenceActivity.this).addStateCallback(phoneStateCallback);
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "publish failed: error=" + error + ", msg=" + errorMsg);
}
});
//订阅其他主播的视频流
private void subscribe(EMConferenceStream stream, EMCallSurfaceView surfaceView) {
EMClient.getInstance().conferenceManager().subscribe(stream, surfaceView, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
}

@Override
public void onError(int error, String errorMsg) {

}
});
}
7.有关上麦 下麦 的逻辑处理,观众可以请求上麦成为主播,主播可以下麦成为观众,上麦 下麦 是利用 EMConferenceAttribute进行处理 ,EMConferenceAttribute  是一个事件广播,广播事件是一个key-value格式,key-value 可以由开发者进行自行定义,增添事件以后 ,服务器会把事件进行广播。会议中成员会收到 onAttributesUpdated回调。例如本项目中的会议上麦 下麦 代码如下所示://上麦申请

EMClient.getInstance().conferenceManager().setConferenceAttribute(
EMClient.getInstance().getCurrentUser(),
"request_tobe_speaker",
new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_speaker scuessed");

}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_speaker failed: error=" + error

}
});

//下麦申请
EMClient.getInstance().conferenceManager().setConferenceAttribute(EMClient.getInstance().getCurrentUser()
, "request_tobe_audience", new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_audience scuessed");
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_audience failed: error=" + error + ", msg=" + errorMsg);
}
});
 上麦 下麦 请求发出以后 只能由主持人去处理,处理在 EMConferenceListener  的回调 onAttributesUpdated(EMConferenceAttribute attributes) 去处理 ,收到回调以后 解析attributes 然后进行处理请求,处理的过程代码大概如下: EMClient.getInstance().conferenceManager().grantRole(conference.getConferenceId()
, new EMConferenceMember(memName, null, null,null)
, EMConferenceManager.EMConferenceRole.Talker, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole success, result: " + value);
dialog.dismiss();
}
@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole failed, error: " + error + " - " + errorMsg);

}
});
下麦也是和上麦一样是利用 EMConferenceAttribute进行处理。

9.有关退出会议 销毁会议 普通主播  观众只能退出会议 ,主持人还可以 销毁会议 正在进行中的会议可以进行销毁,退出会议 销毁会议 具体代码如下: EMClient.getInstance().conferenceManager().exitConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功退出当前会议!", Toast.LENGTH_SHORT).show();
}
});
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "exit conference failed " + error + ", " + errorMsg);
}
});

EMClient.getInstance().conferenceManager().destroyConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功销毁当前会议!", Toast.LENGTH_SHORT).show();
}
});
EMLog.i(TAG, "finish ConferenceActivity");
finish();
}

尾语
至此 整个 多人音视频会议开发的详细步骤 已经完成 ,虽然比较麻烦 但是每个步骤都很清晰 ,有不太清楚的欢迎大家积极讨论, 附上本项目的github地址:https://github.com/easemob/videocall-android  欢迎大家积极参与 ,谢谢支持。
Demo下载 二维码如下 欢迎大家体验(iOS版和web版下载地址请见:https://www.easemob.com/download/rtc)






  查看全部
今年是不平凡的一年,没错,就是因为疫情,因为疫情原因 ,大家只能呆着家里,严重影响了我们正常的学习 生活 工作,在这种情况下,只能在家办公,这时候大家就会想到线上视频会议,目前很多互联网公司有这个产品,比较出名的就比如 腾讯会议 钉钉 zoom等,用这些是很方便,但是如果能开发自己的视频会议,那会不会更好或者是更有成就感,下面简单介绍这个这个项目,和大概的开发过程。本项目基于环信音视频云来完成,实现的主要功能有:
  •   创建会议、删除会议、获取指定会议室详情、加入会议室、退出会议室等关于会议的管理 ;
  •   获取会议室参会人名列表、踢人,设置观众为主播,设置主播为观众等关于会议室的人员管理;
  •   共享桌面(web端);

 三个端的实现:Android,iOS,Web

上面这些功能在项目中都已经实现。还有水印 ,变声等高级功能在环信音视频SDK的接口内部都已经封装好,本项目没有实现 ,大家可以自行去实现。有关多人音视频功能更详细的介绍大家可以参考:这儿。多人音视频实现的实现主要有以下一些场景:社交交友,远程心理咨询、远程医疗、一对一在线教育、远程视频辅助等。咳咳 ,接下来就是纯干货了,给大家介绍我是如何一步步开发出一个完整的多人音视频app。
 
项目截图
 
首先给大家展示下项目运行的效果图,会议界面 主窗口是一个大的 RelativeLayout ,最下面的那一排排小窗口是的实现方法是HorizontalScrollView加上一个开源的组件 com.jaouan.compoundlayout.RadioLayoutGroup 实现的,点击下面的小窗口后,可以 把小窗口的视频流显示在大屏上,具体是调用 updateRemoteSurfaceView(String streamId, EMCallSurfaceView remoteView)来更新SurfaceView,具体的细节大家可以看看代码里面的实现 最后会公布代码开源地址。

20200410140627956.jpg


20200410140855852.jpg


20200410141055394.jpg


准备工作
    大家得下载安装Android Studio,配置好Android 开发环境,怎么详细配置我就在这不再细说了 网上有很多的教程,大家自己可以找找看,然后大家可以看看环信多人音视频会议的主要功能和一些基本概念介绍。
集成 
  1. 首先大家会想问怎么调用环信的SDK ,大家可以使用 远程依赖SDK包,建议大家用最新版本的远程依赖:
     com.hyphenate:hyphenate-sdk:3.6.6 ,依赖包可以放在 build.gradle里面的 dependencies 选项下面,如下图所示
2020040917363212.png


2.其次怎么使用环信的appkey ,可以在环信音视频云后台注册一个 账号申请appkey ,可以参考这里 ,获取到  appkey 以后添加到AndroidManifest.xml中 ,如下图所示:

20200409213959916.png


3.经过以上两个重要的前期配置准备 ,接下来我们就可以开始进行代码开发了,首先我们先创建一个项目的DemoApplication类和      DemoHelper类,DemoApplication 类和DemoHelper类都是一个单例类 ,DemoApplication 主要功能就是进行DemoHelper 的初始化,而DemoHelper里面主要是主要有一些option 配置和EMClient 进行初始化,代码如下所示:
public void init(Context context) {
EMOptions options = initChatOptions(context);
EMClient.getInstance().init(context, options);
PreferenceManager.init(context);
}

  DemoHelper还有一个重要的功能就是设置  EMConferenceListener 进行会议监听,有关 EMConferenceListener的类的详细介绍 ,通过这个监听可以再加入会议的时候获取到已经在会议中的流和主播信息,分别是通过其中以下两个回调获取:
@Override 
public void onMemberJoined(EMConferenceMember member){

}

@Override
public void onStreamAdded(EMConferenceStream stream){

}

4.DemoApplication类完成以后,接下来就是怎么去登陆 环信IM 账号和 创建加入会议房间了,首次安装的时候都没有账号,我们使用的办法是自动注册一个账号 在本地进行保存,然后进行登录 ,注册 登录详细接口请看 这儿,  注册 登录的调用大概如下所示: 
 try {
        //注册一个环信ID
        EMClient.getInstance().createAccount(username, password);
            
        //注册成功进行登录
        PreferenceManager.getInstance().setCurrentUserName(username);
        PreferenceManager.getInstance().setCurrentuserPassword(password);
        login();
    } catch (final HyphenateException e) {
       runOnUiThread(new Runnable() {
               public void run() {
                  int errorCode=e.getErrorCode();
                   if(errorCode==EMError.NETWORK_ERROR){
                    Toast.makeText(getApplicationContext(), getResources().getString(R.string.network_anomalies), Toast.LENGTH_SHORT).show();
      }
   }   
}
 
  public void login() {
 
        //登录已经注册成功的环信ID
        EMClient.getInstance().login(username, password, new EMCallBack() {
            @Override
            public void onSuccess() {
                Log.d(TAG, "login: onSuccess");
                //登录成功进入会议房间
                joinRoom();
            }
            @Override
            public void onProgress(int progress, String status) {
                Log.d(TAG, "login: onProgress");
            }
            @Override
            public void onError(final int code, final String message) {
                Log.d(TAG, "login: onError: " + code);
                runOnUiThread(new Runnable() {
                    public void run() {
                        Toast.makeText(getApplicationContext(), getString(R.string.Login_failed) + message,Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });
    }
登录完成以后,我们可以根据房间名创建并加入房间,主要代码大概如下:
 EMClient.getInstance().conferenceManager().joinRoom(currentRoomname, currentPassword, conferenceRole,roomConfig, new EMValueCallBack<EMConference>(){
@Override
public void onSuccess(EMConference value) {
EMLog.i(TAG, "join conference success");
Intent intent = new Intent(MainActivity.this, ConferenceActivity.class);
startActivity(intent);
finish();
}
@Override
public void onError(final int error, final String errorMsg) {
EMLog.e(TAG, "join conference failed error " + error + ", msg " + errorMsg);
runOnUiThread(new Runnable() {
@Override
public void run() {
setBtnEnable(true);
if(error == CALL_TALKER_ISFULL) {
takerFullDialogDisplay();
}else{
Toast.makeText(getApplicationContext(), "Join conference failed " + error + " " + errorMsg, Toast.LENGTH_SHORT).show();
}
}
});
}
});

EMClient.getInstance().conferenceManager().joinRoom() API可以根据房间名创建指定会议,当以该房间名命名的会议不存在时候,会直接创建,当会议已经创建好 可以根据正确的房间名和密码加入房间 ,到这一步为止,我们已经成功的创建 并加入会议。
5.加入会议以后我们进入到会议界面,展示从DemoHelper类 EMConferenceListener 中的 onStreamAdded 回调 和 onMemberJoined 获取到的流和主播列表 ,在ConferenceActivity 中实现 EMConferenceListener ,然后直接把 ConferenceActivity 注册监听,用以下方法  EMClient.getInstance().conferenceManager().addConferenceListener(this); 这样就可实现 EMConferenceListener 事件的处理,比如
 主播 进出房间 :
public void onMemberJoined(final EMConferenceMember member);
public void onMemberExited(final EMConferenceMember member);

增加流 移除流:
public void onStreamAdded(final EMConferenceStream stream)
 public void onStreamRemoved(final EMConferenceStream stream)

管理员变更: 
public void onAdminAdded(String streamId) ;  
public void onAdminRemoved(String streamId)

角色变更  用户被踢  谁在说话等各种回调,可以处理各种业务逻辑 ,详细的请参考 项目中的实现 ,最后会附上项目的开源地址。

6 进入会议房间以后如果用户角色为主播可以进行发布视频流 ,观众只能订阅视频流 不能发布视频流 ,可以调用SDK的publish接口发布流,该接口用到了EMStreamParam参数,你可以自由配置,比如是否上传视频,是否上传音频,使用前置或后置摄像头,视频码率,显示视频页面等等,具体实现可以参考 中发布 订阅视频流的内容, 关于以上的代码逻辑如以 如以下:
 //发布视频流
normalParam = new EMStreamParam();
normalParam.setStreamType(EMConferenceStream.StreamType.NORMAL);
normalParam.setVideoOff(true);
normalParam.setAudioOff(true);

EMClient.getInstance().conferenceManager().publish(normalParam, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
conference.setPubStreamId(value, EMConferenceStream.StreamType.NORMAL);
addOrUpdateStreamList("local-stream", value);

PhoneStateManager.get(ConferenceActivity.this).addStateCallback(phoneStateCallback);
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "publish failed: error=" + error + ", msg=" + errorMsg);
}
});
//订阅其他主播的视频流
private void subscribe(EMConferenceStream stream, EMCallSurfaceView surfaceView) {
EMClient.getInstance().conferenceManager().subscribe(stream, surfaceView, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
}

@Override
public void onError(int error, String errorMsg) {

}
});
}

7.有关上麦 下麦 的逻辑处理,观众可以请求上麦成为主播,主播可以下麦成为观众,上麦 下麦 是利用 EMConferenceAttribute进行处理 ,EMConferenceAttribute  是一个事件广播,广播事件是一个key-value格式,key-value 可以由开发者进行自行定义,增添事件以后 ,服务器会把事件进行广播。会议中成员会收到 onAttributesUpdated回调。例如本项目中的会议上麦 下麦 代码如下所示:
//上麦申请  

EMClient.getInstance().conferenceManager().setConferenceAttribute(
EMClient.getInstance().getCurrentUser(),
"request_tobe_speaker",
new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_speaker scuessed");

}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_speaker failed: error=" + error

}
});

//下麦申请
EMClient.getInstance().conferenceManager().setConferenceAttribute(EMClient.getInstance().getCurrentUser()
, "request_tobe_audience", new EMValueCallBack<Void>() {
@Override
public void onSuccess(Void value) {
EMLog.i(TAG, "request_tobe_audience scuessed");
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "request_tobe_audience failed: error=" + error + ", msg=" + errorMsg);
}
});

 上麦 下麦 请求发出以后 只能由主持人去处理,处理在 EMConferenceListener  的回调 onAttributesUpdated(EMConferenceAttribute attributes) 去处理 ,收到回调以后 解析attributes 然后进行处理请求,处理的过程代码大概如下:
   EMClient.getInstance().conferenceManager().grantRole(conference.getConferenceId()
, new EMConferenceMember(memName, null, null,null)
, EMConferenceManager.EMConferenceRole.Talker, new EMValueCallBack<String>() {
@Override
public void onSuccess(String value) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole success, result: " + value);
dialog.dismiss();
}
@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, " requestTalkerDisplay request_tobe_speaker changeRole failed, error: " + error + " - " + errorMsg);

}
});

下麦也是和上麦一样是利用 EMConferenceAttribute进行处理。

9.有关退出会议 销毁会议 普通主播  观众只能退出会议 ,主持人还可以 销毁会议 正在进行中的会议可以进行销毁,退出会议 销毁会议 具体代码如下:
 EMClient.getInstance().conferenceManager().exitConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功退出当前会议!", Toast.LENGTH_SHORT).show();
}
});
}

@Override
public void onError(int error, String errorMsg) {
EMLog.i(TAG, "exit conference failed " + error + ", " + errorMsg);
}
});

EMClient.getInstance().conferenceManager().destroyConference(new EMValueCallBack() {
@Override
public void onSuccess(Object value) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "您已成功销毁当前会议!", Toast.LENGTH_SHORT).show();
}
});
EMLog.i(TAG, "finish ConferenceActivity");
finish();
}

尾语
至此 整个 多人音视频会议开发的详细步骤 已经完成 ,虽然比较麻烦 但是每个步骤都很清晰 ,有不太清楚的欢迎大家积极讨论, 附上本项目的github地址:https://github.com/easemob/videocall-android  欢迎大家积极参与 ,谢谢支持。
Demo下载 二维码如下 欢迎大家体验(iOS版和web版下载地址请见:https://www.easemob.com/download/rtc)


20200410142228530.png

 
2
评论

停课不停学,停班不停工!重塑IMGEEK论坛移动开发者的力量! 5G音视频 集成3.0demo 集成demo 集成问题 环信

beyond 发表了文章 • 729 次浏览 • 2020-04-14 17:53 • 来自相关话题

亲爱的环信生态开发者们,受制于新冠疫情的影响,导致无数的移动开发项目停滞,程序猿们的就业和收入都受到了一定程度的影响,正所谓停课不停学,停班不停工,为了尽快帮助大家恢复生产,环信将重新注入资源重塑IMGEEK论坛,将论坛初期打造成为即时通讯云+音视频云开发者们自己的家园。





 
IMGEEK论坛将导入环信数年积累的海量即时通讯云开发常见问题及解析,论坛将引入环信研发资源实时回答小伙伴在开发过程中碰到的难点和疑点,我们鼓励互帮互助,程序猿帮助程序猿,同时论坛将建设积分兑换商城,所有答题所获积分都能实时兑换,初期礼品包括笔记本、手机、耳机、运动手环、环信文化衫、环信马克杯等礼品,同时我们也将重新开放现金打赏功能,让每一个问题都得到尊重,让每一个精准回答都得到物质回报。IMGEEK论坛,我们又重新回来了!

凡是过往,皆为序章。2019年,环线即时通讯云走过了第6个年头,我们从技术、产品、解决方案以及大客户方面都取得了长足的进步,环信即时通讯云国内行业首批通过华为云“鲲鹏”认证,我们保持每周更新,每月一个大版本的迭代速度,推出了数个新版SDK和Demo,包括视频会议Demo、互动白板Demo、直播聊天室Demo、语音连麦聊天室Demo等市场热点产品,累计服务了30万款APP,覆盖了近40万开发者。凡是未来,皆有可期,你好2020!以梦为马,不负韶华!











要点:

1,环信移动开发者生态资源导入

2,环信30+技术支持团队全员入驻

3,建设环信积分商城

4,重启现金打赏功能

其他:

积分兑换礼品:马克杯、文化衫、蓝牙耳机、运动手环、小米手机、笔记本

积分兑换规则:后续参看环信积分商城 查看全部
亲爱的环信生态开发者们,受制于新冠疫情的影响,导致无数的移动开发项目停滞,程序猿们的就业和收入都受到了一定程度的影响,正所谓停课不停学,停班不停工,为了尽快帮助大家恢复生产,环信将重新注入资源重塑IMGEEK论坛,将论坛初期打造成为即时通讯云+音视频云开发者们自己的家园。

3.png

 
IMGEEK论坛将导入环信数年积累的海量即时通讯云开发常见问题及解析,论坛将引入环信研发资源实时回答小伙伴在开发过程中碰到的难点和疑点,我们鼓励互帮互助,程序猿帮助程序猿,同时论坛将建设积分兑换商城,所有答题所获积分都能实时兑换,初期礼品包括笔记本、手机、耳机、运动手环、环信文化衫、环信马克杯等礼品,同时我们也将重新开放现金打赏功能,让每一个问题都得到尊重,让每一个精准回答都得到物质回报。IMGEEK论坛,我们又重新回来了!

凡是过往,皆为序章。2019年,环线即时通讯云走过了第6个年头,我们从技术、产品、解决方案以及大客户方面都取得了长足的进步,环信即时通讯云国内行业首批通过华为云“鲲鹏”认证,我们保持每周更新,每月一个大版本的迭代速度,推出了数个新版SDK和Demo,包括视频会议Demo、互动白板Demo、直播聊天室Demo、语音连麦聊天室Demo等市场热点产品,累计服务了30万款APP,覆盖了近40万开发者。凡是未来,皆有可期,你好2020!以梦为马,不负韶华!

1.jpg

2.jpg



要点:

1,环信移动开发者生态资源导入

2,环信30+技术支持团队全员入驻

3,建设环信积分商城

4,重启现金打赏功能

其他:

积分兑换礼品:马克杯、文化衫、蓝牙耳机、运动手环、小米手机、笔记本

积分兑换规则:后续参看环信积分商城
8
评论

【源码下载】一款使用环信实现的开源灵魂社交APP(含服务器) 猿匹配 开源

beyond 发表了文章 • 16168 次浏览 • 2019-07-01 10:48 • 来自相关话题

#前言
近期,环信热心开发者-穿裤衩闯天下使用环信IM开发了一款实时聊天应用,包含简单的服务器端,现在正式开源给小伙伴们。感兴趣的同学可以一起搞一下哦,详细介绍请往下看。






  上代码
服务器:VMServer
客户端:VMMatch
 
 #VMMatch
猿匹配 —— 国内首个程序猿非严肃婚恋交友应用,让我们一言不合就来场匹配吧
 
#介绍#
首先说下中文名:为什么叫这个名字呢,因为这是一个程序猿(媛)之间匹配交流的应用啊其实这是一个使用环信 IM 开发的一款开源聊天项目,涵盖了时下流行的一些聊天元素,同时已将 IM 功能封装为单独库,可以直接引用,方便使用
项目还处在初期阶段,还有许多功能需要实现,有兴趣的可以一起来
项目资源均来自于互联网,如果有侵权请联系我
 
 #下载体验
猿匹配 小米商店 审核中
猿匹配 Google Play
 
  #项目截图

























  
 #开发环境
项目基本属于在最新的Android开发环境下开发,使用Java8的一些新特性,比如Lambda表达式,
然后项目已经适配Android6.x以上的动态权限适配,以及7.x的文件选择,和8.x的通知提醒等;
· Mac OS 10.14.4
· Android Studio 3.3.2
  #项目模块儿
本项目包含两部分:
一部分是项目主模块app,这部分主要包含了项目的业务逻辑,比如匹配、信息修改、设置等
另一部分是封装成library的vmim,这是为了方便大家引用到自己的项目中做的一步封装,不用再去复杂的复制代码和资源等,
只需要将vmim以module导入到自己的项目中就行了,具体使用方式参见项目app模块儿;
 
  #功能与 TODO
IM部分功能
· [x] 链接监听
· [x] 登录注册
· [x] 会话功能
      。[x] 置顶
      。[x] 标为未读
      。[x] 删除与清空
      。[x] 草稿功能
· [x] 消息功能
      。[x] 下拉加载更多
      。[x] 消息复制(仅文字类消息)
      。[x] 消息删除
      。[x] 文本+Emoji消息收发
      。[x] 大表情消息收发
      。[x] 图片消息
        ~[x] 查看大图
        ~[ ] 保存图片
      。[x] 语音消息
        ~[x] 语音录制
        ~[x] 语音播放(可暂停,波形待优化)
        ~[x] 听筒和扬声器播放切换
      。[x] 语音实时通话功能
      。[x] 视频实时通话功能
      。[x] 通话过程中的娱乐消息收发
        ~[x] 骰子
        ~[x] 石头剪刀布
        ~[x] 大表情
      。[x] 昵称头像处理(通过回调实现)
App部分功能
· [x] 登录注册(包括业务逻辑和 IM 逻辑)
· [x] 匹配
      。[x] 提交匹配信息
      。[x] 拉取匹配信息
· [x] 聊天(这里直接加载 IM 模块儿)
· [x] 我的
      。[x] 个人信息展示
      。[x] 上传头像
      。[x] 设置昵称
      。[x] 设置签名
· [x] 设置
      。[x] 个人信息设置
      。[x] 通知提醒
      。[x] 聊天
      。[ ] 隐私(随业务部分一起完善)
      。[ ] 通用(随业务部分一起完善)
      。[ ] 帮助反馈(随业务部分一起完善)
      。[x] 关于
      。[x] 退出
· [ ] 社区
      。[ ] 发布
      。[ ] 评论
      。[ ] 收藏
      。[ ] 关注
发布功能
· [x] 多渠道打包
· [x] 签名配置
· [x] 开发与线上环境配置
· [x] 敏感信息保护
 
  #配置运行
1.首先复制config.default.gradle到config.gradle
2.配置下config.gradle环信appkey以及bugly统计Id
3.正式打包需要配置下签名信息,同时将签名文件放置在项目根目录
 
  #参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge
 
 #关联项目
服务器端由nodejs实现,地址见这里 VMServer
 
  #VMServer
是为Android开源项目VMMatch项目(中文名猿匹配)实现的服务端
 
  #简介
这个项目包含两部分
· 根目录:服务逻辑及API接口实现
· client目录:前端界面,和服务器端代码端放置在同一仓库下(暂未实现)
 
 #使用
简单介绍下运行环境及部署方法
1.安装nodejs开发时使用的是v10.16.0版本
2.需要安装mongodb并启动,开发使用版本4.0.10
3.下载项目到服务器,可以下载压缩包,或者用git clone命令
4.复制config_default.js到config.js,可根据自己需要修改配置文件
5.安装依赖npm install
6.全局安装pm2npm install pm2 -g 
7.运行 vmshell.sh
 




扫码备注【开源项目】邀你加入环信开源社群
 
转载自https://blog.melove.net/develop-open-source-im-match-and-server/ 
  查看全部
#前言
近期,环信热心开发者-穿裤衩闯天下使用环信IM开发了一款实时聊天应用,包含简单的服务器端,现在正式开源给小伙伴们。感兴趣的同学可以一起搞一下哦,详细介绍请往下看。

猿匹配_logo_副本.png


  上代码
服务器:VMServer
客户端:VMMatch
 
 #VMMatch
猿匹配 —— 国内首个程序猿非严肃婚恋交友应用,让我们一言不合就来场匹配吧
 
#介绍#
首先说下中文名:为什么叫这个名字呢,因为这是一个程序猿(媛)之间匹配交流的应用啊其实这是一个使用环信 IM 开发的一款开源聊天项目,涵盖了时下流行的一些聊天元素,同时已将 IM 功能封装为单独库,可以直接引用,方便使用
项目还处在初期阶段,还有许多功能需要实现,有兴趣的可以一起来
项目资源均来自于互联网,如果有侵权请联系我
 
 #下载体验
猿匹配 小米商店 审核中
猿匹配 Google Play
 
  #项目截图

1.png

2.png

3.png

4.png

5.png

6.png

  
 #开发环境
项目基本属于在最新的Android开发环境下开发,使用Java8的一些新特性,比如Lambda表达式,
然后项目已经适配Android6.x以上的动态权限适配,以及7.x的文件选择,和8.x的通知提醒等;
· Mac OS 10.14.4
· Android Studio 3.3.2
  #项目模块儿
本项目包含两部分:
一部分是项目主模块app,这部分主要包含了项目的业务逻辑,比如匹配、信息修改、设置等
另一部分是封装成library的vmim,这是为了方便大家引用到自己的项目中做的一步封装,不用再去复杂的复制代码和资源等,
只需要将vmim以module导入到自己的项目中就行了,具体使用方式参见项目app模块儿;
 
  #功能与 TODO
IM部分功能
· [x] 链接监听
· [x] 登录注册
· [x] 会话功能
      。[x] 置顶
      。[x] 标为未读
      。[x] 删除与清空
      。[x] 草稿功能
· [x] 消息功能
      。[x] 下拉加载更多
      。[x] 消息复制(仅文字类消息)
      。[x] 消息删除
      。[x] 文本+Emoji消息收发
      。[x] 大表情消息收发
      。[x] 图片消息
        ~[x] 查看大图
        ~[ ] 保存图片
      。[x] 语音消息
        ~[x] 语音录制
        ~[x] 语音播放(可暂停,波形待优化)
        ~[x] 听筒和扬声器播放切换
      。[x] 语音实时通话功能
      。[x] 视频实时通话功能
      。[x] 通话过程中的娱乐消息收发
        ~[x] 骰子
        ~[x] 石头剪刀布
        ~[x] 大表情
      。[x] 昵称头像处理(通过回调实现)
App部分功能
· [x] 登录注册(包括业务逻辑和 IM 逻辑)
· [x] 匹配
      。[x] 提交匹配信息
      。[x] 拉取匹配信息
· [x] 聊天(这里直接加载 IM 模块儿)
· [x] 我的
      。[x] 个人信息展示
      。[x] 上传头像
      。[x] 设置昵称
      。[x] 设置签名
· [x] 设置
      。[x] 个人信息设置
      。[x] 通知提醒
      。[x] 聊天
      。[ ] 隐私(随业务部分一起完善)
      。[ ] 通用(随业务部分一起完善)
      。[ ] 帮助反馈(随业务部分一起完善)
      。[x] 关于
      。[x] 退出
· [ ] 社区
      。[ ] 发布
      。[ ] 评论
      。[ ] 收藏
      。[ ] 关注
发布功能
· [x] 多渠道打包
· [x] 签名配置
· [x] 开发与线上环境配置
· [x] 敏感信息保护
 
  #配置运行
1.首先复制config.default.gradle到config.gradle
2.配置下config.gradle环信appkey以及bugly统计Id
3.正式打包需要配置下签名信息,同时将签名文件放置在项目根目录
 
  #参与贡献
如果你有什么好的想法,或者好的实现,可以通过下边的步骤参与进来,让我们一起把这个项目做得更好,欢迎参与
1.Fork本仓库
2.新建feature_xxx分支 (单独创建一个实现你自己想法的分支)
3.提交代码
4.新建Pull Request
5.等待我们的Review & Merge
 
 #关联项目
服务器端由nodejs实现,地址见这里 VMServer
 
  #VMServer
是为Android开源项目VMMatch项目(中文名猿匹配)实现的服务端
 
  #简介
这个项目包含两部分
· 根目录:服务逻辑及API接口实现
· client目录:前端界面,和服务器端代码端放置在同一仓库下(暂未实现)
 
 #使用
简单介绍下运行环境及部署方法
1.安装nodejs开发时使用的是v10.16.0版本
2.需要安装mongodb并启动,开发使用版本4.0.10
3.下载项目到服务器,可以下载压缩包,或者用git clone命令
4.复制config_default.js到config.js,可根据自己需要修改配置文件
5.安装依赖
npm install

6.全局安装pm2
npm install pm2 -g
 
7.运行 vmshell.sh
 
环信冬冬_副本.jpg

扫码备注【开源项目】邀你加入环信开源社群
 
转载自https://blog.melove.net/develop-open-source-im-match-and-server/ 
 
4
评论

在微信小程序里实现聊天室 聊天室 小程序

Tolazy 发表了文章 • 44496 次浏览 • 2019-04-19 17:49 • 来自相关话题

第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
下载环信 小程序demo+sdkgit clone https://github.com/easemob/webim-weixin-xcx创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明



集成
登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改


在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用


修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室


然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉然后在roomlist.wxml 修改对应的 变量绑定名称





demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面


Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了





就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx 查看全部
第一次搞小程序,老板让我实现一个聊天室功能,压力山大啊。
花了几天时间研究比较了一下方案,最后基于环信的小程序SDK 开发了一个聊天室。
 
准备工作
  1. 下载环信 小程序demo+sdk
    git clone https://github.com/easemob/webim-weixin-xcx
  2. 创建一个文件夹,将 demo 中的文件 comps、images、sdk、utils 拷贝到新的文件,文件目录说明
    ml.png

集成
  1. 登录环信没什么可说的,这里选择的是使用 username/password 登录,和demo中的一样,文件没有进行任何更改
    login.png
  2. 在app.js 中注册的 WebIM.conn.listen, 然后在 登陆成功的回调 onOpened 设置的跳转页面,并将登陆的 username 赋给 myName,传到新的页面中使用
    tz.png
  3. 修改 roomlist.js 获取聊天室列表,是分页获取的,这里先偷个懒,获取了第一页 20 个聊天室
    getroom.png
    然后将listChatrooms() 分别在onLoad、onShow 内,更改下,将原有的 listGroups() 替换掉
  4. 然后在roomlist.wxml 修改对应的 变量绑定名称
    listui.png
    list.png
  5. demo中的group.js 中,获取到的是当前登陆账号已加入的群组,咱们做的是聊天室功能,所以需要有一个加入的操作,找roomlist.js 中找到 into_room: function (event),然后填写加入聊天室的方法, 我是直接在当前这个里面加的跳转到聊天页面,并将当前登陆的IDmyName,聊天室IDgroupID,聊天室名称your 传给新页面
    joinrom.png
    Ex:监听是否加入聊天室成功的回调是在 onPresence 中,type:memberJoinChatRoomSuccess,正常是监听这个回调跳转页面,有点麻烦就直接这样吧
  6. 到会话页面后,需要修改一下对应的消息格式,在comps/chat/suit 目录下,将里面的文件对应的 js 文件根据文档给聊天室发送消息 格式进行修改,聊天室消息和群组消息不同,所以我目前是直接将getSendToParam()、isGroupChat() 注释,改成下面这样,demo 中下面还有代码的,这里就用 …… 代替了
    send.png
    chat.png
    就这样了,简单集成聊天室功能,demo中的UI 是开源的,可以根据自己的需求更改~下面是具体实现过程。代码也放在github 上了,有需要的兄弟自取。demo下载地址:https://github.com/lizgDonkey/room-xcx

4
评论

【开源项目】全国首个开源直播小程序源码

beyond 发表了文章 • 188079 次浏览 • 2018-07-20 17:30 • 来自相关话题

今天你看直播了吗?拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 





作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载


小程序直播demo_2018-06-21.zip







直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 




2、导入源码:将附件的源码解压直接导入 







环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]




填写对相关信息进行注册





注册成功后进行登录




注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用




输入应用名称等信息
 





创建成功后点击应用进入





需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量




3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Tokencurl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'返回格式{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址curl -X POST -H "Authorization: Bearer [管理员Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"成功返回格式:{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户





点击注册IM用户





填写用户信息





创建用户的过程同样也可以通过REST API形式进行curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'
注:应用必须为开放注册





将注册的用户添加为主播curl -X POST -H "Authorization: [管理员Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'返回结果示例:{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播





点击新建房间





填写房间信息




创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件





修改appkey为自己应用的appkey





打开pages/live/index.js修改房间默认拉流地址及直播间房间号





四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:curl -X GET -H "Authorization: Bearer [用户Token]" https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]
响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"响应:{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。 查看全部
今天你看直播了吗?
拥有10亿微信生态用户的小程序已经成为了继移动互联后的又一个现象级风口,随着微信小程序对外开放实时音视频录制及播放等更多连接能力,小程序与直播强强联合,在各行各业找到了非常多的玩法,小程序直播相比微信直播和APP直播更加简洁、流畅、低延时、多入口等众多优势迅速向商业直播领域及泛娱乐直播领域蔓延。从小游戏、内容付费、工具、大数据、社交电商创业者到传统品牌商们,都在努力搭上小程序直播这辆快车,以免错过微信生态里新的流量洼地。
 
微信图片_20180725162426.jpg


作为一名环信生态圈资深开发者,本着对技术的热衷,对环信的眷恋和对党的忠诚,基于环信即时通讯云写了“直播购物小程序”,目前项目源码已全部免费开放,希望对有需求的企业和开发者提供一个思路和参考。
直播购物小程序源码github地址:https://github.com/YuTongNetworkTechnology/wechat_live/tree/master 
git打不开可直接点下面链接下载



预览图.jpg

直播购物小程序运行预览图 
 
小程序体验指南(仅需两步):
 
1、下载微信小程序开发工具,下载地址:https://developers.weixin.qq.c ... .html 
 
Catch9A07(07-20-17-38-30).jpg

2、导入源码:将附件的源码解压直接导入 


Catch1C69(07-20-17-38-30).jpg


环信小程序直播技术文档
一、 使用的技术
1、 环信IM直播室。
2、 微信小程序实时音视频播放组件live-player。
3、 推流软件(obs、易推流)等推流。
4、 视频流服务器(UCLOUD、七牛、腾讯)等视频流服务器。
二、 系统使用流程。
1、 视频推流软件将视频流推到流服务器。
2、 打开视频直播demo小程序注册环信账号。
3、 进入软件直播室进行测试。
三、 技术流程及使用的SDk
1、 注册环信账号
打开https://www.easemob.com/ 环信官网,点击右上角注册按钮,选择[注册即时通讯云]
1.png

填写对相关信息进行注册

2.png

注册成功后进行登录
3.png

注:新注册用户需进行账号的认证。
2、 直播应用创建
登录成功点击应用列表选择创建应用
4.png

输入应用名称等信息
 

5.png

创建成功后点击应用进入

6.png

需要注意的是应用的OrgName 和AppName这两个是以后都需要用到的两个参数变量
7.png

3、 直播创建
1)在创建直播之前需要对应用进行设置首先需要设置应用的直播流地址
第一步获取应用管理员的Token
curl -X POST "https://a1.easemob.com/[应用OrgName]/[应用AppName]/token" -d '{"grant_type":"client_credentials","client_id":"[应用client_id]","client_secret":"[应用] client_secret"}'
返回格式
{
"access_token":"YWMtWY779DgJEeS2h9OR7fw4QgAAAUmO4Qukwd9cfJSpkWHiOa7MCSk0MrkVIco",
"expires_in":5184000,
"application":"c03b3e30-046a-11e4-8ed1-5701cdaaa0e4"












第二步设置直播流地址
curl -X POST -H "Authorization: Bearer [管理员Token]"  " https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms/stream_url -d '{"pc_pull":"[pc拉流地址]","pc_push":"[pc推流地址]","mobile_pull":"[手机拉流地址]","mobile_push":"[手机推流地址]"}'"
成功返回格式:
{
"action": "post",
"application": "e1a09de0-0e03-11e7-ad8e-a1d913615409",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"pc_pull": true,
"mobile_push": true,
"mobile_pull": true,
"pc_push": true
},
"timestamp": 1494084474885,
"duration": 1,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












2)创建主播
点击IM用户

8.png

点击注册IM用户

9.png

填写用户信息

10.png

创建用户的过程同样也可以通过REST API形式进行
curl -X POST -i " https://a1.easemob.com/[应用OrgName]/[应用AppName]/users" -d '{"username":"[用户名]","password":"[密码]"}'

注:应用必须为开放注册

11.png

将注册的用户添加为主播
curl -X POST -H "Authorization: [管理员Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/super_admin -d'{"superadmin":"[IM用户名]"}'
返回结果示例:
{
"action": "post",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"result": "success"
},
"timestamp": 1496236798886,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui"
}












3)创建直播
点击直播

12.png

点击新建房间

13.png

填写房间信息
14.png

创建房间同时也可以使用REST API形式进行详情可以查看http://docs.easemob.com/im/live/server-integration环信官方文档。
4、 小程序demo集成使用
小程序直播购物demo集成官方WebIM SDK详情请查看https://github.com/easemob/webim-weixin-xcx
Demo具体配置如下
打开demo 下sdk配置文件

15.png

修改appkey为自己应用的appkey

16.png

打开pages/live/index.js修改房间默认拉流地址及直播间房间号

17.png

四、 扩展说明
Demo中房间为固定测试房间,实际使用中应获取环信直播的房间信息及房间列表。具体如下:
获取直播间列表:
curl -X GET -H "Authorization: Bearer  [用户Token]"  https://a1.easemob.com/[应用OrgName]/[应用AppName]/liverooms?ongoing=true&limit=[获取数量]&cursor=[游标地址(不填写为充开始查询)]

响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"params": {
"cursor": [
"ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6MzE"
],
"ongoing": [
"true"
],
"limit": [
"2"
]
},
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": [
{
"id": "1924",
"chatroom_id": "17177265635330",
"title": "具体了",
"desc": "就咯",
"startTime": 1495779917352,
"endTime": 1495779917352,
"anchor": "wuls",
"gift_count": 0,
"praise_count": 0,
"current_user_count": 8,
"max_user_count": 9,
"status": "ongoing",
"cover_picture_url": "",
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1924_1"
},
{
"id": "1922",
"chatroom_id": "17175003856897",
"title": "香山",
"desc": "随便",
"startTime": 1495777760957,
"endTime": 1495777760957,
"anchor": "sx001",
"gift_count": 0,
"praise_count": 8,
"current_user_count": 1,
"max_user_count": 3,
"status": "ongoing",
"cover_picture_url": "http://127.0.0.1:8080/easemob- ... ot%3B,
"pc_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"pc_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_pull_url": "rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1",
"mobile_push_url": "rtmp://publish3.cdn.ucloud.com.cn/ucloud/easemob-demo_chatdemoui_1922_1"
}
],
"timestamp": 1496303336669,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"cursor": "ZGNiMjRmNGY1YjczYjlhYTNkYjk1MDY2YmEyNzFmODQ6aW06Y2hhdHJvb206ZWFzZW1vYi1kZW1vI2NoYXRkZW1vdWk6NDk",
"count": 2
}












获取直播间详情:
curl -X GET -H "Authorization: Bearer [用户Token]" " https://a1.easemob.com/[应用OrgName]/[应用AppName]/[房间id]/status"
响应:
{
"action": "get",
"application": "4d7e4ba0-dc4a-11e3-90d5-e1ffbaacdaf5",
"uri": "http://127.0.0.1:8080/easemob- ... ot%3B,
"entities": [ ],
"data": {
"liveRoomID": "1946",
"status": "ongoing"
},
"timestamp": 1496234759930,
"duration": 0,
"organization": "easemob-demo",
"applicationName": "chatdemoui",
"count": 0
}














 
使用环信直播购物小程序遇到任何问题欢迎跟帖讨论。
19
评论

【新手快速入门】集成环信常见问题+解决方案汇总

dujiepeng 发表了文章 • 26622 次浏览 • 2017-05-22 15:51 • 来自相关话题

   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇
APNs证书创建和上传到环信后台头像昵称的简述和处理方案音视频离线推送Demo实现环信服务器聊天记录保存多久?离线收不到好友请求IOS中环信聊天窗口如何实现文件发送和预览的功能ios集成常见问题环信推送的一些常见问题实现名片|红包|话题聊天室等自定义cell
 
Android篇
Android sdk 的两种导入方式环信3.0SDK集成小米推送教程EaseUI库中V4、v7包冲突解决方案Android EaseUI里的百度地图替换为高德地图android扩展消息(名片集成)关于会话列表的置顶聊天java.lang.UnsatisfiedLinkError: 的问题android 端 app 后台被杀死收不到消息的解决方案
昵称头像篇
android中如何显示开发者服务器上的昵称和头像 Android中显示头像(接上一篇文章看)环信(Android)设置头像和昵称的方法(最简单暴力的基于环信demo的集成)IOS中如何显示开发者服务器上的昵称和头像【环信公开课第12期视频回放】-所有关于环信IM昵称头像的问题听这课就够了
 
直播篇
一言不合你就搞个直播APP
 
客服集成
IM-SDK和客服SDK并存开发指南—Android篇IM-SDK和客服SDK并存开发指南—iOS篇
 
开源项目
Android简版demoios简版demo凡信2.0:超仿微信的开源项目 凡信3.0:携直播和红包而来高仿微信:Github 3,515 Star方圆十里:环信编程大赛冠军项目泛聊:定一个小目标写一个QQSlack聊天机器人:一天时间做一个聊天机器人TV视频通话:在电视上视频通话视频通话:Android手机视频通话酷信:ios高仿微信公众号助手:与订阅用户聊天沟通
 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
  查看全部
   这里整理了集成环信的常见问题和一些功能的实现思路,希望能帮助到大家。感谢热心的开发者贡献,大家在观看过程中有不明白的地方欢迎直接跟帖咨询。
 
ios篇

 
Android篇

昵称头像篇

 
直播篇
  1. 一言不合你就搞个直播APP

 
客服集成
  1. IM-SDK和客服SDK并存开发指南—Android篇
  2. IM-SDK和客服SDK并存开发指南—iOS篇

 
开源项目

 
持续更新ing...小伙伴们还有什么想知道欢迎跟帖提出。
 
0
评论

客服云 修改语言 客服云修改语言

coinci 发表了文章 • 600 次浏览 • 2019-10-17 10:39 • 来自相关话题

*****修改客服系统语言********
  客服系统切换语言(支持中英文切换)

1.登录的时候
浏览器打开 https://kefu.easemob.com/
界面右上角可以切换语言





2.如果是已登录状态,切换到客服模式
客服模式--客服信息 语言一栏可以切换,最后需点击右下角保存




*********************************************************************
************网页集成切换到英文**************
webim 后面添加/en-US/





切换后界面如下




  查看全部
*****修改客服系统语言********
  客服系统切换语言(支持中英文切换)

1.登录的时候
浏览器打开 https://kefu.easemob.com/
界面右上角可以切换语言
27-1修改语言.png


2.如果是已登录状态,切换到客服模式
客服模式--客服信息 语言一栏可以切换,最后需点击右下角保存
27-2修改语言.png

*********************************************************************
************网页集成切换到英文**************
webim 后面添加/en-US/
27-3修改语言.png


切换后界面如下
27-4修改语言.png