What is the TRTC

Tencent Real-time Communication (TRTC) is open to developers through Tencent cloud services with the two scenarios of multi-person audio and video calls and low-delay interactive live broadcasting, which integrates Tencent’s 21 years of deep accumulation in network and audio and video technologies. Committed to helping developers quickly build low-cost, low latency, high-quality audio and video interactive solutions.

TRTC flowchart

To join the room

Create a flow

this.client = TRTC.createClient({
    mode: 'videoCall',
    sdkAppId,
    userId,
    userSig
});
Copy the code
  • Mode: Real-time audio and video call mode"VideoCall", interactive live mode, set to'live'
  • SdkAppId: You applied from Tencent CloudsdkAppId
  • UserId: the userId is randomly generated and cannot be repeated in a roomuserId
  • UserSig: user signature, generated based on background algorithm, anti-theft brush

join

This.client.join ({roomId}). Catch (error => {console.error(' failed to enter the room '+ error); }). Then (() => {console.log(' enter room successfully '); });Copy the code
  • RoomId: indicates the Id of a room generated in the background

Publish local streams

Push the local flow

this.localStream = TRTC.createStream({ userId: this.userId, audio: true, video: true });
Copy the code
  • UserId: the userId is randomly generated and cannot be repeated in a roomuserId
  • Audio: Indicates whether to collect audio from the microphone
  • Video: Indicates whether to collect videos from the camera

Initialize the local audio and video stream

This.localstream.initialize (). Catch (err => {console.error(' failed to initialize localStream '+ error); }). Then ((res) => {console.log(' initialized local stream successfully '); this.localStream.play('localVideo'); });Copy the code
  • LocalVideo: bindingdiv id

release

This.client.publish (this.localstream). Catch (err => {console.error(' localStream failed to publish '+ error); }). Then ((res) => {console.log(' Local stream published successfully '); });Copy the code
  • After a local stream is published successfully, you can register a local stream push function that executes every three seconds to handle exceptions.

Subscribe to the remote stream

The remote stream increases

this.client.on('stream-added', event => { this.remoteStream = event.stream; // subscribe to the remoteStream this.client.subscribe(this.remotestream); });Copy the code

Remote stream subscription

This.client. on('stream-subscribed', event => {console.log('log', 'onRemoteStreamUpdate: '+ event); this.remoteStream = event.stream; this.id = this.remoteStream.getId(); const remoteVideoDom = document.querySelector('#remoteVideo'); if(! document.querySelector(`#remoteStream-${this.id}`)) { const div = document.createElement('div'); div.setAttribute('style', 'position: absolute; right: 0; left: 0; top: 0; width: 100%; height: 100%'); div.setAttribute('id', `remoteStream-${this.id}`); remoteVideoDom.appendChild(div); } const videoLoading = document.querySelector('#video-loading'); videoLoading.setAttribute('style', 'display: none; '); Remotestream. play(' remoteStream-${this.id} '); });Copy the code

You can register the remote flow state change function to handle exceptions after the remote flow listening succeeds.

exit

Cancel publishing a local stream

This.client.unpublish (this.localstream). Catch ((err) => {console.log('error', 'unpublish error: '+ err); }). Then ((res) => {console.log('log', 'unpublish error: '+ res); });Copy the code

Out of the room

this.client.leave();
Copy the code

Exception handling

Local stream listening

/ / push every 3 seconds for the local flow situation this. (localTimer = setInterval () = > {this. Client. GetLocalVideoStats (). Then (stats = > {for (let userId in stats) { console.log(new Date(), 'getLocalVideoStats', 'userId: ' + userId + 'bytesSent: ' + stats[userId].bytesSent + 'local userId' + this.userId); if(this.userId == userId && stats[userId].bytesSent == 0) { this.onEvent('leave'); } const bytesSentSR = (stats[userId].bytesSent - this.bytesSent) / 3000; if(this.userId == userId && bytesSentSR >= 20 && bytesSentSR <= 59) { } if(this.userId == userId) { this.bytesSent = stats[userId].bytesSent; }}}); }, 3000);Copy the code
  • After the local stream is published successfully, the local push stream change function can be registered to handle exceptions
  • BytesSent: The sending unit is0“, the local network is disconnected
  • Formula: Current sent bytes – Last sent bytes / 3000

Remote stream listening

this.remoteTimer = setInterval(() => { this.client.getRemoteVideoStats().then(stats => { for (let userId in stats) { console.log('getRemoteVideoStats', 'userId: ' + userId + ' bytesReceived: ' + stats[userId].bytesReceived + ' packetsReceived: ' + stats[userId].packetsReceived + ' packetsLost: ' + stats[userId].packetsLost); // const bytesReceived = (stats[userId].bytesReceived - this.bytesReceived) / 3000; // let title = ''; // if(this.agentId == userId && bytesReceived >= 120) {// title = 'Current call, good network connection '; // if(this.agentId == userId && bytesReceived >= 60 && bytesReceived <= 119) {// title = 'Current call, the network is normal '; // if(this.agentId == userId && bytesReceived >= 20 && bytesReceived <= 59) {// title = 'Current call, poor network '; // } // if(this.agentId == userId) { // Taro.showToast({ // title, // icon: 'none', // duration: 1000 // }); // this.bytesReceived = stats[userId].bytesReceived; / /}}}); }, 3000);Copy the code
  • BytesReceived: If the received unit is 0, the network is disconnected
  • You can register the remote flow state change function to handle exceptions after the remote flow listening succeeds
  • Formula: Current received bytes – Last received bytes / 3000

At present, through TRTC event notification, with Socket, can achieve better support for exception handling.

TRTC compatibility

Android(H5)

  • Cameras do not match. For example, huawei mobile phone has three rear cameras and one front camera, but 6 cameras are returned when the interface of TRTC is called to obtain the camera, and there is no Label indicating that one is rear camera and the other is front camera. The manufacturer has a problem and special adaptation is required.

  • You have to use wechat explorer to open the H5 page, other browsers occasionally crash and other problems (guess wechat explorer is adapted).

  • For some huawei P30 models, the Tencent X5 kernel is not enabled by default in the wechat browser environment, which requires special treatment. 1. You can restart the phone Settings, application management, wechat, microphone and camera. 2. Open the TWO-DIMENSIONAL code by scanning the X5 kernel and boot it. Otherwise, publishing the stream will fail because the X5 kernel is down and there is no permission to get it.

  • TRTC has good support for most models.

iOS(H5)

  • Safari must be used, other browsers have various issues.

  • Manual user triggered playback required; autoplay, fraternal, Playsinline, Controls (SDK, below 4.0.0) added to video component

<Video
    id="remoteVideo"
    autoplay
    muted
    playsinline
    controls
/>
Copy the code

  • To switch front and rear cameras, distinguish them according to the Label Label and obtain the deviceId of the front and rear cameras. The switching process is as follows:

    1. Get the camera

        TRTC.getCameras().then(devices => {
        this.cameras = devices;
    });
Copy the code

    2. Select the camera

    This. LocalStream. SwitchDevice (' video 'deviceId). The catch (err = > {the console. The log (' error', 'switchDevice error:' + err); }) .then((res) => { console.log('log', 'switchDevice success' + res); });Copy the code

Small program

  • The React stack (I only used Taro) can support video playback, but the better Vue stack is recommended because Vue has officially packaged components.

  • Mobile phone compatibility is better, supported by the wechat environment.

The cloud mixed flow

request({ url: `http://fcgi.video.qcloud.com/common_access?appid=${liveSign.appId}&interface=Mix_StreamV2&t=${liveSign.t}&sign=${liveSi gn.liveSign}`, method: 'POST', headers: { 'content-type': 'application/json', }, body: JSON.stringify(params) }, (error, response, body) => { res.send({errCode: 0}); });Copy the code

By http://fcgi.video.qcloud.com/common_access interface, we can perfect monitor what is happening inside the room, recorded video, uploaded to tencent platform for the cloud on demand, but also support customer to export.

blog

Welcome to my blog