tencent cloud

文档反馈

集成 TUICalling (Web)

最后更新时间:2022-05-09 11:55:05

    组件介绍

    TUICalling 组件是一个开源的音视频组件,帮助您快速在您的桌面浏览器中集成视频通话功能,非常适合用于在线问诊,在线客服,远程理赔等场景中。

    其它平台

    除了 Web 版的 TUICalling,我们同时也推出了 Android、iOS、Flutter、Uniapp 等平台的源代码,其中 Android、iOS 版本的 TUICalling 支持“来电提醒”功能。

    说明:

    • 除了 Web 版的 TUICalling,我们同时也推出了 Android、iOS、Flutter、Uniapp 等平台的源代码,其中 Android、iOS 版本的 TUICalling 支持“来电提醒”功能。
    • 如果您有任何咨询或建议,请联系我们

    组件集成

    步骤一:获取 SdkAppId 和签名密钥

    • 如果您还没有腾讯云账号,请注册一个腾讯云账号。然后跳转到 TRTC 管理控制台中的应用管理界面。
    • 如果您的应用列表为空,可以点击创建应用按钮创建一个新的应用,之后单击应用信息,打开该应用管理界面。在该界面中寻找快速上手页签,就能够看到如下界面:
    • SDKAppID:TRTC 的应用 ID,用于业务隔离,即不同的 SDKAppID 的通话彼此不能互通;
    • Secretkey:TRTC 的应用密钥,需要和 SDKAppID 配对使用,用于签出合法使用 TRTC 服务的鉴权用票据 UserSig,我们会在接下来的步骤五中用到这个 Key。

    步骤二:下载并集成 TRTCCalling 组件

    单击进入 Github ,选择克隆/下载代码,可参考 Web 目录下的实现。

    说明:

    • 从v0.6.0起,需要手动安装依赖 trtc-js-sdktim-js-sdk 以及 tsignaling
    • 为了减小 trtc-calling-js.js 的体积,避免和接入侧已使用的 trtc-js-sdk 和 tim-js-sdk 以及 tsignaling 发生版本冲突,trtc-calling-js.js 将 trtc-js-sdk,tim-js-sdk,tsignaling 打包为外部依赖,在使用前您需要手动安装。
    // npm 方式安装
    npm install trtc-js-sdk --save

    npm install tim-js-sdk --save

    npm install tsignaling --save

    npm install trtc-calling-js --save
    // 如果您需要通过 script 方式使用 trtc-calling-js,需要按顺序引入以下资源

    <script src="./trtc.js"></script>
    <script src="./tim-js.js"></script>
    <script src="./tsignaling.js"></script>
    <script src="./trtc-calling-js.js"></script>

    步骤三:创建 TRTCCalling 对象

    创建 TRTCCalling 对象,并将 SDKAppID 参数设置为您自己的 SDKAppID。

    // 可参考 Web/src/trtc-calling/index.js
    import TRTCCalling from 'trtc-calling-js';
    let options = {
    SDKAppID: 0, // 接入时需要将0替换为您的 SDKAppID
    // 从v0.10.2起,新增 tim 参数
    // tim 参数适用于业务中已存在 TIM 实例,为保证 TIM 实例唯一性
    tim: tim
    };
    const trtcCalling = new TRTCCalling(options);
    

    步骤四:进行登录与事件监听

    // 可参考 Web/src/components/login/index.vue
    trtcCalling.login({
    userID,
    userSig,
    });
    // 可参考 Web/src/App.vue
    export default {
    name: "App",
    components: {
    },
    async created() {
        this.initListener();
    },
    data() {
        return {};
    },
    destroyed() {
        this.removeListener();
    },
    methods: {
        initListener: function() {
            // 远端用户呼叫
            trtcCalling.on(trtcCalling.EVENT.INVITED, this.handleNewInvitationReceived);
            // 远端用户接听
            trtcCalling.on(trtcCalling.EVENT.USER_ACCEPT, this.handleUserAccept);
            // 远端用户拒绝
            trtcCalling.on(trtcCalling.EVENT.REJECT, this.handleInviteeReject);
            // ...
        },
        removeListener: function() {
            trtcCalling.off(trtcCalling.EVENT.INVITED, this.handleNewInvitationReceived);
            trtcCalling.off(trtcCalling.EVENT.USER_ACCEPT, this.handleUserAccept);
            trtcCalling.off(trtcCalling.EVENT.REJECT, this.handleInviteeReject);
        },
        handleNewInvitationReceived: async function(payload) {
        },
        handleUserAccept: function() {
        },
        handleInviteeReject: function() {
        }
    }
    }
    

    步骤五:实现 1v1 通话

    • 主叫方:呼叫某个用户

      // 可参考 Web/src/components/video-call/index.vue 或 Web/src/components/audio-call/index.vue
      trtcCalling.call({
      userID,  //用户 ID
      type: 2, //通话类型,0-未知, 1-语音通话,2-视频通话
      timeout  //邀请超时时间, 单位 s(秒)
      });
      
    • 被叫方:接听新的呼叫

      // 可参考 Web/src/App.vue handleAcceptCall 方法
      // 接听
      trtcCalling.accept();
      // 拒绝
      trtcCalling.reject()
      
    • 打开本地摄像头

      trtcCalling.openCamera()
      
    • 展示远端的视频画面

      trtcCalling.startRemoteView({
      userID, //远端用户 ID
      videoViewDomID //该用户数据将渲染到该 DOM ID 节点里
      })
      
    • 展示本地的预览画面

      trtcCalling.startLocalView({
      userID, //本地用户 ID
      videoViewDomID //该用户数据将渲染到该 DOM ID 节点里
      })
      
    • 挂断

      trtcCalling.hangup()
      

    常见问题

    为什么拨打不通,或者被踢下线?

    组件暂不支持多实例登入,不支持离线推送信令功能,请您确认登入账号的唯一性。

    说明:

    • 多实例:一个 UserID 重复登入,或在不同端登入,将会引起信令的混乱。
    • 离线推送:实例在线才能接收消息,实例离线时接收到的信令不会在上线后重新推送。

    对于环境有哪些要求?

    请使用最新版本的 Chrome 浏览器。目前桌面端 Chrome 浏览器支持 TRTC Web SDK 的相关特性比较完整,因此建议使用 Chrome 浏览器进行体验。

    TRTCCalling 依赖以下端口进行数据传输,请将其加入防火墙白名单,配置完成后,您可以通过访问并体验 官网 Demo 检查配置是否生效。

    • TCP 端口:8687
    • UDP 端口:8000,8080,8800,843,443,16285
    • 域名:qcloud.rtc.qq.com,具体请参见 应对防火墙限制相关
    • 平台支持:目前该方案支持如下平台
      操作系统浏览器类型浏览器最低版本要求
      Mac OS 桌面版 Safari 浏览器 11+
      Mac OS 桌面版 Chrome 浏览器 56+
      Mac OS 桌面版 Firefox 浏览器 56+
      Mac OS 桌面版 Edge 浏览器 80+
      Windows 桌面版 Chrome 浏览器 56+
      Windows 桌面版 QQ 浏览器(极速内核) 10.4+
      Windows 桌面版 Firefox 浏览器 56+
      Windows 桌面版 Edge 浏览器 80+
    说明:

    详细兼容性查询,具体请参见 浏览器支持情况。同时,您可通过 TRTC 检测页面 在线检测。

    • URL 域名协议限制
      应用场景协议接收(播放)发送(上麦)屏幕分享备注
      生产环境 HTTPS 协议 支持 支持 支持 推荐
      生产环境 HTTP 协议 支持 不支持 不支持 -
      本地开发环境 http://localhost 支持 支持 支持 推荐
      本地开发环境 http://127.0.0.1 支持 支持 支持 -
      本地开发环境 http://[本机IP] 支持 不支持 不支持 -
      本地开发环境 file:/// 支持 支持 支持 -

    更多常见问题

    请参见 TRTCCalling Web 相关问题

    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持