小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

前言

疫情反反复复，给人的生活带来了极大的影响，学校又去不了，只能线上教育，线上上课。因此发现了一款很优秀的产品（客服很deng）。

音视频通信

音视频通信 RTC（Real-Time Communication）是阿里云覆盖全球的实时音视频开发平台，依托核心音视频编解码、信道传输、网络调度技术，提供高可用、高品质、超低延时的音视频通信服务，让用户快速搭建多端实时应用，适用于在线教育、视频会议、互动娱乐、音视频社交等场景。

场景组件体验

help.aliyun.com/document_de…

入门概述

help.aliyun.com/document_de…

开通完以后，到场景组件体验中的 Demo源码下载 下载源码，抄他就完了。。。

WebRtc

vue项目中需要集成 Aliyun WebRtc SDK

首先需要下载 aliyun-webrtc-sdk

npm install aliyun-webrtc-sdk -S

初始化sdk 创建AliRtcEngine实例。我使用单列模式，你可以参照官网列子创建

export default class RTCClient {

  constructor() {
    this._clinet = new AliRtcEngine();
  }

/**
 * 获取实例
 */
static get instance() {
  if (!RTCClient._instance) {
    RTCClient._instance = new RTCClient();
  }
  return RTCClient._instance;
}

}

调用：

RTCClient.instance

检测浏览器是否支持webrtc

/**
 * isSupport webrtc能力检测
 */
_isSuppert() {
  return new Promise((resolve, reject) => {
    // 线上环境必须使用HTTPS协议。您可以添加{isDebug: true}参数进行localhost（本地主机）调试跳过HTTPS协议检测。
    //检测浏览器是否支持Web SDK。
    this._clinet.isSupport().then((re) => {
      resolve(re);
    }).catch(err => {
      console.error(err);
      reject(err);
    })
  })
}

加入频道

// 加入频道
// aliWebrtc.joinChannel({
//     userid,         // 用户ID
//     channel,        // 频道
//     appid,          // 应用ID
//     nonce,          // 随机码
//     timestamp,      // 时间戳
//     gslb,           // gslb服务地址
//     token,          // 令牌
// },displayName)
this._clinet.joinChannel(authInfo, userName).then((re) => {
  this._isInCall = true;
  this._clinet.configLocalAudioPublish = false;
  this._clinet.configLocalCameraPublish = false;
  this._clinet.configLocalAudioPublish = false;
  resolve(supRe);
}).catch(err => {
  reject( err);
  console.error(err);
})

开启预览，推送视频

/**
 * 预览
 * @param {*} video
 */
startPreview(video) {
  return new Promise((resolve, reject) => {
    //startPreview：预览本地摄像头 stopPreview：结束预览本地摄像头
    this._clinet.startPreview(video).then(() => {
      this._isPreview = true;
      setTimeout(() => {
        resolve();
      }, 10)
    }).catch(err => {
      reject(err);
      console.error(err);
    })
  })
}

publish() {
  return new Promise((resolve, reject) => {
    this._clinet.publish().then((res) => {
      resolve();
      // console.error(res);
    }).catch(err => {
      reject(err);
      console.error(err);
    })
  })
}

/**
 * 调用sdk 订阅
 * @param {*} userId
 */
async _subscribe(userId) {
  return this._clinet.subscribe(userId);
}

/**
 * 为远端的视频设置渲染窗口以及绘制参数
 * @param {*} userId 用户ID
 * @param {*} video html中用于显示stream对象的video元素
 * @param {*} streamType 1表示摄像头流（大流和小流），2表示屏幕分享流
 */
setDisplayRemoteVideo(userId, video, streamType) {
  this._clinet.setDisplayRemoteVideo(userId, video, streamType);
}

其余的可以参考API

阿里云音视频通信RTC

前言

音视频通信

场景组件体验

入门概述

WebRtc