专业IM即时通讯软件开发,值得信赖!

漫漫的webim(二) 基于腾讯webIm+cos实现语音,视频,文件,定位等多媒体功能

即时通讯软件开发 云聊IM 47℃

web技术在这几年内迭代很快,技术也越来越成熟,相应的,市面上就有很多App选择用webApp来制作,webApp较与传统原生开发优势有以下几点:

1.开发时间大大缩短,开发人员从2个端(安卓,IOS)减少到一个端(web前端).

2.便于维护:许多变更频繁的页面只需在服务端部署更改即可。

3.开发耗费成本降低。

有优点,相应的缺点也尤其的突出,体验效果差,许多原生App的功能,web端不能实现,或者实现效果达不到商用需求,但是这些问题随着前端的js框架的流行(vue,ng,react),移动端UI库的风靡(ionic),压缩工具的崛起(gulp,webpack),打包工具的流行(cordova,Hbulider),缺点逐步在改善。

这里我们就针对其中的IM解决方案进行进一步探讨:

市面上成熟的IM服务器厂商有,腾讯云通信,环信,融云,野狗云,网易云信等等。这里我用过腾讯云通信和环信,其他几家我就不进行阐述了,有兴趣的可以去他们官网下个demo研究下。

腾讯云的webim方案和环信的webim方案的异同:

同:能发送文本信息,表情信息,自定义信息,允许App自有用户登录

异:环信的webim还能发送语音,视频,文件等多媒体信息,但是环信的云端不存储信息,需要开发者自行存储。

腾讯的webim不能发送语音,视频,文件等多媒体信息,但是可以将用户信息储存他们云端7天,并提供接口,自行导出。

腾讯和环信各有各有优缺点,因为公司的需要,这里就选择了腾讯云通信。那么如何实现那些多媒体功能呢?

解决思路:

腾讯除了能发送文本信息,表情信息外,还能发送自定义文本信息(这里的自定义信息,仅限于文本,还有大小限制),那么我如何给用户发语音,视频,定位呢。因为我们公司的资源都是存储在腾讯的COS对象存储上面的,所以,这里我们也需要将语音,视频,定位等文件传到COS上,然后获取到存放地址,将存放地址,以自定义详细的形式发送出去,并标记类型,在接收端对自定义消息进行解析,然后显示成不同的标签,如audio(语音),video(视频),img(定位)。

实现步骤:

1.实现语音发送:这里我们采用的Hbuiler,里面封装了手机录音和播放功能,此时,我们调用录音功能,将录音生成的文件发送至我们的逻辑功能处理服务器,然后将相对路径返回给App端,之后继续将录音文件上传至COS服务器,App端用COS域名+相对路径获取语音文件。但是这里要注意一点,安卓和IOS录制出来的语音格式是不一样的,而且安卓的amr格式无法在IOS上进行正常的播放,所以我们需要在我们的逻辑功能处理服务器利用FFmpeg将音频文件统一转为MP3格式,实际测试MP3格式IOS和安卓都能正常播放。

2.实现短视频发送:Hbuilder虽然封装了调用视频的接口,但是无法控制拍摄时长,和拍摄质量,我们遂采取安卓和IOS原生代码来实现短视频拍摄,因为之前没接触过安卓和IOS,这里遇到了很多坑,如果需要源码和如何接入App的方案可以私信我,这里我不多提。后面的步骤与语音相同。

3.实现定位功能:这里我们需要先获取App获取位置的权限,然后获取百度地图坐标系的坐标,注意每个地图的坐标系坐标是不一样的,这里是个隐藏的坑,做过地图类似的功能的就会了解的。申请百度地图开放接口,然后在App端生成百度地图,并实现周围功能,地图点击功能,这些功能都很简单,去研读下百度地图的Api就知道了,选中了位置后,如果将这个定位发出去呢? 第一步:记录选中地点的经纬度,第二步,利用canvas的绘图功能,绘制当前地图组件的载体-DIV,然后将绘制出来的图发给逻辑功能处理服务器,得到图片路径,然后将路径和经纬度按自定义消息发送出去。解析步骤与语音相同。

就这样,腾讯的webIM就有了多媒体功能,这里没贴代码,因为每个人的代码风格有差异,而且这里的代码有点多,容易误导,所以就将思路贴了出来,如果有不懂的地方,可以私信我。

效果展示:

喜欢 (0)
聊天软件开发
点击这里给我发消息