О практике TRTC (режим аудио и видеозвонков в реальном времени) в нашей компании

внешний интерфейс
О практике TRTC (режим аудио и видеозвонков в реальном времени) в нашей компании

Что такое ТРТК

Tencent Real-Time Communication (TRTC) использует 21-летний опыт Tencent в области сетевых и аудио- и видеотехнологий и предоставляет два решения на основе сценариев для многопользовательских аудио- и видеовызовов и интерактивных прямых трансляций с малой задержкой через Tencent Cloud. Услуги.Открытая для разработчиков, она стремится помочь разработчикам быстро создавать недорогие, с малой задержкой, высококачественные интерактивные аудио- и видеорешения.

Блок-схема ТРТК

f3ba68fa7e39fe64af92ff99f56b77a

присоединиться к комнате

Создать поток

this.client = TRTC.createClient({
    mode: 'videoCall',
    sdkAppId,
    userId,
    userSig
});
  • режим: режим аудио- и видеовызова в реальном времени, установлен на‘videoCall’, интерактивный режим прямой трансляции, установлен на'live'
  • sdkAppId: тот, на который вы подали заявку в Tencent Cloud.sdkAppId
  • userId: идентификатор пользователя, сгенерированный случайным образом, дубликаты не допускаются в комнате.userId
  • userSig: подпись пользователя, сгенерированная на основе фонового алгоритма, щетка для защиты от кражи

Присоединяйся

this.client
    .join({ roomId })
    .catch(error => {
        console.error('进房失败 ' + error);
    })
    .then(() => {
        console.log('进房成功');
    });
  • Roomid: Идентификатор комнаты, сгенерированный в фоновом режиме, не может быть повторен

Опубликовать локальный поток

локальный толчок

this.localStream = TRTC.createStream({ userId: this.userId, audio: true, video: true });
  • userId: идентификатор пользователя, сгенерированный случайным образом, дубликаты не допускаются в комнате.userId
  • аудио: записывать ли звук с микрофона
  • видео: захватывать ли видео с камеры

Инициализировать локальные аудио- и видеопотоки

this.localStream
    .initialize()
    .catch(err => {
        console.error('初始化本地流失败 ' + error);
    })
    .then((res) => {
        console.log('初始化本地流成功');
        this.localStream.play('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);
  • После того, как локальный поток будет успешно опубликован, вы можете зарегистрировать функцию изменения локального push-потока для обработки исключений.
  • 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может сделать лучшую поддержку для обработки исключений.

ТРТК-совместимость

Android(H5)

  • Камеры не совпадают. Например, если у телефона Huawei три задние и одна передняя, ​​позвонитеTRTC, но возвращает интерфейс камеры6и нетLabelРазметить где зад, где перед, проблема производителя, требует специальной адаптации.

  • Необходимо использовать браузер WeChat для открытияH5страница, другие браузеры будут время от времени падать и возникать другие проблемы (предположим, что браузер WeChat был адаптирован).

  • Для некоторых моделей Huawei P30 Tencent по умолчанию не открывается в среде браузера WeChat.X5ядро, которое требует специальной обработки. Открыть схему: 1. Переоткрыть можно в настройках телефона, управление приложениями, WeChat, разрешения микрофона и камеры. 2. СканированиемX5Ядро включает QR-код, и включается загрузка. В противном случае публикация потока не удастся, потому чтоX5Ядро выключается, в результате чего нет разрешения на получение.

  • TRTCМожет иметь лучшую поддержку для большинства моделей.

iOS(H5)

  • должен использоватьSafariБраузеры, другие браузеры будут иметь различные проблемы.

  • Пользователю необходимо вручную запустить воспроизведение, в это время необходимоvideoдобавить компонентautoplay,muted,playsinline,controls(SDK ниже версии 4.0.0)

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

  • Переключение передней и задней камер должно быть основано наLabelНаклейки, чтобы различать, получить переднюю и заднюю камерыdeviceId, процесс переключения выглядит следующим образом:

    1. Получите камеру

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

    2. Выберите камеру

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

Апплеты

  • ReactСтек технологий (я использовал толькоTaro) может поддерживать воспроизведение видео, но рекомендую лучшеVueтехнологический стек, потому чтоVueЕсть официально упакованные компоненты.

  • Совместимость мобильных телефонов относительно хорошая, и среда WeChat благословлена.

смешивание облаков

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интерфейс, мы можем отлично следить за обстановкой в ​​помещении, а записанное видео будет загружаться на облачную платформу Tencent по запросу, а также поддерживает экспорт клиентов самостоятельно.

блог

Добро пожаловать, чтобы следовать за мнойблог

Категории