Realize two-person conversation

Realize two-person conversation

Prerequisite

  1. Subject to browser security protocol restrictions, it is recommended to use http://localhost during development and https://[domain name] for production environment to access the page, refer to the documentationPage access protocol description .
  2. In order to avoid firewall security policies restricting normal TRTC data transmission, you need to refer to the document Firewall policy should be set.
  3. In order to ensure the call experience, it is recommended to conduct device detection and browser compatibility detection before officially starting an audio and video call. You can refer to the document Browser compatibility information.

SDK integration

NPM method

  1. You can use npm to install it in your project tuicall-engine-webrtc. 

    npm install tuicall-engine-webrtc --save

  2. Import the module in the project script. 

    import { TUICallEngine, TUICallEvent, TUICallType } from "tuicall-engine-webrtc";

Script mode

Add the following code to your web page:

<script src="./trtc.js"></script>
<script src="./tim-js.js"></script>
<script src="./tsignaling-js.js"></script>
<script src="./tuicall-engine-webrtc.js"></script>
<script>
  const { TUI CallEngine, TUICallEvent, TUICallType } = window['tuicall-engine-webrtc'];
</script>

Download address of the above files: trtc.js,tim-js.js, tsignaling.js, tuicall-engine-webrtc.js

SDK usage

1. Create TUICallEngine instance

let tuiCallEngine = TUICallEngine.createInstance({
  SDKAppID: 0, // You need to replace 0 with the SDKAppID of your cloud communication application when accessing
  // tim: tim // The tim parameter is applicable to TIM instances that already exist in the business and needs to be passed in to ensure the uniqueness of the TIM instance.
});

Parameter description:

  • SDKAppID: SDKAppID of cloud communication application, visit < target="_blank" href="https://web.sdk.qcloud.com/component/trtccalling/doc/TUICallEngine/web/tutorial-30-%E5 %BC%80%E9%80%9A%E9%9F%B3%E8%A7%86%E9%A2%91%E5%BA%94%E7%94%A8.html">Open audio and video applications View details.
  • tim: Optional. If you don’t have one, it will be automatically created by internal code.

2. Log in to TUICallEngine

try {
await tuiCallEngine.login({ userID: "your userID", userSig: "your userSig" });
  console.log("Login to TUICallEngine successfully");
} catch (error) {
  console.error("Login to TUICallEngine failed" + error);
}

Parameter description:

  • userID: User ID, specified by you, string type, only allowed to contain English letters (az and AZ), numbers (0-9), hyphens (-) and underscores (_).
  • userSig: user signature, refer to Get the login signature userSig.

3. Initiate a call

It is recommended to write it in a function, and the business side will trigger it when needed (such as executing when a button is clicked). 

async function startVideoCall() {
  try {
    await tuiCallEngine.call({ userID: "call userID", type: TUICallType.VIDEO_CALL });
    console.log("Call successfully", userID);
  } catch (error) {
    console.error("Call failed" + error);
  }
}

Parameter description:

  • userID: The user ID you want to call must be an existing user, refer to Create userID.

  • type: video call is TUICallType.VIDEO_CALL, voice call is TUICallType.AUDIO_CALL.

4. Monitor whether the other party accepts the call

After making a call, you need to add event monitoring so that you can know whether the other party accepts your call. 

tuiCallEngine.on(TUICallEvent.USER_ACCEPT, handleUserAccept); // The other party accepted the call
tuiCallEngine.on(TUICallEvent.REJECT, handleReject); // The other party rejected the call
function handleUserAccept(event) {
  const { userID } = event;
  console.log(`${userID} has accepted this call.`);
}
function handleReject(event) {
  alert(`${userID} has rejected this call.`);
}

5. Monitor whether there is an incoming call

Add event monitoring so that you can receive the call request from the other party and implement operations such as answering or rejecting. 

tuiCallEngine.on(TUICallEvent.INVITED, handleInvited); // Receive call request
function handleInvited(event) {
  const { sponsor, isFromGroup, inviteData: { callType } } = event;
  const callTypeString = callType === TUICallType.VIDEO_CALL ? "Video" : "Voice";
  console.log(`${callTypeString} call from ${sponsor}`);
}

6. After listening to the incoming call, choose to accept or hang up

After receiving the call monitoring event above, you can choose to answer or hang up. In most cases, this step is also triggered by the button on your page. 

async function acceptCall() {
try {
  await tuiCallEngine.accept(); // Answer the call
  // await tuiCallEngine.reject(); can also be rejected
  console.log("Call connected successfully");
} catch (error) {
  console.error("Failed to connect the call" + error);
}
}

7. Open your own camera and render the other party’s camera screen

As the caller, after the call is dialed, that is, await tuiCallEngine.call();, you can open your own camera for preview.

As the callee, after accepting the other party's invitation, that is, in the await tuiCallEngine.accept(); function, you can open your own camera for preview, such as:

// Caller opening time
async function startVideoCall() {
try {
  const callUserIDInputElement = document.getElementById("call-userID");
  await tuiCallEngine.call({ userID: callUserIDInputElement.value, type: TUICallType.VIDEO_CALL });
  console.log("Call successfully", userID);
  //Open your own camera
  await tuiCallEngine.openCamera("local");
} catch (error) {
  console.error("Failed to make a call or turn on the camera" + error);
}
}

// Callee opening time
async function acceptCall() {
try {
  await tuiCallEngine.accept(); // Answer the call
  // await tuiCallEngine.reject(); can also be rejected
  console.log("Call connected successfully");
  //Open your own camera
  await tuiCallEngine.openCamera("local");
} catch (error) {
  console.error("Failed to connect the phone or turn on the camera" + error);
}
}

Among them, the parameter "local" represents rendering the local camera to the div with the id of local on the page, such as in the page :

<div id="local" style="width: 400px; height: 400px"></div>

After listening to the event TUICallEvent.USER_VIDEO_AVAILABLE, if the value in event is true, it means that the other party's camera is available and you can render. The other party’s camera screen, sample code:

tuiCallEngine.on(TUICallEvent.USER_VIDEO_AVAILABLE, handleUserVideoAvailable);
async function handleUserVideoAvailable(event) {
const { userID, isVideoAvailable } = event;
if (isVideoAvailable === true) { // The other party's camera can render
await tuiCallEngine.startRemoteView({ userID, videoViewDomID: "remote" });
}
}

Similarly, the parameter "remote" represents rendering the local camera to the div with the id remote on the page, such as in the page :

<div id="remote" style="width: 400px; height: 400px"></div>

8. Add other method events

At this point, this part of the code can already make a very basic two-person audio and video call. If you want your project to be more usable, you need to add more events that you need to monitor, such as call timeout, other party's microphone turning off, etc. etc. For a detailed event list, please refer to: API event details.

If you need other methods, such as hanging up the hangup, you can find it in the API list.

Successful screenshot

image

Complete code

HTML:

<!-- Insert code on the page-->
userID: <input id="userID" type="text" />
userSig: <input id="userSig" type="text" />
<button onclick="login()"> login </button>
<hr />
Call someone: <input id="call-userID" type="text" />
<button onclick="startVideoCall()"> call </button>
<hr />
<button id="accept" onclick="acceptCall()" disabled> accept </button>
<hr />
<div id="local" style="width: 400px; height: 400px"></div>
<div id="remote" style="width: 400px; height: 400px"></div>

JavaScript:

const { TUICallEngine, TUICallEvent, TUICallType } = window['tuicall-engine-webrtc'];
let tuiCallEngine = TUICallEngine.createInstance({
  SDKAppID: 0, // You need to replace 0 with the SDKAppID of your cloud communication application when accessing
  // tim: tim // The tim parameter is applicable to TIM instances that already exist in the business and needs to be passed in to ensure the uniqueness of the TIM instance.
});
async function login() {
  try {
  const userIDInputElement = document.getElementById("userID");
    const userSigInputElement = document.getElementById("userSig");
    await tuiCallEngine.login({
      userID: userIDInputElement.value,
      userSig: userSigInputElement.value
    });
    console.log("Login to TUICallEngine successfully");
  } catch (error) {
    console.error("Login to TUICallEngine failed" + error);
  }
}
async function startVideoCall() {
  try {
    const callUserIDInputElement = document.getElementById("call-userID");
    await tuiCallEngine.call({ userID: callUserIDInputElement.value, type: TUICallType.VIDEO_CALL });
    console.log("Call successfully", userID);
    //Open your own camera
    await tuiCallEngine.openCamera("local");
  } catch (error) {
    console.error("Failed to make a call or turn on the camera" + error);
  }
}
tuiCallEngine.on(TUICallEvent.USER_ACCEPT, handleUserAccept); // The other party accepted the call
tuiCallEngine.on(TUICallEvent.REJECT, handleReject); // The other party rejected the call
function handleUserAccept(event) {
  const { userID } = event;
  console.log(`${userID} has accepted this call.`);
}
function handleReject(event) {
  alert(`${userID} has rejected this call.`);
}
tuiCallEngine.on(TUICallEvent.INVITED, handleInvited); // Receive call request
async function handleInvited(event) {
  const { sponsor, isFromGroup, inviteData: { callType } } = event;
  const callTypeString = callType === TUICallType.VIDEO_CALL ? "Video" : "Voice";
  console.log(`${callTypeString} call from ${sponsor}`);
  document.getElementById("accept").disabled = false;
}
async function acceptCall() {
  try {
    await tuiCallEngine.accept(); // Answer the call
    // await tuiCallEngine.reject(); can also be rejected
    console.log("Call connected successfully");
    //Open your own camera
    await tuiCallEngine.openCamera("local");
  } catch (error) {
  console.error("Failed to connect the phone or turn on the camera" + error);
  }
}
tuiCallEngine.on(TUICallEvent.USER_VIDEO_AVAILABLE, handleUserVideoAvailable);
async function handleUserVideoAvailable(event) {
  const { userID, isVideoAvailable } = event;
  try {
    if (isVideoAvailable === true) { // The other party's camera can render
      await tuiCallEngine.startRemoteView({ userID, videoViewDomID: "remote" });
      console.log("Rendering the other party's camera successfully");
    }
  } catch (error) {
    console.error("Failed to open camera" + error);
  }
}

Contact us

If you encounter problems during the access implementation process, you are welcome to enter the IM community for consultation and feedback.