关于TRTC(实时音视频通话模式)在我司的实践

TRTC

腾讯实时音视频（Tencent Real-Time Communication，TRTC）将腾讯21年来在网络与音视频技术上的深度积累，以多人音视频通话和低延时互动直播两大场景化方案，经过腾讯云服务向开发者开放，致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。

---

TRTC流程图

加入房间

建立流

this.client = TRTC.createClient({
    mode: 'videoCall',
    sdkAppId,
    userId,
    userSig
});

• mode: 实时音视频通话模式，设置为‘videoCall’，互动直播模式，设置为'live'
• sdkAppId: 您从腾讯云申请的 sdkAppId
• userId: 用户 ID，随机生成，一个房间内不容许重复的userId
• userSig: 用户签名，基于后台算法生成，防盗刷

加入

this.client
    .join({ roomId })
    .catch(error => {
        console.error('进房失败 ' + error);
    })
    .then(() => {
        console.log('进房成功');
    });

• roomId：后台生成的房间Id，不能重复

发布本地流

本地推流

this.localStream = TRTC.createStream({ userId: this.userId, audio: true, video: true });

• userId: 用户 ID，随机生成，一个房间内不容许重复的userId
• audio: 是否从麦克风采集音频
• video: 是否从摄像头采集视频

初始化本地音视频流

this.localStream
    .initialize()
    .catch(err => {
        console.error('初始化本地流失败 ' + error);
    })
    .then((res) => {
        console.log('初始化本地流成功');
        this.localStream.play('localVideo');
    });

• localVideo: 绑定的div id

发布

this.client
    .publish(this.localStream)
    .catch(err => {
        console.error('本地流发布失败 ' + error);
    })
    .then((res) => {
        console.log('本地流发布成功');
    });

• 本地流发布成功以后，能够注册本地推流函数，每三秒执行一次，处理异常状况。

订阅远端流

远端流增长

this.client.on('stream-added', event => {
    this.remoteStream = event.stream;
    //订阅远端流
    this.client.subscribe(this.remoteStream);
});

远端流订阅

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;');
    // 播放远端流
    this.remoteStream.play(`remoteStream-${this.id}`);
});

• 能够在远端流监听成功以后，注册远端流状态变化函数，处理异常状况。

退出

取消发布本地流

this.client.unpublish(this.localStream)
    .catch((err) => {
        console.log('error', 'unpublish error：' + err);
    })
    .then((res) => {
        // 取消发布本地流成功
        console.log('log', 'unpublish error：' + res);
    });

退出房间

this.client.leave();

异常处理

本地流监听

// 每隔3秒获取本地推流状况
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);

• 可在本地流发布成功后，注册本地推流变化函数，处理异常状况
• bytesSent: 若是发送单位为0，则表示本地断网
• 公式: 目前发送字节数 - 上一次发送字节数 / 3000

远端流监听

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 = '当前通话，对方网络良好';
            // }

            // if(this.agentId == userId && bytesReceived >= 60 && bytesReceived <= 119) {
            //     title = '当前通话，对方网络通常';
            // }

            // if(this.agentId == userId && bytesReceived >= 20 && bytesReceived <= 59) {
            //     title = '当前通话，对方网络不佳';
            // }

            // if(this.agentId == userId) {
            //     Taro.showToast({
            //         title,
            //         icon: 'none',
            //         duration: 1000
            //     });
            //     this.bytesReceived =  stats[userId].bytesReceived;
            // }
        }
    });
}, 3000);

• bytesReceived: 若是接受单位为0，则表示对方断网
• 可在远端流监听成功以后，注册远端流状态变化函数，处理异常状况
• 公式: 目前接收字节数 - 上一次接收字节数 / 3000

目前经过TRTC的事件通知，搭配Socket，能作到对异常处理有较好的支持。

TRTC兼容性

Android(H5)

• Android摄像头不匹配，好比，华为手机三个后置加一个前置，调用TRTC的获取摄像头接口，返回的倒是6个，而且没有Label标注那个是后置，那个是前置，厂商问题，须要特殊适配。
• Android上必须使用微信游览器打开H5页面，其余游览器会偶尔崩溃以及其余问题(猜想微信游览器作了适配)。
• 华为P30部分机型，存在微信游览器环境下没有默认打开腾讯X5内核，须要进行特殊处理。打开方案：一、能够在手机设置、应用管理、微信、麦克风和摄像头权限从新开启。二、经过扫描X5内核开启二维码，引导开启。不然会发布流失败，由于X5内核关闭，致使没有权限获取。
• TRTC对大部分机型可以有较好的支持。

iOS(H5)

• 必须使用Safari游览器，其余游览器会出现各类问题。
• 须要用户手动触发播放，这时候须要在video组件上加上autoplay、muted、playsinline、controls(SDK，4.0.0版本如下)

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

• 切换先后置摄像头须要根据Label标签进行区分，获取先后置摄像头的deviceId，切换流程以下:

  一、获取摄像头

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

  二、选择摄像头

  this.localStream.switchDevice('video', deviceId)
      .catch(err => {
          console.log('error', 'switchDevice error：' + err);
      })
      .then((res) => {
          console.log('log', 'switchDevice success' + res);
      });

小程序

• 小程序的异常机制比较难作，由于没有成员离开事件通知，目前咱们的解决方案是判断当前房间人数，咱们房间只会有两我的。

  TRTC Issue回答

• React技术栈(我只使用了Taro)可以支持视频播放，但推荐更好的Vue技术栈，由于Vue有官方封装的组件。
• 手机兼容性比较好，微信环境加持。

云端混流

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

经过http://fcgi.video.qcloud.com/common_access接口，咱们可以完美的监听房间内发生的状况，录制好的视频，会上传到腾讯的云点播平台，同时也支持客户自行导出。