WebApp快捷打包
网易云信 RTC 实时音视频
转到模块插件

敬告：此 DEMO 演示为开放测试页面，仅用于开发者快速测试体验应用功能，请严格遵守开发者协议。

♦ JS-SDK 引用方式：

♦ 普通网页 script 方式加载：下载最新版 jsBridge-v20251122.zip，请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库；

♦ js module 方式引用：npm install ym-jsbridge 具体请参考 npm package

【优惠说明】通过一门平台链接登录云信控制台并成功注册账号，云信将提供特别的渠道版套餐，低至五折接入；

【产品介绍、注册/登录】；

基本设置

init 初始化

网易云信 上创建的应用 AppKey
appKey:

是否开启会话已读多端同步，false 即不支持多端同步会话未读数
sessionReadAck:

群通知消息是否计入未读数，false 即群消息不计入未读数
teamNotificationMessageMarkUnread:

是否启用群消息已读功能，false 即关闭群消息已读功能
enableTeamMsgAck:

是否需要将被撤回的消息计入未读数，false 即撤回消息不影响未读数
shouldConsiderRevokedMessageUnreadCount:

登录时的自定义字段，登录成功后同步给其他端
loginCustomTag:

是否同步置顶会话，false 即不同步置顶会话
notifyStickTopSession:

是否开启最近联系人会话时间索引，false 即不开启
enableRecentContactsTimeIndex:

是否开启聊天室空间消息功能，false 即不开启
enableChatRoomLocation:

是否支持圈组消息缓存，false 即不开启
enabledQChatMessageCache:

true 则消息状态是否成功会结合是否被拉入黑名单进行判断
fixMsgStatusByBlackList:

是否开启圈组自动订阅，true 开启圈组自动订阅；false 关闭圈组自动订阅
qchatAutoSubscribe:

小米推送 appId
mixPushConfig.xmAppId:

小米推送 appKey
mixPushConfig.xmAppKey:

小米推送证书，请在云信管理后台申请
mixPushConfig.xmCertificateName:

华为推送 appId
mixPushConfig.hwAppId:

华为推送证书，请在云信管理后台申请
mixPushConfig.hwCertificateName:

魅族推送 appId
mixPushConfig.mzAppId:

魅族推送 appKey
mixPushConfig.mzAppKey:

族推送证书，请在云信管理后台申请
mixPushConfig.mzCertificateName:

VIVO推送证书，请在云信管理后台申请
mixPushConfig.vivoCertificateName:

OPPO推送 appId
mixPushConfig.oppoAppId:

OPPO推送 appKey
mixPushConfig.oppoAppKey:

OPPO推送 appSecret
mixPushConfig.oppoAppSecret:

OPPO推送证书，请在云信管理后台申请
mixPushConfig.oppoCertificateName:

荣耀推送证书，请在云信管理后台申请
mixPushConfig.honorCertificateName:

FCM推送证书，请在云信管理后台申请(海外客户使用)
mixPushConfig.fcmCertificateName:

是否根据token自动选择推送类型
mixPushConfig.autoSelectPushType:

iOS APNs 推送证书名
mixPushConfig.apnsCername:

iOS PushKit 推送证书名
mixPushConfig.pkCername:

安卓版包名，用于跨平台互推消息
mixPushConfig.androidPackageName:

是否需要响铃提醒
statusBarNotificationConfig.ring:

是否需要振动提醒
statusBarNotificationConfig.vibrate:

呼吸灯的颜色，建议尽量使用绿色、蓝色、红色等基本颜色，不要去用混合色。
statusBarNotificationConfig.ledARGB:

吸灯亮时的持续时间（毫秒）
statusBarNotificationConfig.ledOnMs:

呼吸灯熄灭时的持续时间（毫秒）
statusBarNotificationConfig.ledOffMs:

不显示消息详情开关, 同时也不再显示消息发送者昵称
statusBarNotificationConfig.hideContent:

免打扰设置开关
statusBarNotificationConfig.downTimeToggle:

免打扰的开始时间, 格式为HH:mm(24小时制)
statusBarNotificationConfig.downTimeBegin:

免打扰的结束时间, 格式为HH:mm(24小时制)。如果结束时间小于开始时间，免打扰时间为开始时间-24:00-结束时间。
statusBarNotificationConfig.downTimeEnd:

免打扰期间，是否显示通知
statusBarNotificationConfig.downTimeEnableNotification:

通知栏提醒的标题是否只显示应用名
statusBarNotificationConfig.titleOnlyShowAppName:

消息通知栏的折叠类型。 all 折叠所有通知栏消息为一条通知, expand 不折叠通知栏消息, contact 将同一个会话下的消息折叠为一条通知，不同会话之间不折叠
statusBarNotificationConfig.notificationFoldStyle:

消息通知栏颜色
statusBarNotificationConfig.notificationColor:

是否APP图标显示未读数(红点)
statusBarNotificationConfig.showBadge:

如果群名称为null 或者空串，则使用customTitleWhenTeamNameEmpty 作为通知栏title
statusBarNotificationConfig.customTitleWhenTeamNameEmpty: 

jsBridge.yxRtc.init({
    //网易云信 上创建的应用 AppKey
    appKey: "{{init.appKey}}",
    //是否开启会话已读多端同步，false 即不支持多端同步会话未读数
    sessionReadAck: {{init.sessionReadAck}},
    //群通知消息是否计入未读数，false 即群消息不计入未读数
    teamNotificationMessageMarkUnread: {{init.teamNotificationMessageMarkUnread}},
    //是否启用群消息已读功能，false 即关闭群消息已读功能
    enableTeamMsgAck: {{init.enableTeamMsgAck}},
    //是否需要将被撤回的消息计入未读数，false 即撤回消息不影响未读数
    shouldConsiderRevokedMessageUnreadCount: {{init.shouldConsiderRevokedMessageUnreadCount}},
    //登录时的自定义字段，登录成功后同步给其他端
    loginCustomTag: "{{init.loginCustomTag}}",
    //是否同步置顶会话，false 即不同步置顶会话
    notifyStickTopSession: {{init.notifyStickTopSession}},
    //是否开启最近联系人会话时间索引，false 即不开启
    enableRecentContactsTimeIndex: {{init.enableRecentContactsTimeIndex}},
    //是否开启聊天室空间消息功能，false 即不开启
    enableChatRoomLocation: {{init.enableChatRoomLocation}},
    //是否支持圈组消息缓存，false 即不开启
    enabledQChatMessageCache: {{init.enabledQChatMessageCache}},
    //true 则消息状态是否成功会结合是否被拉入黑名单进行判断
    fixMsgStatusByBlackList: {{init.fixMsgStatusByBlackList}},
    //是否开启圈组自动订阅，true 开启圈组自动订阅；false 关闭圈组自动订阅
    qchatAutoSubscribe: {{init.qchatAutoSubscribe}},
    //第三方厂商通道离线推送配置
    mixPushConfig: {
        //小米推送 appId
        xmAppId: "{{init.mixPushConfig.xmAppId}}",
        //小米推送 appKey
        xmAppKey: "{{init.mixPushConfig.xmAppKey}}",
        //小米推送证书，请在云信管理后台申请
        xmCertificateName: "{{init.mixPushConfig.xmCertificateName}}",
        //华为推送 appId
        hwAppId: "{{init.mixPushConfig.hwAppId}}",
        //华为推送证书，请在云信管理后台申请
        hwCertificateName: "{{init.mixPushConfig.hwCertificateName}}",
        //魅族推送 appId
        mzAppId: "{{init.mixPushConfig.mzAppId}}",
        //魅族推送 appKey
        mzAppKey: "{{init.mixPushConfig.mzAppKey}}",
        //族推送证书，请在云信管理后台申请
        mzCertificateName: "{{init.mixPushConfig.mzCertificateName}}",
        //VIVO推送证书，请在云信管理后台申请
        vivoCertificateName: "{{init.mixPushConfig.vivoCertificateName}}",
        //OPPO推送 appId
        oppoAppId: "{{init.mixPushConfig.oppoAppId}}",
        //OPPO推送 appKey
        oppoAppKey: "{{init.mixPushConfig.oppoAppKey}}",
        //OPPO推送 appSecret
        oppoAppSecret: "{{init.mixPushConfig.oppoAppSecret}}",
        //OPPO推送证书，请在云信管理后台申请
        oppoCertificateName: "{{init.mixPushConfig.oppoCertificateName}}",
        //荣耀推送证书，请在云信管理后台申请
        honorCertificateName: "{{init.mixPushConfig.honorCertificateName}}",
        //FCM推送证书，请在云信管理后台申请(海外客户使用)
        fcmCertificateName: "{{init.mixPushConfig.fcmCertificateName}}",
        //是否根据token自动选择推送类型
        autoSelectPushType: {{init.mixPushConfig.autoSelectPushType}},
        //iOS APNs 推送证书名
        apnsCername: "{{init.mixPushConfig.apnsCername}}",
        //iOS PushKit 推送证书名
        pkCername: "{{init.mixPushConfig.pkCername}}",
        //安卓版包名，用于跨平台互推消息
        androidPackageName: "{{init.mixPushConfig.androidPackageName}}"
    },
    //安卓在线消息通知栏提醒配置项 详细说明请参考这里
    statusBarNotificationConfig: {
        //是否需要响铃提醒
        ring: {{init.statusBarNotificationConfig.ring}},
        //是否需要振动提醒
        vibrate: {{init.statusBarNotificationConfig.vibrate}},
        //呼吸灯的颜色，建议尽量使用绿色、蓝色、红色等基本颜色，不要去用混合色。
        ledARGB: "{{init.statusBarNotificationConfig.ledARGB}}",
        //吸灯亮时的持续时间（毫秒）
        ledOnMs: {{init.statusBarNotificationConfig.ledOnMs}},
        //呼吸灯熄灭时的持续时间（毫秒）
        ledOffMs: {{init.statusBarNotificationConfig.ledOffMs}},
        //不显示消息详情开关, 同时也不再显示消息发送者昵称
        hideContent: {{init.statusBarNotificationConfig.hideContent}},
        //免打扰设置开关
        downTimeToggle: {{init.statusBarNotificationConfig.downTimeToggle}},
        //免打扰的开始时间, 格式为HH:mm(24小时制)
        downTimeBegin: "{{init.statusBarNotificationConfig.downTimeBegin}}",
        //免打扰的结束时间, 格式为HH:mm(24小时制)。如果结束时间小于开始时间，免打扰时间为开始时间-24:00-结束时间。
        downTimeEnd: "{{init.statusBarNotificationConfig.downTimeEnd}}",
        //免打扰期间，是否显示通知
        downTimeEnableNotification: {{init.statusBarNotificationConfig.downTimeEnableNotification}},
        //通知栏提醒的标题是否只显示应用名
        titleOnlyShowAppName: {{init.statusBarNotificationConfig.titleOnlyShowAppName}},
        //消息通知栏的折叠类型。 all 折叠所有通知栏消息为一条通知, expand 不折叠通知栏消息, contact 将同一个会话下的消息折叠为一条通知，不同会话之间不折叠
        notificationFoldStyle: "{{init.statusBarNotificationConfig.notificationFoldStyle}}",
        //消息通知栏颜色
        notificationColor: "{{init.statusBarNotificationConfig.notificationColor}}",
        //是否APP图标显示未读数(红点)
        showBadge: {{init.statusBarNotificationConfig.showBadge}},
        //如果群名称为null 或者空串，则使用customTitleWhenTeamNameEmpty 作为通知栏title
        customTitleWhenTeamNameEmpty: "{{init.statusBarNotificationConfig.customTitleWhenTeamNameEmpty}}"
    }
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

info 获取当前信息

jsBridge.yxRtc.info(function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }

/** 成功时 res 参数返回
{
    sdkVersion  SDK版本
    hasInit     是否已初始化
    accid       当前登录的 accid
    status      当前用户状态
}
**/

});

login 登录

云信 IM 账号 的 accid
accid:

登录鉴权 token
token:

鉴权方式： //0 通过静态 token 鉴权； //1 通过动态 token 鉴权； //2 基于第三方回调的 token 鉴权方式，使用该方式时必须传入 loginExt 参数
authType:

登录自定义扩展字段，用于第三方服务器鉴权，当 authType 为 2 时必须传入本参数
loginExt:

音视频通话是否使用 自定义用户昵称和头像，如果启用请务必在 setListener 中处理 CallkitUserInfoHelper 事件设置昵称和头像。
useCustomCallkitUserInfo:

示例说明
priorityPushPayload.oppoField.category: 

jsBridge.yxRtc.login({
    //云信 IM 账号 的 accid
    accid: "{{login.accid}}",
    //登录鉴权 token
    token: "{{login.token}}",
    //鉴权方式：
    //0 通过静态 token 鉴权；
    //1 通过动态 token 鉴权；
    //2 基于第三方回调的 token 鉴权方式，使用该方式时必须传入 loginExt 参数
    authType: {{login.authType}},
    //登录自定义扩展字段，用于第三方服务器鉴权，当 authType 为 2 时必须传入本参数
    loginExt: "{{login.loginExt}}",
    //音视频通话是否使用 自定义用户昵称和头像，如果启用请务必在 setListener 中处理 CallkitUserInfoHelper 事件设置昵称和头像。
    useCustomCallkitUserInfo: {{login.useCustomCallkitUserInfo}},
    //新增或覆盖到 离线推送 payload 里面去的高优先级字段，任意 JSON Object
    priorityPushPayload: {
        //请参考网易文档查看字段说明
        oppoField: {
            //示例说明
            category: "{{login.priorityPushPayload.oppoField.category}}"
        }
    }
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

logout 退出

jsBridge.yxRtc.logout(function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

setCallkitUserNickname 设置音视频用户昵称

云信 IM 账号的 accid:

昵称
nickname: 

//登录 login 时需启用 useCustomCallkitUserInfo
//需在 setListner 的 CallkitUserInfoHelper -> fetchNickname 中调用
jsBridge.yxRtc.setCallkitUserNickname({
    //云信 IM 账号的 accid
    accid: "{{setCallkitUserNickname.accid}}",
    //昵称
    nickname: "{{setCallkitUserNickname.nickname}}"
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

setCallkitUserAvatar 设置音视频用户头像

云信 IM 账号的 accid:

昵称
nickname: 

//登录 login 时需启用 useCustomCallkitUserInfo
//需在 setListner 的 CallkitUserInfoHelper -> loadAvatar 中调用
jsBridge.yxRtc.setCallkitUserAvatar({
    //云信 IM 账号的 accid
    accid: "{{setCallkitUserAvatar.accid}}",
    //头像
    nickname: "{{setCallkitUserAvatar.avatar}}"
}, function(success, res) {
    if (success) {
        alert('成功' + JSON.stringify(res));
    } else {
        alert('失败' + JSON.stringify(res));
    }
});

事件监听

setListener 设置监听器

• 如需处理接口调用事件，请设置此监听器；

jsBridge.yxRtc.setListener(function(event, res) {
    switch (event) {
        
        //登录 login 时需启用 useCustomCallkitUserInfo 才会有此回调事件
        case "CallkitUserInfoHelper": {
            switch (res.action) {
                //异步请求用户昵称，res.data 为正在请求获取的 { accid: "xxx" }
                //准备好数据后请调用 setCallkitUserNickname 接口设置昵称
                case "fetchNickname": {
                    jsBridge.yxRtc.setCallkitUserNickname({
                        accid: res.data.accid,
                        nickname: "一门 Callkit 测试"
                    });
                    break;
                }
                //异步请求用户头像，res.data 为正在请求获取的 { accid: "xxx" }
                //准备好数据后请调用 setCallkitUserAvatar 接口设置头像
                case "loadAvatar": {
                    jsBridge.yxRtc.setCallkitUserAvatar({
                        accid: res.data.accid,
                        avatar: "https://www.yimenapp.com/assets/trtc/a.png"
                    });
                    break;
                }
            }
            break;
        }
        //通讯录标题栏
        case "ContactListTitleBar": {
            switch (res.action) {
                //点击了右侧图标
                //打开通讯录时需提供 titleBarRightIcon 才会有此回调，否则为系统默认行为
                case "titleBarRightClick": {
                    jsBridge.toast("Contact titleBarRightClick");
                    break;
                }
                //点击了右2图标
                //打开通讯录时需提供 titleBarRight2Icon 才会有此回调，否则为系统默认行为
                case "titleBarRight2Click": {
                    jsBridge.toast("Contact titleBarRight2Click");
                    break;
                }
            }
            break;
        }
        //会话列表标题栏
        case "ConversationListTitleBar": {
            switch (res.action) {
                //点击了左侧图标
                //打开会话列表时需提供 titleBarLeftIcon 才会有此回调，否则为系统默认行为
                case "titleBarLeftClick": {
                    jsBridge.toast("Conversation titleBarLeftClick");
                    break;
                }
                 //点击了右侧图标
                //打开会话列表时需提供 titleBarRightIcon 才会有此回调，否则为系统默认行为
                case "titleBarRightClick": {
                    jsBridge.toast("Conversation titleBarRightClick");
                    break;
                }
                //点击了右2图标
                //打开会话列表时需提供 titleBarRight2Icon 才会有此回调，否则为系统默认行为
                case "titleBarRight2Click": {
                    jsBridge.toast("Conversation titleBarRight2Click");
                    break;
                }
            }
            break;
        }
    }
    //此函数仅用于显示回调参数在本 DEMO 页面上
    showResult({
        event: event,
        res  : res
    });
});

//请拉到页面底部查看回调数据信息
$('html,body').animate({ scrollTop: $('#view').offset().top }, 500);

/**
回调参数说明：
event  //事件代码，字符串类型
res    //事件数据，JSON 对象
{
  action  //事件名称，字符串类型
  data    //事件参数
}
**/

removeListener 移除监听器

//移除监听器，不会再收到回调通知
//在需要时可重新调用 setListener
jsBridge.yxRtc.removeListener();

网易云信 RTC 实时音视频通话

singleCall 1 对 1 通话

云信 IM 账号的 accid:

通话类型 callType:

推送标题 pushConfig.title:

推送内容 pushConfig.content: 

jsBridge.yxRtc.singleCall({
    //云信 IM 账号的 accid
    accid: "{{singleCall.accid}}",
    //通话类型
    callType: "{{singleCall.callType}}",
    //可选，推送
    pushConfig: {
        //标题
        title: "{{singleCall.pushConfig.title}}",
        //内容
        content: "{{singleCall.pushConfig.content}}"
    }
}, function(success, res) {
    if (!success) {
        alert("失败" + JSON.stringify(res));
    }
});

监听回调数据：

全部示例
Copyright © 2025 WebApp快捷打包