tencent cloud

Feedback

Integrating TUICalling (Web)

Last updated: 2022-09-26 10:11:56

    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.
    explain
    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.
    explain
    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.
    explain
    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()
    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.
    explain
    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.
    Firewall restrictions may cause audio/video calls to fail. To avoid this, add the ports and domains specified in Firewall Restrictions to the allowlist of your firewall.
    Supported platforms: Currently, this solution supports the following platforms:
    OS
    Browser
    Minimum 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+
    explain
    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:
    Scenario
    Protocol
    Receive (Playback)
    Send (Publish)
    Share Screen
    Remarks
    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