tencent cloud

Feedback

Integrating TUICalling (Web)

Last updated: 2022-06-27 15:58:10

    Overview

    TUICalling is an open-source UI component for audio/video communication. You can use it to quickly integrate video call capabilities into your desktop website. It’s ideal for applications such as online medical consultation, online customer service, and remote insurance claim settlement.

    Note:

    All components of TUIKit use two basic PaaS services of Tencent Cloud, namely TRTC and IM. When you activate TRTC, IM and the trial edition of the IM SDK (which supports only 100 DAUs) will be activated automatically. For the billing details of IM, see Pricing.

    Other platforms

    In addition to web, we also provide source code for Android, iOS, and Flutter. The Android and iOS versions support incoming call notifications.

    Note:

    • In addition to web, we also provide source code for Android, iOS, and Flutter. The Android and iOS versions support incoming call notifications.
    • If you have any questions or suggestions, feel free to contact us.

    Integration

    Step 1. Get the SDKAppID and signature key

    • Sign up for a Tencent Cloud account and go to the Application Management page of the TRTC console.
    • If you don’t have an application yet, click Create Application to create an application. Then, click Application Info and select the Quick Start tab to view the SDKAppID and SecretKey.
    • SDKAppID: TRTC application ID, which uniquely identifies an application
    • Secretkey: TRTC application key, which you can use together with SDKAppID to generate a UserSig required to authorize the use of TRTC. You will use this key in step 5.

    Step 2. Import the TRTCCalling component

    Go to GitHub and clone or download the code. Refer to the Web directory.

    Note:

    • Since version 0.6.0, you need to manually install the dependencies trtc-js-sdk, tim-js-sdk, and tsignaling.
    • To reduce the size of trtc-calling-js.js and prevent version conflict between trtc-calling-js.js and the already-in-use trtc-js-sdk, tim-js-sdk or tsignaling, the latter three are packaged as external dependencies, which you need to install manually before use.
    // Import via npm
    npm install trtc-js-sdk --save

    npm install tim-js-sdk --save

    npm install tsignaling --save

    npm install trtc-calling-js --save
    // If you import `trtc-calling-js` via a script, you need to manually import the following resources in the specified order.

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

    Step 3. Create a TRTCCalling object

    Create a TRTCCalling object, setting SDKAppID to the SDKAppID of your application.

    // You can refer to `Web/src/trtc-calling/index.js`
    import TRTCCalling from 'trtc-calling-js';
    let options = {
    SDKAppID: 0, // Replace 0 with your `SDKAppID` when connecting
    // The `tim` parameter is added starting from v0.10.2
    // The parameter guarantees the uniqueness of an existing TIM instance.
    tim: tim
    };
    const trtcCalling = new TRTCCalling(options);
    

    Step 4. Log in to the component and listen for events

    // You can refer to `Web/src/components/login/index.vue`
    trtcCalling.login({
    userID,
    userSig,
    });
    // You can refer to `Web/src/App.vue`
    export default {
    name: "App",
    components: {
    },
    async created() {
        this.initListener();
    },
    data() {
        return {};
    },
    destroyed() {
        this.removeListener();
    },
    methods: {
        initListener: function() {
            // A remote user called.
            trtcCalling.on(trtcCalling.EVENT.INVITED, this.handleNewInvitationReceived);
            // A remote user answered the call.
            trtcCalling.on(trtcCalling.EVENT.USER_ACCEPT, this.handleUserAccept);
            // A remote user rejected the call.
            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() {
        }
    }
    }
    

    Step 5. Make a one-to-one call

    • Caller: Calls a user

      // You can refer to `Web/src/components/video-call/index.vue` or `Web/src/components/audio-call/index.vue`
      trtcCalling.call({
      userID,  // User ID
      type: 2, // Call type. `0`: unknown; `1`: audio call; `2`: video call
      timeout  // Timeout period, in seconds
      });
      
    • Callee: Answers the call

      // You can refer to the `Web/src/App.vue handleAcceptCall` method
      // Answer
      trtcCalling.accept();
      // Reject
      trtcCalling.reject()
      
    • Turn the local camera on

      trtcCalling.openCamera()
      
    • Play the video of the remote user

      trtcCalling.startRemoteView({
      userID, // Remote user ID
      videoViewDomID // The user’s data will be rendered in this DOM node.
      })
      
    • Show local video preview

      trtcCalling.startLocalView({
      userID, // Local user ID
      videoViewDomID // The user’s data will be rendered in this DOM node.
      })
      
    • Hang up

      trtcCalling.hangup()
      

    FAQs

    Why can’t I get through to a user? Why am I kicked offline?

    The component does not support login of multiple instances or offline signaling. Please make sure that your current login is unique.

    Note:

    • Multiple instances: A user ID logs in multiple times or on different devices, which disrupts signaling.
    • Offline signaling: Only online instances can receive a message. Messages sent to offline instances will not be sent again when the instances go online.

    What are the environment requirements?

    The desktop version of Chrome offers better support for the features of the TRTC web SDK; therefore, Chrome is recommended for the demo.

    TRTCCalling uses the following ports and domain name for data transfer, which should be added to the allowlist of the firewall. After configuration, please use the official demo to check whether the configuration has taken effect.

    • TCP port: 8687
    • UDP ports: 8000, 8080, 8800, 843, 443, 16285
    • Domain name: qcloud.rtc.qq.com. For details, see Firewall Restrictions.
    • Supported platforms: Currently, this solution supports the following platforms:
      OS BrowserMinimum Browser Version Requirement
      macOS Safari (desktop) 11+
      macOS Chrome (desktop) 56+
      macOS Firefox (desktop) 56+
      macOS Edge (desktop) 80+
      Windows Chrome (desktop) 56+
      Windows QQ Browser (desktop, WebKit core) 10.4+
      Windows Firefox (desktop) 56+
      Windows Edge (desktop) 80+
    Note:

    For more information on browser compatibility, see Browsers Supported. You can also run an online test using the TRTC compatibility check page.

    • URL protocol support:
      ScenarioProtocolReceive (Playback)Send (Publish)Share ScreenRemarks
      Production HTTPS Supported Supported Supported Recommended
      Production HTTP Supported Not supported Not supported -
      Local development http://localhost Supported Supported Supported Recommended
      Local development http://127.0.0.1 Supported Supported Supported -
      Local development http://[local IP] Supported Not supported Not supported -
      Local development file:/// Supported Supported Supported -

    More

    For other FAQs, see TRTCCalling for Web.

    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support