4
评论

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

beyond 发表了文章 • 8647 次浏览 • 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 发表了文章 • 19152 次浏览 • 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...小伙伴们还有什么想知道欢迎跟帖提出。
 
12
回复

收集基于环信SDK开发的开源项目 开源项目

xiaoyan2015 回复了问题 • 13 人关注 • 12595 次浏览 • 2019-01-14 10:04 • 来自相关话题

0
回复

web服务端如何开通消息撤回功能 消息撤回

回复

十一 发起了问题 • 1 人关注 • 40 次浏览 • 2019-01-20 18:50 • 来自相关话题

0
评论

最近开发的即时通讯软件,有ios和安卓和web端 IM即时通讯聊天软件 即时通讯

yxy2014 发表了文章 • 67 次浏览 • 2019-01-16 14:09 • 来自相关话题

支持群聊,单聊,发送语音,红包等功能
以及强大的群组功能
https://fir.im/Aichat
有不足之处还请多多指教,欢迎加我qq咨询,244451417 查看全部

hongbao4.png


iphone-slide-1.png


iphone-slide-2.png


iphone-slide-4.png


iphone-slide-6.png


iphone-slide-7.png


iphone-slide-8.png

支持群聊,单聊,发送语音,红包等功能
以及强大的群组功能
https://fir.im/Aichat
有不足之处还请多多指教,欢迎加我qq咨询,244451417
0
回复

音视频会议不可用 环信_Android

回复

张耀 发起了问题 • 1 人关注 • 114 次浏览 • 2019-01-15 16:46 • 来自相关话题

0
回复

web IM 聊天记录怎么获取?就前端能行吗?还是需要后台配合? 环信_WebIM

回复

limin24kobe 发起了问题 • 1 人关注 • 128 次浏览 • 2019-01-15 11:37 • 来自相关话题

0
回复

webrtc macbook端可以听到自己讲话的回声,如何关闭麦克风监听? webrtc 回音 回声 麦克 监听

回复

lidav 发起了问题 • 1 人关注 • 197 次浏览 • 2019-01-11 15:11 • 来自相关话题

0
回复

ios微信端如何调用录音功能? 环信_WebIM

回复

Knight丶殇 发起了问题 • 1 人关注 • 171 次浏览 • 2019-01-11 14:25 • 来自相关话题

0
回复

android端发不出消息 环信_Android

回复

世界和平 发起了问题 • 1 人关注 • 170 次浏览 • 2019-01-10 15:35 • 来自相关话题

0
回复

小米8集成easeui发送图片崩溃 小米8集成easeui发送图片崩溃

回复

deng59215908 发起了问题 • 1 人关注 • 187 次浏览 • 2019-01-10 15:24 • 来自相关话题

0
回复

聊天室人多,实时消息回调延迟怎么解决 有专职工程师值守 实时消息回调

回复

十一 发起了问题 • 1 人关注 • 206 次浏览 • 2019-01-09 19:39 • 来自相关话题

0
评论

在线充值成功后,如何开发票? 环信商务问题

she 发表了文章 • 95 次浏览 • 2019-01-09 15:50 • 来自相关话题

如您已经在线支付成功,请您联系400-612-1986或者点击页面 http://www.easemob.com/ 右侧的商务咨询申请发票,仅限增值税普通发票(温馨提示:400和商务咨询申请只支持增值税普通发票,不能申请增值税专用发票,增值税专用发票请联系您的商务经理开通)。在线支付成功后(包含新购、增购、续费),可以在90天内提交申请开具增值税普通发票。自助申请发票统一由财务受理后,将于20个工作日左右寄出,邮寄方式:普通快递-优速快递 查看全部
如您已经在线支付成功,请您联系400-612-1986或者点击页面 http://www.easemob.com/ 右侧的商务咨询申请发票,仅限增值税普通发票(温馨提示:400和商务咨询申请只支持增值税普通发票,不能申请增值税专用发票,增值税专用发票请联系您的商务经理开通)。在线支付成功后(包含新购、增购、续费),可以在90天内提交申请开具增值税普通发票。自助申请发票统一由财务受理后,将于20个工作日左右寄出,邮寄方式:普通快递-优速快递
0
回复

用户接收到邀请加入会议失败 环信_Android

回复

醉归 发起了问题 • 1 人关注 • 229 次浏览 • 2019-01-04 15:08 • 来自相关话题

0
回复

求助:iOS messagesDidRead收不到 环信_iOS

回复

冰琳城下 发起了问题 • 1 人关注 • 226 次浏览 • 2019-01-03 21:57 • 来自相关话题

0
回复

求助,环信即时云通讯在华为mate20报java.lang.RuntimeException的错误。 环信_Android

回复

¬Smile 发起了问题 • 1 人关注 • 305 次浏览 • 2019-01-03 18:13 • 来自相关话题

0
回复

怎么获取技能组? 环信_iOS

回复

2016 发起了问题 • 1 人关注 • 247 次浏览 • 2019-01-02 14:41 • 来自相关话题

0
评论

h5仿微信语音聊天|仿微信摇一摇|地图定位|数字支付键盘 仿微信地图定位 仿微信摇一摇 h5仿微信语音 h5仿微信聊天

xiaoyan2015 发表了文章 • 256 次浏览 • 2018-12-23 13:48 • 来自相关话题

基于html5+css3+wcPop+swiper+zepto+weScroll等技术实现的高仿微信界面|仿微信语音聊天效果|仿微信摇一摇加好友|仿微信支付键盘。摇一摇模块则是使用了shake.js插件实现功能效果的,语音模块效果和微信语音效果非常类似,按住说话,手指上滑、取消发送。
https://blog.csdn.net/yanxinyun1990/article/details/85221037


























































































 
// >>> 【摇一摇加好友核心模块】------------------------------------------
// 摇一摇加好友弹窗
$("#J__popScreen_shake").on("click", function () {
var shakePopIdx = wcPop({
id: 'wcim_shake_fullscreen',
skin: 'fullscreen',
title: '摇一摇',
content: $("#J__popupTmpl-shakeFriends").html(),
position: 'right',
xclose: true,
style: 'background: #303030;',
show: function(){
// 摇一摇功能
var _shake = new Shake({threshold: 15});
_shake.start();
window.addEventListener("shake", function(){
window.navigator.vibrate && navigator.vibrate(500);
// console.log("触发摇一摇!");

$(".J__shakeInfoBox").html("");
$(".J__shakeLoading").fadeIn(300);
// 消息模板
var shakeTpl = [
'<div class="shake-info flexbox flex-alignc">\
<img class="uimg" src="img/uimg/u__chat-img08.jpg" />\
<div class="flex1">\
<h2 class="name">大幂幂<i class="iconfont icon-nv c-f37e7d"></i></h2>\
<label class="lbl clamp1">开森每一刻,每天都要美美哒!</label>\
</div>\
</div>'
].join("");
setTimeout(function(){
$(".J__shakeLoading").fadeOut(300);
$(".J__shakeInfoBox").html(shakeTpl);
}, 1500);
}, false);
}
});
});
// 切换摇一摇项目
$("body").on("click", ".J__swtShakeItem a", function(){
$(this).addClass("active").siblings().removeClass("active");
});
// 摇一摇设置
$("body").on("click", ".J__shakeSetting", function(){
wcPop({
skin: 'actionsheetMini',
anim: 'footer',
btns: [
{ text: '<div class="flexbox flex-alignc"><span class="flex1">是否开启震动</span> <span class="rpr-30"><input class="cp__checkboxPX-switch" type="checkbox" checked /></span></div>' },
{ text: '摇到的历史' },
]
});
});// ripple波纹效果
wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });
wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });

// 禁止长按弹出系统菜单
$("body").on("contextmenu", ".weChatIM__panel", function (e) {
e.preventDefault();
});

// 顶部 “+” 菜单
$("#J__topbarAdd").on("click", function(e){
var _points = [e.clientX, e.clientY];
var contextMenuIdx = wcPop({
skin: 'contextmenu', shade: true,shadeClose: true,opacity: 0,follow: _points,
style: 'background:#3d3f4e; min-width:3.5rem;',
btns: [
{text: '<i class="iconfont icon-haoyou fs-40 mr-10"></i><span>添加好友</span>',style: 'color:#fff;', onTap(){
wcPop.close(contextMenuIdx);
// 添加好友
var addfriendIdx = wcPop({
id: 'wcim_fullscreen',
skin: 'fullscreen',
title: '添加好友',
content: $("#J__popupTmpl-addFriends").html(),
position: 'right',
opacity: .1,
xclose: true,
style: 'background: #f2f1f6;'
});
}},
{text: '<i class="iconfont icon-qunliao fs-40 mr-10"></i><span>发起群聊</span>',style: 'color:#fff;', onTap(){
wcPop.close(contextMenuIdx);
// 发起群聊
var addfriendIdx = wcPop({
id: 'wcim_fullscreen',
skin: 'fullscreen',
title: '发起群聊',
content: $("#J__popupTmpl-launchGroupChat").html(),
position: 'right',
opacity: .1,
xclose: true,
style: 'background: #f2f1f6;'
});
}},
{text: '<i class="iconfont icon-bangzhu fs-40 mr-10"></i><span>帮助与反馈</span>',style: 'color:#fff;',}
]
});
});// ...获取语音时长
getVoiceTime();
function getVoiceTime(){
$("#J__chatMsgList li .audio").each(function () {
var that = $(this), audio = that.find("audio")[0], duration;
audio.load();
audio.oncanplay = function(){
duration = Math.ceil(audio.duration);
if (duration == 'Infinity') {
getVoiceTime();
} else {
that.find(".time").text(duration + `''`);
that.attr("data-time", duration);
// 语音宽度%
var percent = (duration / 60).toFixed(2) * 100 + 20 + '%';
that.css("width", percent);
}
}
});
}




欢迎大家一起交流、学习  Q:282310962  wx:xy190310
  查看全部
基于html5+css3+wcPop+swiper+zepto+weScroll等技术实现的高仿微信界面|仿微信语音聊天效果|仿微信摇一摇加好友|仿微信支付键盘。摇一摇模块则是使用了shake.js插件实现功能效果的,语音模块效果和微信语音效果非常类似,按住说话,手指上滑、取消发送。
https://blog.csdn.net/yanxinyun1990/article/details/85221037

022360截图20181221095816291.png


023360截图20181221095950859.png


025360截图20181221100205642.png


026360截图20181221100230225.png


002360截图20181221094619690.png


003360截图20181221094702001.png


004360截图20181221094720201.png


007360截图20181221095016435.png


009360截图20181221095104377.png


010360截图20181221095121562.png


011360截图20181221095141122.png


014360截图20181221095243962.png


016360截图20181221095501306.png


017360截图20181221095514866.png


020360截图20181221095719913.png


021360截图20181221095816291.png


027360截图20181221095719913.png


028360截图20181221100336473.png

 
// >>> 【摇一摇加好友核心模块】------------------------------------------
// 摇一摇加好友弹窗
$("#J__popScreen_shake").on("click", function () {
var shakePopIdx = wcPop({
id: 'wcim_shake_fullscreen',
skin: 'fullscreen',
title: '摇一摇',
content: $("#J__popupTmpl-shakeFriends").html(),
position: 'right',
xclose: true,
style: 'background: #303030;',
show: function(){
// 摇一摇功能
var _shake = new Shake({threshold: 15});
_shake.start();
window.addEventListener("shake", function(){
window.navigator.vibrate && navigator.vibrate(500);
// console.log("触发摇一摇!");

$(".J__shakeInfoBox").html("");
$(".J__shakeLoading").fadeIn(300);
// 消息模板
var shakeTpl = [
'<div class="shake-info flexbox flex-alignc">\
<img class="uimg" src="img/uimg/u__chat-img08.jpg" />\
<div class="flex1">\
<h2 class="name">大幂幂<i class="iconfont icon-nv c-f37e7d"></i></h2>\
<label class="lbl clamp1">开森每一刻,每天都要美美哒!</label>\
</div>\
</div>'
].join("");
setTimeout(function(){
$(".J__shakeLoading").fadeOut(300);
$(".J__shakeInfoBox").html(shakeTpl);
}, 1500);
}, false);
}
});
});
// 切换摇一摇项目
$("body").on("click", ".J__swtShakeItem a", function(){
$(this).addClass("active").siblings().removeClass("active");
});
// 摇一摇设置
$("body").on("click", ".J__shakeSetting", function(){
wcPop({
skin: 'actionsheetMini',
anim: 'footer',
btns: [
{ text: '<div class="flexbox flex-alignc"><span class="flex1">是否开启震动</span> <span class="rpr-30"><input class="cp__checkboxPX-switch" type="checkbox" checked /></span></div>' },
{ text: '摇到的历史' },
]
});
});
// ripple波纹效果
wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });
wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });

// 禁止长按弹出系统菜单
$("body").on("contextmenu", ".weChatIM__panel", function (e) {
e.preventDefault();
});

// 顶部 “+” 菜单
$("#J__topbarAdd").on("click", function(e){
var _points = [e.clientX, e.clientY];
var contextMenuIdx = wcPop({
skin: 'contextmenu', shade: true,shadeClose: true,opacity: 0,follow: _points,
style: 'background:#3d3f4e; min-width:3.5rem;',
btns: [
{text: '<i class="iconfont icon-haoyou fs-40 mr-10"></i><span>添加好友</span>',style: 'color:#fff;', onTap(){
wcPop.close(contextMenuIdx);
// 添加好友
var addfriendIdx = wcPop({
id: 'wcim_fullscreen',
skin: 'fullscreen',
title: '添加好友',
content: $("#J__popupTmpl-addFriends").html(),
position: 'right',
opacity: .1,
xclose: true,
style: 'background: #f2f1f6;'
});
}},
{text: '<i class="iconfont icon-qunliao fs-40 mr-10"></i><span>发起群聊</span>',style: 'color:#fff;', onTap(){
wcPop.close(contextMenuIdx);
// 发起群聊
var addfriendIdx = wcPop({
id: 'wcim_fullscreen',
skin: 'fullscreen',
title: '发起群聊',
content: $("#J__popupTmpl-launchGroupChat").html(),
position: 'right',
opacity: .1,
xclose: true,
style: 'background: #f2f1f6;'
});
}},
{text: '<i class="iconfont icon-bangzhu fs-40 mr-10"></i><span>帮助与反馈</span>',style: 'color:#fff;',}
]
});
});
// ...获取语音时长
getVoiceTime();
function getVoiceTime(){
$("#J__chatMsgList li .audio").each(function () {
var that = $(this), audio = that.find("audio")[0], duration;
audio.load();
audio.oncanplay = function(){
duration = Math.ceil(audio.duration);
if (duration == 'Infinity') {
getVoiceTime();
} else {
that.find(".time").text(duration + `''`);
that.attr("data-time", duration);
// 语音宽度%
var percent = (duration / 60).toFixed(2) * 100 + 20 + '%';
that.css("width", percent);
}
}
});
}

20180817002157557.jpg

欢迎大家一起交流、学习  Q:282310962  wx:xy190310
 
0
回复

集成easeui报错 集成EaseUI 有问题

回复

deng59215908 发起了问题 • 1 人关注 • 343 次浏览 • 2018-12-21 14:59 • 来自相关话题

0
回复

聊天记录文件打不开 聊天记录

回复

lai25258 发起了问题 • 1 人关注 • 434 次浏览 • 2018-12-21 11:18 • 来自相关话题

0
回复

运营级一比一仿微信含直播小视频app源码出售转让 源码 C++

回复

vgybhu 发起了问题 • 1 人关注 • 443 次浏览 • 2018-12-20 11:40 • 来自相关话题

0
回复

asp.net快速开发框架--learun工作流通用组件设计规范 快速开发平台

回复

涵涵有小虎牙 发起了问题 • 1 人关注 • 492 次浏览 • 2018-12-14 17:10 • 来自相关话题

0
评论

微信小程序弹窗插件wcPop实例开发|自定义弹窗组件 微信小程序弹窗 小程序自定义model 小程序弹窗插件 小程序自定义对话框

xiaoyan2015 发表了文章 • 331 次浏览 • 2018-12-11 00:03 • 来自相关话题

微信小程序自定义showModel模态弹窗|alert警告弹窗|toast自定义图标弹窗
微信小程序自定义弹窗插件实战——wcPop组件,之前就想写一个小程序自定义弹窗插件扩展,但是由于时间的关系,一直真正进行开发。好吧,反正最近这段时间稍微比较清闲,趁着这个机会,就学习了下微信插件开发。
https://blog.csdn.net/yanxinyun1990











































































  查看全部
微信小程序自定义showModel模态弹窗|alert警告弹窗|toast自定义图标弹窗
微信小程序自定义弹窗插件实战——wcPop组件,之前就想写一个小程序自定义弹窗插件扩展,但是由于时间的关系,一直真正进行开发。好吧,反正最近这段时间稍微比较清闲,趁着这个机会,就学习了下微信插件开发。
https://blog.csdn.net/yanxinyun1990

360截图20181208133703698.png


001360截图20181117110044432.png


002360截图20181117110217296.png


003360截图20181117110249704.png


004360截图20181117110334240.png


005360截图20181117110613448.png


006360截图20181117110931312.png


007360截图20181117111007440.png


008360截图20181117111809104.png


011360截图20181117111916481.png


012360截图20181117112123619.png


014360截图20181117112238337.png


016360截图20181117112359769.png


017360截图20181117112517601.png


018360截图20181117112734640.png

 
0
评论

h5直播webapp项目|html5直播案例|h5直播模板 h5直播互动 h5小视频 h5聊天 h5视频直播

xiaoyan2015 发表了文章 • 415 次浏览 • 2018-12-10 23:57 • 来自相关话题

html5微直播聊天项目实例|weLiveShow直播h5|移动端h5直播|html5直播模板
最近试着利用html5技术开发了下直播项目,使用到了h5+css3+iscroll+zepot+swiper+wlsPop等技术混合模式开发,实现了群友互动聊天、新消息提醒、礼物动效展示,打赏主播、发红包、送礼物……
https://blog.csdn.net/yanxinyun1990


























































































 
 
  查看全部

html5微直播聊天项目实例|weLiveShow直播h5|移动端h5直播|html5直播模板


最近试着利用html5技术开发了下直播项目,使用到了h5+css3+iscroll+zepot+swiper+wlsPop等技术混合模式开发,实现了群友互动聊天、新消息提醒、礼物动效展示,打赏主播、发红包、送礼物……
https://blog.csdn.net/yanxinyun1990

001-360截图20181104094234436.png


003-360截图20181104094234436.png


004-360截图20181104095737443.png


005-360截图20181104095812016.png


006-360截图20181104100100390.png


007-360截图20181104100415889.png


009-360截图20181104100729956.png


009-360截图20181104100729956.png


011-360截图20181104100933641.png


013-360截图20181104102314202.png


014-360截图20181104102337969.png


015-360截图20181104102515553.png


015-360截图20181104102733534.png


017-360截图20181104102933051.png


018-360截图20181104103147258.png


019-360截图20181104103243870.png


020-360截图20181104103341497.png


20180817002157557.jpg

 
 
 
0
回复

请问环信的技术人员 移动端mui框架,app后台运行,使用addEventListener监听消息异常 有专职工程师值守

回复

白色 发起了问题 • 1 人关注 • 685 次浏览 • 2018-12-10 18:17 • 来自相关话题

0
评论

十六位互联网大咖,齐邀你共赴七麦【NextWorld2018】增长盛宴! 活动推荐 NextWorld 2018新原力增长峰会 七麦科技

beyond 发表了文章 • 219 次浏览 • 2018-12-06 11:24 • 来自相关话题

今年的 12 月 12 日,不仅有阿里的“双十二”购物日,还有一场属于你的互联网年末盛宴。

12 月 12 日 9:00 — 17:00。

北京 · 四季酒店 · 五层宴会厅。(朝阳区亮马桥路 48 号)

十六位互联网行业大咖,齐聚【NextWorld2018 新原力增长】峰会,邀你一起深度解锁用户增长新姿势!





最具价值峰会,齐聚大咖风采
 
清科集团联席总裁【袁润兵】,为你解读互联网资本浪潮下的新趋势。
 
数看全球:国内市场流量红利消失,全球市场近况如何?
 
AppsFlyer 大中华地区商务副总裁【徐宇】,带你揭秘全球移动应用市场现状和出海新机会。
 
OneSight CEO【李蕾】,解析出海营销新技术,助力移动产品新增长。
 
UMKA 俄罗斯电商平台中国区副总裁【Sofia Zhang】,分享如何实现用户本地化爆发式增长的宝贵经验。
 
游艺道副总裁【孙可】,评说出海新红利,快速崛起的跨境手游。
 
聚焦增长:产品增长乏力,如何为产品赋能,实现高速增长?
 
樊登读书会副总裁【孙向利】,分享关于知识付费时代,如何激发用户自传播力,助力产品增长。
 
十点读书 CTO【张峡】,解读十点读书如何通过矩阵式布局,一年涨粉上千万。
 
社群裂变:获客成本日益升高,产品如何通过裂变,零成本精准获客?
 
知乎商业市场经理【陈欣】,为你解析内容创意如何引爆产品病毒式增长。





创业家副总裁【易涛】,分享黑马营如何通过社群营销打造市值 50 亿的“创业基地”。




产业互联网:传统行业如何借力互联网实现新增长?
 
连咖啡合伙人【张洪基】,和你聊聊连咖啡的社交营销新模式。




Plum 平台创始人兼 CEO【徐薇】,解析 Plum 如何实现二手时尚平台交易量的几十倍增长。
 
 
拉勾招聘联合创始人&CMO【鲍艾乐】,带来拉勾年度大数据,俯瞰“增长er”的生存地图。




以为这就完事了?错!惊喜还远未结束!
 
新产品!

2018 年最值得期待的 App 出海推广平台全新重磅发布!七麦技术团队历时两年诚意巨献,让你出海有术!
 
加人脉!
 
峰会到场数十位移动互联网意见领袖,1000+ 精英创业、推广从业者到场,覆盖推广、营销、运营多领域从业人员,互联网最牛的人等你来撩~ 资源、人脉无压力!
 
有福利!
 
现场设“2018年度推广增长大礼包”,有料有趣高价值!
 
扫描下图二维码,马上报名参加吧!
 
 
和七麦一起,共赴年末增长盛宴!




 
 NextWorld 2018新原力增长峰会了解详情 查看全部
今年的 12 月 12 日,不仅有阿里的“双十二”购物日,还有一场属于你的互联网年末盛宴。

12 月 12 日 9:00 — 17:00。

北京 · 四季酒店 · 五层宴会厅。(朝阳区亮马桥路 48 号)

十六位互联网行业大咖,齐聚【NextWorld2018 新原力增长】峰会,邀你一起深度解锁用户增长新姿势!

微信图片_20181206111909.jpg

最具价值峰会,齐聚大咖风采
 
清科集团联席总裁【袁润兵】,为你解读互联网资本浪潮下的新趋势。
 
数看全球:国内市场流量红利消失,全球市场近况如何?
 
AppsFlyer 大中华地区商务副总裁【徐宇】,带你揭秘全球移动应用市场现状和出海新机会。
 
OneSight CEO【李蕾】,解析出海营销新技术,助力移动产品新增长。
 
UMKA 俄罗斯电商平台中国区副总裁【Sofia Zhang】,分享如何实现用户本地化爆发式增长的宝贵经验。
 
游艺道副总裁【孙可】,评说出海新红利,快速崛起的跨境手游。
 
聚焦增长:产品增长乏力,如何为产品赋能,实现高速增长?
 
樊登读书会副总裁【孙向利】,分享关于知识付费时代,如何激发用户自传播力,助力产品增长。
 
十点读书 CTO【张峡】,解读十点读书如何通过矩阵式布局,一年涨粉上千万。
 
社群裂变:获客成本日益升高,产品如何通过裂变,零成本精准获客?
 
知乎商业市场经理【陈欣】,为你解析内容创意如何引爆产品病毒式增长。

微信图片_20181206112024.jpg

创业家副总裁【易涛】,分享黑马营如何通过社群营销打造市值 50 亿的“创业基地”。
微信图片_20181206112224.jpg

产业互联网:传统行业如何借力互联网实现新增长?
 
连咖啡合伙人【张洪基】,和你聊聊连咖啡的社交营销新模式。
微信图片_20181206112245.jpg

Plum 平台创始人兼 CEO【徐薇】,解析 Plum 如何实现二手时尚平台交易量的几十倍增长。
 
 
拉勾招聘联合创始人&CMO【鲍艾乐】,带来拉勾年度大数据,俯瞰“增长er”的生存地图。
微信图片_20181206112311.jpg

以为这就完事了?错!惊喜还远未结束!
 
新产品!

2018 年最值得期待的 App 出海推广平台全新重磅发布!七麦技术团队历时两年诚意巨献,让你出海有术!
 
加人脉!
 
峰会到场数十位移动互联网意见领袖,1000+ 精英创业、推广从业者到场,覆盖推广、营销、运营多领域从业人员,互联网最牛的人等你来撩~ 资源、人脉无压力!
 
有福利!
 
现场设“2018年度推广增长大礼包”有料有趣高价值!
 
扫描下图二维码,马上报名参加吧!
 
 
和七麦一起,共赴年末增长盛宴!
微信图片_20181206112334.jpg

 
 NextWorld 2018新原力增长峰会了解详情