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

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

♦ JS-SDK 引用方式：

♦ 普通网页 script 方式加载：下载最新版 jsBridge-v20240419.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:

是否使用自定义用户信息，如果启用请务必参考示例处理 setListener 的 fetchUserInfo 事件
useCustomUserInfoDelegate:

小米推送 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: 

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}},
    //是否使用自定义用户信息，如果启用请务必参考示例处理 setListener 的 fetchUserInfo 事件
    useCustomUserInfoDelegate: {{init.useCustomUserInfoDelegate}},
    //第三方厂商通道离线推送配置
    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}}"
    }
}, 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: 

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}}
}, 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: 

//需在 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: 

//需在 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) {
        //用户信息
        //初始化 init 时需启用 useCustomUserInfoDelegate 才会有此回调事件
        case "CustomUserInfoDelegate": {
            switch (res.action) {
                //异步请求用户信息，res.data 为正在请求获取的 accid 数组
                //准备好用户信息后请调用 setUserInfo 接口设置用户信息
                case "fetchUserInfo": {
                    const DemoUsers = {
                        ym1: {
                            accid: "ym1",
                            nickname: "一门1",
                            avatar: "https://www.yimenapp.com/assets/trtc/a1.png"
                        },
                        ym2: {
                            accid: "ym2",
                            nickname: "一门2",
                            avatar: "https://www.yimenapp.com/assets/trtc/a2.png"
                        }
                    };
                    //正在请求获得的 accid 列表
                    const accids = res.data;
                    /* 示例
                    fetch(...).then(() => {
                        jsBridge.yxRtc.setUserInfo(...)
                    });
                    */
                    const users = [];
                    accids.forEach(function(accid) {
                        const user = DemoUsers[accid];
                        users.push(user ? user : {
                            accid: accid,
                            nickname: '未知昵称',
                            avatar: 'https://www.yimenapp.com/assets/trtc/a.png'
                        });
                    });
                    jsBridge.yxRtc.setUserInfo({
                        users: users
                    });
                    break;
                }
            }
            break;
        }
        //登录 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 © 2024 WebApp快捷打包