简单介绍融云 imkit 包含功能

IM即时通讯dht1212 发表了文章 • 0 个评论 • 253 次浏览 • 2021-01-08 11:13 • 来自相关话题

说明本篇文章简单介绍一下融云 imkit 包含的功能,大家可在阅读之后来对大体内容有一个基础的了解。详细内容还请翻阅 官方文档基本内容融云 imkit 是为了方便开发者快速集成而开发的一套 UI 库,里面主要包含三部分内容:用户信息会话列表会话页面用... ...查看全部

说明

本篇文章简单介绍一下融云 imkit 包含的功能,大家可在阅读之后来对大体内容有一个基础的了解。详细内容还请翻阅 官方文档

基本内容

融云 imkit 是为了方便开发者快速集成而开发的一套 UI 库,里面主要包含三部分内容:

  • 用户信息

  • 会话列表

  • 会话页面

image.png

用户信息

image.png

用户信息是指融云 SDK 提供了一套完整的用户信息的显示与存储机制,里面包含了用户信息、群信息、群名片信息,开发者仅仅需要将自己 App Server 内的用户信息包装成一个融云的特有的用户信息对象,然后传递给对应的接口即可。之后融云 SDK 会自己帮助显示对应用户的用户信息,并存储在本地数据库,方便后续的读取。

大体的显示流程可参考官方的流程图:

image.png

会话列表

image.png

会话列表是融云 SDK 根据消息生成的一个 list

当收到一条新消息并且会话列表没有当前会话的时候,SDK 会自动生成一条新的会话数据,并添加到 tableview 中。

需要注意的是融云的会话列表不会存储在服务器中,只在本地存储。当切换设备时,需要去融云开发者后台开通多设备同步,这样在新设备登录的时候,会触发融云的消息补偿,当移动端接收到消息的时候,会在新设备也生成一个新的会话列表。正常情况就是你设置几天就补偿几天。

支持的功能有:

  • 会话置顶

  • 会话删除

  • 会话免打扰

  • 已读回执显示

  • 有人@显示

会话页面

image.png

融云的会话页面整体可分为两部分

  • 消息展示区

  • 输入框

消息展示

消息展示就是当前用户收发消息展示的地方,和常规 APP 一样,接收在左边,发送在右边。发送方是不显示昵称的,接收方可根据配置来选择是否显示昵称。

SDK 自带的消息展示有

  • 文本消息

  • 语音消息

  • 图片消息

  • GIF 消息

  • 视频消息

  • 位置消息

  • 文件消息

  • 小灰条消息

开发者还能根据自己的需求来自定义其他消息,自定义消息有两种用法:

  1. 发送其他需要展示的消息,对应绑定一套 UI 组件,收到消息后,融云SDK 帮助你把绑定的这套 UI 展示到界面上。

  2. 当做控制消息:控制消息就是你不展示到界面上,但是你可以利用消息机制来做处理,从服务器或者其他地方下发一个指令,收到这个消息后,UI不会发生任何变化。但你可以根据这条消息来处理你的业务操作。比如刷新某个页面,获取某个信息等等

开发者可以继承融云的会话页面,在其子类来进行其他操作,在进入会话页面的时候,SDK 会自动拉取当前会话的历史聊天记录,这个操作会先从本地数据库获取,如果不够 10 条的话,会从服务器获取,需要开通历史消息云存储功能。(融云 SDK 会在本地搭建一套数据库,用来存储你所有的聊天内容)

在获取到历史记录之后,SDK 会自动帮你展示到 消息展示区。展示出来的消息都支持以下功能:

  • 发送出去的消息支持已读回执(单群聊)

  • 消息撤回:kit 默认为两分钟

  • 消息多选

  • 消息转发:支持合并转发

  • 消息引用

  • 消息删除

输入框

SDK 提供的输入框共分为四部分:

  • 文本输入

  • 语音输入

  • 表情

  • 扩展板

文本输入:

文本输入支持用户输入任何文本

群聊输入 @ 可触发@ 人功能

语音输入:

语音输入分为普通语音消息高清语音消息

高清语音消息是在2.9.25之后支持的。建议使用此套方案。

表情:
SDK 有一套默认的 emoji 表情,且支持表情自定义。

扩展板:

扩展板也就是 + 号区域,SDK 默认支持的功能有:

  • 音视频(需要集成 融云音视频,集成之后会自动出现)

  • 照片

  • 位置:支持位置实时共享

  • 语音输入:需要使用科大讯飞的库来做,融云提供了相关的库内容

  • 名片

  • 文件:文件消息是 SDK 下载到指定目录的文件,并非手机系统的文件。

  • 其他:自定义内容,可根据自己的业务添加其他的小内容。

此外,SDK还提供了 常用语功能,目前仅支持单聊,且字数在 30 字以内,可进行类似快捷回复之类的操作。

其他内容,后续补充。

更多详细的内容可自己阅读官网文档。


30 分钟集成融云 IM 即时通讯

IM即时通讯dht1212 发表了文章 • 0 个评论 • 257 次浏览 • 2021-01-08 11:13 • 来自相关话题

最近公司要做一个社交 app,对于时间就是金钱的当今社会,招聘大量人才去搭建通讯系统肯定是不划算的,花费人力物力财力做出来的 app,可能还没人用。那就瞎了。所以毋庸置疑,一拍即合,用第三方的。就开始了对于目前市面上主流的第三方 IM SDK 进行调研。其中有... ...查看全部

最近公司要做一个社交 app,对于时间就是金钱的当今社会,招聘大量人才去搭建通讯系统肯定是不划算的,花费人力物力财力做出来的 app,可能还没人用。那就瞎了。所以毋庸置疑,一拍即合,用第三方的。就开始了对于目前市面上主流的第三方 IM SDK 进行调研。其中有腾讯云,网易云信,融云,环信等。列出了一堆对比条件,最后领导拍板用哪个。末端程序员是没有选择权的。好好搬砖就可以了~要明白自己的身份,嘎嘎

过程不说了,最后选择了用融云,废话不多说,直接勒~这里只介绍一下如何快速集成,让俩人聊起来,这也算是一个里程碑啊。对于程序员来说,聊不起来可就毁了,领导都特么奶凶奶凶的~~~

1.先到融云官网 (https://www.rongcloud.cn/) 进行注册(注册按钮自己找吧),这个可以让你们产品经理或者啥领导去做,可以用公司的邮箱,别用自己的吧,后期自己换了地儿,对公司也是损失不是。注册后添加应用,拿到 appkey

2.xcode 创建一个新工程,或者找自己公司的项目,这里我推荐使用 pod 方式管理第三方,方便快捷,省时省力。因为手动方式太落后了,且配置繁琐,稍有遗漏就会报错,有些报错排查起来费时费力费心费电,所以还是老老实实的用 pod 吧。不听老人言,吃亏在眼前,听哥的没错,融云文档写了如何用 pod,几行命令的事。弄完后,也就是把 SDK 集成好了,跑一下工程,如果不报错,祝贺你兄嘚,马上可以聊天了,看下一步

3.需要在 appDelegate 中导入头文件。#import 。对了,我们用的是带界面的 SDK,快速集成不费事。


4.初始化 SDK

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    //下边引号内需要替换为你的 appkey,别特么原封不动的抄哈,嘎嘎
    [[RCIM sharedRCIM] initWithAppKey:@"融云开发者后台的 AppKey"];
    return YES;
}

5.这一步该连接融云了兄嘚

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [[RCIM sharedRCIM] initWithAppKey:@"获取到的 AppKey"];
    [[RCIM sharedRCIM] connectWithToken:@"开发者的 server 通过请求 server api 获取到的 token 值"
                           dbOpened:^(RCDBErrorCode code) {}
                            success:^(NSString *userId) {}
                              error:^(RCConnectErrorCode status) {}];
    return YES;
}

敲黑板1:在这我得多说你几句,必须要看成功回调和失败回调的调用,进了 success 就是成功了,进了 error 就是错误了。错误了你要看 status 状态码啊,根据错误码来找问题。我在调试过程中就遇到了 RC_CONN_TOKEN_INCORRECT 错误码,顾名思义:token 不正确。这个就要找自己的服务端人员看是哪里问题导致的 token 不正确了。

敲黑板1:还有 @”开发者的 server 通过请求 server api 获取到的 token 值”,这个 token,在刚开始测试的时候,你们的服务端可能还没集成,所以可以先到融云开发者后台“服务管理” - “API 调用” - “用户服务” - “获取 Token” 那里,随便输入一个 userId,name,portraitUri,就可得到 token 了。用这个 token 去连接即可,省时省力。

6.至此,恭喜你啊,已经连接融云成功了。下一步就是该琢磨如何找人聊天了。

7.聊天,需要俩人,对吧,现在连接的用户为之一,另一个需要再去融云开发者后台申请一个 token,记住他的 userId,发消息是需要 userId 的。然后创建个按钮,点击事件写如下代码即可,跳转之后,就能聊天了。然后再跑一个模拟器或者真机,用后申请的 token 登陆,俩人就能互相对话了。

RCConversationViewController *chatViewController = 
[[RCConversationViewController alloc] 
initWithConversationType:ConversationType_PRIVATE targetId:"后申请 token 时填写的 userId"];
[self.navigationController pushViewController:chatViewController animated:YES];


融云的聊天页面在 iOS14 出现崩溃的解决办法

IM即时通讯dht1212 发表了文章 • 0 个评论 • 249 次浏览 • 2021-01-08 11:13 • 来自相关话题

升级 Xcode12 后,模拟器都是 iOS14 了,运行自己的项目,到了聊天页面就崩溃,具体崩溃信息为Thread 1: “-[_UIPageControlIndicatorContentView setImage:]: unrecognized selec... ...查看全部

升级 Xcode12 后,模拟器都是 iOS14 了,运行自己的项目,到了聊天页面就崩溃,具体崩溃信息为Thread 1: “-[_UIPageControlIndicatorContentView setImage:]: unrecognized selector sent to instance。

从崩溃看,猜测是因为缺少了某个方法导致了崩溃,提了个工单给融云,他们的技术支持服务还是挺到位的,很快给了答复,他们对这个问题已经做了及时处理(其实他们已经发了站内信和邮件,自己没注意),更新了官网下载和 pod 上的 SDK,卸载现有 SDK,重新下载 2.10.4 以上版本 SDK 就可以了。

并且这个崩溃只针对使用 imkit的,使用 imlib 的用户没事儿,下面是他们在工单里面回复的具体内容:

通过 Xcode 12 打包 App,在 iOS 14 版本中我司发现 2.x 、4.0.0 、4.0.0.1 版本的 IMKit SDK 与 iOS 14 出现了兼容问题,该问题会引起 App 崩溃,针对该问题进行了紧急的修复
您可以在如下版本获得修改后的 SDK 版本:
1、iOS IMKit SDK 版本为 4.0.0 和 4.0.0.1 的客户务必升级至 4.0.1+ 版本。
2、iOS IMKit SDK 版本为 2.x 客户务必升级至 2.10.6-DEV 或者 2.10.4-Stable( 9 月 18 日发布的版本),这两个版本已针对该问题进行了修复
(1)请务必于 2020 年 9 月 18 日以后重新下载获取 SDK,更新您的 App,下载地址:https://www.rongcloud.cn/downloads/history/ios
(2)使用 Pod 集成的客户,请参考文档先清理 Pod 缓存,文档地址:https://docs.rongcloud.cn/v4/views/im/ui/guide/private/setting/include/ios.html#cocoapods-clean
3、基于 iOS IMLib SDK 集成的客户不受影响。


小吐槽一下,这个崩溃问题虽然发了站内信和邮件,但还是不太容易一起注意,如果能在下面的官网或文档里面有个弹窗或浮动提示就更好了

融云官网:https://www.rongcloud.cn/
融云文档:https://docs.rongcloud.cn/v4


SDK 兼容 JSON

IM即时通讯赵炳东 发表了文章 • 0 个评论 • 253 次浏览 • 2021-01-05 16:04 • 来自相关话题

最近在集成融云 SDK,于是看了下融云的 SDK 源码,发现源码中有一段针对 JSON 的适配,由于针对 IE9 以下不支持 JSON 对象的处理方式,在此分享下1、优点: 除中文外的字符都会转为 Unicode 。2、缺点:JSON.parse() 使用 e... ...查看全部

最近在集成融云 SDK,于是看了下融云的 SDK 源码,发现源码中有一段针对 JSON 的适配,由于针对 IE9 以下不支持 JSON 对象的处理方式,在此分享下

1、优点: 除中文外的字符都会转为 Unicode 。

2、缺点:JSON.parse() 使用 eval 进行转换的,这个方法不是很安全,还看到人介绍用 new Function ,但是没有测试,这里暂时标记下,有空测试下。

if (!window["JSON"]) {
window["JSON"] = (function () {
    function JSON() {
    }
    JSON.parse = function (sJSON) {
        return eval('(' + sJSON + ')');
    };
    JSON.stringify = function (value) {
        return this.str("", { "": value });
    };
    JSON.str = function (key, holder) {
        var i, k, v, length, mind = "", partial, value = holder[key], me = this;
        if (value && typeof value === "object" && typeof value.toJSON === "function") {
            value = value.toJSON(key);
        }
        switch (typeof value) {
            case "string":
                return me.quote(value);
            case "number":
                return isFinite(value) ? String(value) : "null";
            case "boolean":
            case "null":
                return String(value);
            case "object":
                if (!value) {
                    return "null";
                }
                partial = [];
                if (Object.prototype.toString.apply(value) === "[object Array]") {
                    length = value.length;
                    for (i = 0; i < length; i += 1) {
                        partial[i] = me.str(i, value) || "null";
                    }
                    v = partial.length === 0 ? "[]" : "[" + partial.join(",") + "]";
                    return v;
                }
                for (k in value) {
                    if (Object.prototype.hasOwnProperty.call(value, k)) {
                        v = me.str(k, value);
                        if (v) {
                            partial.push(me.quote(k) + ":" + v);
                        }
                    }
                }
                v = partial.length === 0 ? "{}" : "{" + partial.join(",") + "}";
                return v;
        }
    };
    JSON.quote = function (string) {
        var me = this;
        me.rx_escapable.lastIndex = 0;
        return me.rx_escapable.test(string) ? '"' + string.replace(me.rx_escapable, function (a) {
            var c = me.meta[a];
            return typeof c === "string" ? c : "\\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
        }) + '"' : '"' + string + '"';
    };
    JSON.rx_escapable = new RegExp('[\\\"\\\\\"\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]', "g");
    JSON.meta = {
        "\b": "\\b",
        "    ": "\\t",
        "\n": "\\n",
        "\f": "\\f",
        "\r": "\\r",
        '"': '\\"',
        "''": "\\''",
        "\\": "\\\\"
    };
    return JSON;
})();
}

看到这段代码,觉得融云 SDK 在兼容性上还是有处理的,又在 IE7 下做了测试,果然可以稳定运行(这年头还有 IE7 ,是不是很神奇)

融云官网:https://www.rongcloud.cn

融云文档:https://docs.rongcloud.cn/v4


融云 IM SDK 发送语音消息

IM即时通讯苏道 发表了文章 • 0 个评论 • 271 次浏览 • 2021-01-05 16:04 • 来自相关话题

由于公司既有移动端又有 web 端,所以在语音消息这遇到了些小问题。解决的过程最近整理了下也分享给大家作为参考。遇到问题web 端发送语音的问题。移动端发送来的 VoiceMessage 在 web 端不知道如何处理。解决办法问题一 融云只负责发消息,不提供录... ...查看全部

由于公司既有移动端又有 web 端,所以在语音消息这遇到了些小问题。解决的过程最近整理了下也分享给大家作为参考。

遇到问题

  1. web 端发送语音的问题。

  2. 移动端发送来的 VoiceMessage 在 web 端不知道如何处理。

解决办法

  1. 问题一 融云只负责发消息,不提供录制。

所以这边自己找了些录制的插件,这里参考了一个小示例https://blog.csdn.net/qq_37310318/article/details/88312013
拿到后改了改实现了音频录制,修改了上传的逻辑,上传逻辑使用的融云的上传插件,参考的文档 https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#FileMsg

  1. 移动端同事说他们用的是融云的 IMKit,于是提工单问了下,融云的同事给解决办法。

Android 枚举类型

/**
* 语音消息类型
*/
public enum VoiceMessageType {
  /**
    * 普通音质语音消息
    */
  Ordinary,
  /**
    * 高音质语音消息
    */
  HighQuality
}

Android

RongIM.getInstance().setVoiceMessageType(RongIM.VoiceMessageType.HighQuality);

iOS

[RCIMClient sharedRCIMClient].voiceMsgType = RCVoiceMessageTypeHighQuality;

把上上述方法在初始化 init 时设置下即可发送高清语音消息。完美解决。

实现中参考的文献:
web 实现语音录制:https://blog.csdn.net/qq_37310318/article/details/88312013

融云文档:https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#FileMsg

融云官网:https://www.rongcloud.cn/


集成融云 IM 问题总结

IM即时通讯苏道 发表了文章 • 0 个评论 • 270 次浏览 • 2021-01-05 14:37 • 来自相关话题

最近项目里用到了 IM 相关能力,并且之前也有了解融云,所以直接就用了,下面自己总结一些注意事项,在这些点上花了一丢丢时间,在此记录下1、融云是通过他们自己的 AppKey 来隔离不同应用之间的消息的,只有在一个 AppKey 的用户可互发消息2、连接融云的时... ...查看全部

最近项目里用到了 IM 相关能力,并且之前也有了解融云,所以直接就用了,下面自己总结一些注意事项,在这些点上花了一丢丢时间,在此记录下

1、融云是通过他们自己的 AppKey 来隔离不同应用之间的消息的,只有在一个 AppKey 的用户可互发消息

2、连接融云的时候,需要一个 Token,这个 Token 是通过融云的 Server 获取的,并且只能通过自己的 Server 调用,否则有安全问题,调试时可以用他们开发者后台提供的调试工具来获取 Token,写死在页面调试,这点很重要,就不用等后端接口了

3、历史消息默认不存,需要单独开通,这个也是看到了错误码才理解,之前一直在琢磨,咋没有最近聊过天的人列表

4、如果需要浏览器多个 Tab 同时连接,需要单独开通,打开多个浏览器,之前的 Tab 连接就断了,也许要单独开通,不过开发环境免费,可以随便造,哈哈

5、A 给 B 发消息,只需要知道 B 的 Id 就可以发了,B 再上线就可以收到,模拟两个发消息,可以打开两个浏览器分别模拟 A 和 B 发送和接收消息

6、A 给 B 发送消息,A 的 targetId 是 B,B 的 targetId 是 A,消息的发送人是 A,这个逻辑有点绕,简单理解为 A 的 targetId 是 B,B 的 targetId 是 A,消息的发送人 Id 不变,我滴妈呀,有点像饶舌,来哼起来 哈哈哈~

完毕,虽然没啥逻辑,记录下,好记性不如烂笔头,以免后续再用~

有需要可以去官方查看更多内容:

官网主页:https://www.rongcloud.cn

文档主页:https://docs.rongcloud.cn/v4


融云 Web SDK 如何实现只有一个设备登入

IM即时通讯苏道 发表了文章 • 0 个评论 • 266 次浏览 • 2021-01-05 14:37 • 来自相关话题

背景在集成融云的即时通讯时,产品脑门一拍说:咋们要实现一个功能,不管是 Web 端还是移动端登入,必须只能一个端登入成功并且后登入成功的账号需要踢掉前面登入的账号。咋的一听感觉还蛮简单的,融云不是有一个服务嘛:叫做多设备消息同步,我把该服务关掉不就行了~~ O... ...查看全部

背景

在集成融云的即时通讯时,产品脑门一拍说:咋们要实现一个功能,不管是 Web 端还是移动端登入,必须只能一个端登入成功并且后登入成功的账号需要踢掉前面登入的账号

咋的一听感觉还蛮简单的,融云不是有一个服务嘛:叫做多设备消息同步,我把该服务关掉不就行了~~ O(∩_∩)O哈哈~

但是……. ┭┮﹏┭┮
是我想的太简单了,服务关掉之后 Web 端的确可以进行互踢了,但是移动端和 Web 端还是可以在线呀,原来默认的情况下,融云仅支持 1 个 Web 端、1 个 桌面端、1 个移动端同时在线

这个是融云多端同时在线详情:https://docs.rongcloud.cn/v4/views/im/noui/guide/group/connection/multiclient/

话不多说,开始揭开谜底

1、首先将多设备消息同步 - 关闭,关闭连接:https://developer.rongcloud.cn/advance/index/YTrydqMSdEsmBtX2zX0Amg

2、这时如果多端登入状态监听会监听到状态码 6 时,执行断开链接

代码示例

im.watch({
  conversation: function(event){
    var updatedConversationList = event.updatedConversationList; // 更新的会话列表
    console.log('更新会话汇总:', updatedConversationList);
    console.log('最新会话列表:', im.Conversation.merge({
        conversationList,
        updatedConversationList
      }));
  },
  message: function(event){
    var message = event.message;
    console.log('收到新消息:', message);
  },
  status: function(event){
     console.log('连接状态码:', status);
     var status = event.status;
     if(status == 6){
       im.disconnect().then(function() {
        console.log('断开链接成功');
       });
     }
  }
});

3、通过发送自定义消息,来执行断开连接方法

比如您有两个设备 A,B,用户开始在 A 设备登入,然后再 B 设备登入成功后给自己或者给别人发一条自定义消息,A 设备在监听中根据该自定义消息判断,调用断开连接方法,即可做到只有一个设备登入

//发送自定义消息
var conversation = im.Conversation.get({
  targetId: '接收方的 userId',
  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
conversation.send({
  messageType: 's:person', // 填写开发者定义的 messageType
  content: { // 填写开发者定义的消息内容
    name: 'RongCloud',
    age: 12
  },
  isPersited: true,// 是否存储在服务端,默认为 true
  isCounted: true  // 是否计数. 计数消息接收端接收后未读数加 1,默认为 true
}).then(function(message){
  console.log('发送 s:person 消息成功', message);
});

通过上面的步骤,就可以实现只能单设备登入了,但是需要注意您使用的 SDK 版本,一开始我用 3.0.5 SDK 来做,但是有一个问题:执行断开连接还是会进行重连,所以要使用 SDK 3.0.6 版本以上的 SDK 哦

融云 Web 播放声音 — Flash 篇 (播放 AMR、WAV)

WebRTC赵炳东 发表了文章 • 0 个评论 • 273 次浏览 • 2021-01-05 11:50 • 来自相关话题

本文主要介绍 Flash 播放 AMR 格式 Base64码 音频。在此之前么有接触过 Flash ,接触 AS3 是一头雾水,不过幸好有 TypeScript 和 JavaScript 的基础看起来不是很费劲,现学现卖的就是开了 ”跳坑“ 之旅~~~1、实现... ...查看全部

本文主要介绍 Flash 播放 AMR 格式 Base64码 音频。

在此之前么有接触过 Flash ,接触 AS3 是一头雾水,不过幸好有 TypeScript 和 JavaScript 的基础看起来不是很费劲,现学现卖的就是开了 ”跳坑“ 之旅~~~

1、实现思路

起初一点实现思路都木有,不知道该从何做起,只知道用 Flash 播放 AMR ,度娘谷姐的一顿找,结果可想而知,没有糟糕,只有十分糟糕,哈哈。

后来想了想,凡事都得有个思路,不能闷头干,瞬间恍然大悟,为自己浪费的快一天的时间,感到羞愧和害怕…..

① Flash 都能播放哪些音频。

② 在 ActionScript 中AMR 是如何转换成 Flash 可播放的音频的。

③ JS 中如何调用 ActionScript 中方法,如何交互。

④ 如何把 SWF 文件嵌入到 HTML 页面中。

⑤ 如何把 AMR(Audio) 和 Flash 播放AMR 两种方式封装起来。

2、逐一破解

① Flash 都能播放哪些音频:

MP3 格式是 Flash 默认支持的音频格式,WAVE 格式需要转换可以播放,其他格式也是需要转换的,因为先做的 Chrome 下播放声音,对 WAVE 音频多少有些了解,所以决定从 WAVE 音频入手,所以按照上述的套路来 ”屡思路“:

(1) 不管如何转换,肯定要操作字节数组,所以第一步把 AMR 格式的 base64 码 转换为 ByteArray 数组。

(2) 如何把 AMR 的 ByteArray 转换成 WAVE 格式的 ByteArray 数组,毫无疑问 ,肯定需要解码的过程。

按照这两个小步骤逐一做,很快找到了 base64 的转码过程(开始是自己用 AS 实现了 JS 中的的 转码过程,可用但不完美,最终借鉴 github 上大牛的转换过程),但 AMR 转换 WAVE 这个就没有那么容易了,最终确定,AS 解 AMR 比较费劲,需要 用 C 语言来解码,然后用 CrossBirdge 生成可以供 Flash 调用的 SWC 文件。

OK,到这为止,第一步就完美解决了。

② 在 ActionScript 中AMR 是如何转换成 Flash 可播放的音频的:

    上文中有提到,需要用 C 语言 进行对 AMR 解码,下文中会给出 C 语言解码和生成 SWC 的教程(借鉴大牛的)。

③ JS 中如何调用 ActionScript 中方法,如何交互,下文中会贴出完整代码(一定要看注释、注释、注释),此处写出 JS 调用过程。

JS 代码:

function callFlashMethod() {
  // play 是 flash 代码中定义的 ExternalInterface.addCallback("play",this.play); 下文中会有详细介绍。
  thisMovie("嵌入页面上<object>的ID").play("base64str");
}
function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName]
    }
    else {
        return document[movieName]
    }
}
document.getElementById("playId").onclick = function(){
    callFlashMethod();
};

④ 如何把 SWF 文件嵌入到 HTML 页面中:

使用 swfobject.js 可以将 swf 文件嵌入到 HTML 页面中,参考资料 :http://www.cnblogs.com/Carpe-Diem/articles/2310831.html

⑤ 如何把 AMR(Audio) 和 Flash 播放AMR 两种方式封装起来:

有了上面的铺垫,轻而易举的就可以封装啦(主要看 isIE 为 true 的情况):

var RongIMLib;
(function (RongIMLib) {
    var RongIMVoice = (function () {
        function RongIMVoice() {
        }
        /**
        * 初始化声音库
        */
        RongIMVoice.init = function () {
            if (this.isIE) {
                var div = document.createElement("div");
                div.setAttribute("id", "flashContent");
                document.body.appendChild(div);
                var script = document.createElement("script");
                script.src = "http://cdn.ronghub.com/swfobject-2.0.0.min.js";
                var header = document.getElementsByTagName("head")[0];
                header.appendChild(script);
                setTimeout(function () {
                    var swfVersionStr = "11.4.0";
                    var flashvars = {};
                    var params = {};
                    params.quality = "high";
                    params.bgcolor = "#ffffff";
                    params.allowScriptAccess = "always";
                    params.allowfullscreen = "true";
                    var attributes = {};
                    attributes.id = "player";
                    attributes.name = "player";
                    attributes.align = "middle";
                    swfobject.embedSWF("http://cdn.ronghub.com/player-2.0.2.swf", "flashContent", "1", "1", swfVersionStr, null, flashvars, params, attributes);
                }, 200);
            }
            else {
                var list = ["http://cdn.ronghub.com/pcmdata-2.0.0.min.js", "http://cdn.ronghub.com/libamr-2.0.1.min.js"];
                for (var i = 0, len = list.length; i < len; i++) {
                    var script = document.createElement("script");
                    script.src = list[i];
                    document.head.appendChild(script);
                }
            }
            this.isInit = true;
        };
        /**
        * 开始播放声音
        * @param data {string} amr 格式的 base64 码
        * @param duration {number} 播放大概时长 用 data.length / 1024
        */
        RongIMVoice.play = function (data, duration) {
            this.checkInit("play");
            var me = this;
            if (me.isIE) {
                me.thisMovie().doAction("init", data);
            }
            else {
                me.palyVoice(data);
                me.onCompleted(duration);
            }
        };
        /**
        * 停止播放声音
        */
        RongIMVoice.stop = function () {
            this.checkInit("stop");
            var me = this;
            if (me.isIE) {
                me.thisMovie().doAction("stop");
            }
            else {
                if (me.element) {
                    me.element.stop();
                }
            }
        };
        /**
        * 播放声音时调用的方法
        */
        RongIMVoice.onprogress = function () {
            this.checkInit("onprogress");
        };
        RongIMVoice.checkInit = function (postion) {
            if (!this.isInit) {
                throw new Error("RongIMVoice not initialized,postion:" + postion);
            }
        };
        RongIMVoice.thisMovie = function () {
            return eval("window['player']");
        };
        RongIMVoice.onCompleted = function (duration) {
            var me = this;
            var count = 0;
            var timer = setInterval(function () {
                count++;
                me.onprogress();
                if (count >= duration) {
                    clearInterval(timer);
                }
            }, 1000);
            if (me.isIE) {
                me.thisMovie().doAction("play");
            }
        };
        RongIMVoice.base64ToBlob = function (base64Data, type) {
            var mimeType;
            if (type) {
                mimeType = { type: type };
            }
            base64Data = base64Data.replace(/^(.*)[,]/, '');
            var sliceSize = 1024;
            var byteCharacters = atob(base64Data);
            var bytesLength = byteCharacters.length;
            var slicesCount = Math.ceil(bytesLength / sliceSize);
            var byteArrays = new Array(slicesCount);
            for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
                var begin = sliceIndex * sliceSize;
                var end = Math.min(begin + sliceSize, bytesLength);
                var bytes = new Array(end - begin);
                for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
                    bytes[i] = byteCharacters[offset].charCodeAt(0);
                }
                byteArrays[sliceIndex] = new Uint8Array(bytes);
            }
            return new Blob(byteArrays, mimeType);
        };
        RongIMVoice.palyVoice = function (base64Data) {
            var reader = new FileReader(), blob = this.base64ToBlob(base64Data, "audio/amr"), me = this;
            reader.onload = function () {
                var samples = new AMR({
                    benchmark: true
                }).decode(reader.result);
                me.element = AMR.util.play(samples);
            };
            reader.readAsBinaryString(blob);
        };
        RongIMVoice.isIE = /Trident/.test(navigator.userAgent);
        RongIMVoice.isInit = false;
        return RongIMVoice;
    })();
    RongIMLib.RongIMVoice = RongIMVoice;
    //兼容AMD CMD
    if ("function" === typeof require && "object" === typeof module && module && module.id && "object" === typeof exports && exports) {
        module.exports = RongIMVoice;
    }
    else if ("function" === typeof define && define.amd) {
        define("RongIMVoice", [], function () {
            return RongIMVoice;
        });
    }
})(RongIMLib || (RongIMLib = {}));

 

截止到这里,Flash 播放 AMR 格式 base64 码 就说完了,主要是介绍下大概思路

以上是融云 SDK 里的源码,不过最近推出了直接使用 Audio 方式播放 AAC 格式的音频文件

原始文章连接:https://www.cnblogs.com/yuhongda0315/p/5224450.html

融云官网:https://www.rongcloud.cn

融云文档:https://docs.rongcloud.cn/v4


融云 Web 播放声音(AMR 、WAVE)

IM即时通讯赵炳东 发表了文章 • 0 个评论 • 29 次浏览 • 2021-01-05 11:50 • 来自相关话题

最近甚是苦闷,做语音播放降级,跳进了很多坑,别提有多惨了,不过结果还是不错滴,纵观前后,一句话足以概括 “痛并快乐着” ~~~ok,我少说废话,下面来总结下 Web 播放声音一些注意事项。说到 Web 我第一件事想起的就是浏览器兼容性,播放声音当然也难逃苦海,... ...查看全部

最近甚是苦闷,做语音播放降级,跳进了很多坑,别提有多惨了,不过结果还是不错滴,纵观前后,一句话足以概括 “痛并快乐着” ~~~

ok,我少说废话,下面来总结下 Web 播放声音一些注意事项。

说到 Web 我第一件事想起的就是浏览器兼容性,播放声音当然也难逃苦海,需要注意以 Trident 为内核 (IE为主) 的浏览器,和 FF、Chrome等浏览器的区别。

1、技术准备

① FF、Chrome等支持


② IE 浏览器下不支持(IE9以下


2、详细说明

为避免文章过于冗长,针对以上两种情况分别总结:

① 使用 AMR (Audio) 播放 : http://www.cnblogs.com/yuhongda0315/p/5224188.html

② 使用 Flash 播放 :http://www.cnblogs.com/yuhongda0315/p/5224450.html

3、资料下载

ActionScript : player-as3源码.rar

完整的demo : amrPlayer-jsdemo.rar

ActionScript 播放 Wave 文件 :wavePlayer-as3源码.rar

所需要的JS(amr.js 在 libamr-min.js 最下方):所需JS.rar

原始文章连接:https://www.cnblogs.com/yuhongda0315/p/5224064.html

融云官网:https://www.rongcloud.cn

融云文档:https://docs.rongcloud.cn/v4


融云 AMR(Aduio) 播放 AMR 格式 Base64 码音频

IM即时通讯赵炳东 发表了文章 • 0 个评论 • 260 次浏览 • 2021-01-05 10:55 • 来自相关话题

1、必备资料 github AMR 开源库 :https://github.com/jpemartins/amr.js 用心把这个项目看一遍,对于我下面说的话,可以忽略啦,代码是最好的文章,哈哈~~2、核心 JS 库 :amr.js 、pcmdata... ...查看全部

1、必备资料 github AMR 开源库 :https://github.com/jpemartins/amr.js 用心把这个项目看一遍,对于我下面说的话,可以忽略啦,代码是最好的文章,哈哈~~

2、核心 JS 库 :amr.js 、pcmdata.min.js、libamr-nb.js (g上述ithub项目中有另外三个js,我给合成一个amr.js,不要混乱)这三个 JS 是播放声音的主要依赖,下面一 一 介绍下:

① amr.js : 可以理解成 “桥” 的概念,连接底层解码和客户端调用的桥梁。

② pcmdata.min.js : 封装 pcm data, PCM是一种编码格式 , PCM 添加上 RIFF 头 可以组成 Wave 音频(Wave 不止这一种编码方式),细节太深,小弟也不懂啦~~,有空深挖。

③ libamr-nb.js : amr转换的核心库,这个文件比较大,压缩后大概也要 600kb 左右。

④ 如果下载三个核心库,建议从上篇 “Web 播放声音 — 介绍篇” 中的附件中卸载,在 github 现在的核心库,在 Chrome 下只能播放一次,把这个问题修复了一下,原因是以同样的 Audio.src 创建 Audio 在 Chrome 下就不能二次播放,网上说法各异,最终自己动手解决了,详细可以在 amr.js 中的 global.util.play 方法中看。

3、具体用法

说了有一阵子白话了,该上点代码了,下面是我封装的播放 AMR 格式 Base64 码 的插件,直接在页面引用可以 ,下载地址可以在 “Web 播放声音 — 介绍篇” 下载。

页面一点样式都没有加,只有两个按钮,小伙伴凑合凑合,哈哈~~

代码中只引入了 voice.js 一个 js,其他 js 动态引用了。(公司有 cdn 所以直接放在上面了)。

步骤:

第一步:执行初始化。

第二步:调用相应方法。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Example</title>
<script src="js/voice.js"></script>
</head>
<body>
<input type="button" value="play" id="playId"/>
<input type="button" value="stop" id="stopId"/>
</body>
<script type="text/javascript">
//初始化
RongIMLib.RongIMVoice.init();
//播放
document.getElementById("playId").onclick = function(){
   // base64Str : amr 格式的 base64 码,可以用 HTML5 FileReader 或者canvas 进行转换 。 
   var base64Str = "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";
    RongIMLib.RongIMVoice.play(base64Str );
};
//暂停
document.getElementById("stopId").onclick = function(){ RongIMLib.RongIMVoice.stop(); }; 
</script> 
</html>

在这里也把 “voice.js” 的代码贴出来,使用 typescript 写完后生成出来的,方便小伙伴们查看:

var RongIMLib;
(function (RongIMLib) {
 var RongIMVoice = (function () {
  function RongIMVoice() {
  }
  /**
  * 初始化声音库
  */
  RongIMVoice.init = function () {
      if (this.isIE) {
          var div = document.createElement("div");
          div.setAttribute("id", "flashContent");
          document.body.appendChild(div);
          var script = document.createElement("script");
          script.src = "http://cdn.ronghub.com/swfobject-2.0.0.min.js";
          var header = document.getElementsByTagName("head")[0];
          header.appendChild(script);
          setTimeout(function () {
              var swfVersionStr = "11.4.0";
              var flashvars = {};
              var params = {};
              params.quality = "high";
              params.bgcolor = "#ffffff";
              params.allowscriptaccess = "always";
              params.allowfullscreen = "true";
              var attributes = {};
              attributes.id = "player";
              attributes.name = "player";
              attributes.align = "middle";
              swfobject.embedSWF("http://cdn.ronghub.com/player-2.0.2.swf", "flashContent", "1", "1", swfVersionStr, null, flashvars, params, attributes);
          }, 200);
      }
      else {
          var list = ["http://cdn.ronghub.com/pcmdata-2.0.0.min.js", "http://cdn.ronghub.com/libamr-2.0.1.min.js"];
          for (var i = 0, len = list.length; i < len; i++) {
              var script = document.createElement("script");
              script.src = list[i];
              document.head.appendChild(script);
          }
      }
      this.isInit = true;
  };
  /**
  * 开始播放声音
  * @param data {string} amr 格式的 base64 码
  * @param duration {number} 播放大概时长 用 data.length / 1024
  */
  RongIMVoice.play = function (data, duration) {
      this.checkInit("play");
      var me = this;
      if (me.isIE) {
          me.thisMovie().doAction("init", data);
      }
      else {
          me.palyVoice(data);
          me.onCompleted(duration);
      }
  };
  /**
  * 停止播放声音
  */
  RongIMVoice.stop = function () {
      this.checkInit("stop");
      var me = this;
      if (me.isIE) {
          me.thisMovie().doAction("stop");
      }
      else {
          if (me.element) {
              me.element.stop();
          }
      }
  };
  /**
  * 播放声音时调用的方法
  */
  RongIMVoice.onprogress = function () {
      this.checkInit("onprogress");
  };
    /** 
     * 校验是否初始化
      */
  RongIMVoice.checkInit = function (postion) {
      if (!this.isInit) {
          throw new Error("RongIMVoice not initialized,postion:" + postion);
      }
  };
  RongIMVoice.thisMovie = function () {
      return eval("window['player']");
  };
  RongIMVoice.onCompleted = function (duration) {
      var me = this;
      var count = 0;
      var timer = setInterval(function () {
          count++;
          me.onprogress();
          if (count >= duration) {
              clearInterval(timer);
          }
      }, 1000);
      if (me.isIE) {
          me.thisMovie().doAction("play");
      }
  };
  RongIMVoice.base64ToBlob = function (base64Data, type) {
      var mimeType;
      if (type) {
          mimeType = { type: type };
      }
      base64Data = base64Data.replace(/^(.*)[,]/, '');
      var sliceSize = 1024;
      var byteCharacters = atob(base64Data);
      var bytesLength = byteCharacters.length;
      var slicesCount = Math.ceil(bytesLength / sliceSize);
      var byteArrays = new Array(slicesCount);
      for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
          var begin = sliceIndex * sliceSize;
          var end = Math.min(begin + sliceSize, bytesLength);
          var bytes = new Array(end - begin);
          for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
              bytes[i] = byteCharacters[offset].charCodeAt(0);
          }
          byteArrays[sliceIndex] = new Uint8Array(bytes);
      }
      return new Blob(byteArrays, mimeType);
  };
  RongIMVoice.palyVoice = function (base64Data) {
      var reader = new FileReader(), blob = this.base64ToBlob(base64Data, "audio/amr"), me = this;
      reader.onload = function () {
          var samples = new AMR({
              benchmark: true
          }).decode(reader.result);
          me.element = AMR.util.play(samples);
      };
      reader.readAsBinaryString(blob);
  };
  RongIMVoice.isIE = /Trident/.test(navigator.userAgent);
  RongIMVoice.isInit = false;
  return RongIMVoice;
})();
RongIMLib.RongIMVoice = RongIMVoice;
//兼容AMD CMD
if ("function" === typeof require && "object" === typeof module && module && module.id && "object" === typeof exports && exports) {
  module.exports = RongIMVoice;
}
else if ("function" === typeof define && define.amd) {
  define("RongIMVoice", [], function () {
      return RongIMVoice;
  });
}
})(RongIMLib || (RongIMLib = {}));

好啦,到此本文结束,会尽快更新 Flash 下播放 AMR 格式 Base64 码,代码中哪里有错误或者有异议麻烦小伙伴们联系我,一起讨论,有则改之无法加冕,一起进步,thx~~。

以上是融云 SDK 里的源码,不过最近推出了直接使用 Audio 方式播放 AAC 格式的音频文件,非常方便

原始文章连接:https://www.cnblogs.com/yuhongda0315/p/5224188.html

融云官网:https://www.rongcloud.cn

融云文档:https://docs.rongcloud.cn/v4


友情链接