分析腾讯的实时音视频web端demo代码

首先我们要会引入TRTC Web SDK

下载地址：https://cloud.tencent.com/document/product/647/16863#script-.E9.9B.86.E6.88.90

腾讯流播放器文档地址：https://cloud.tencent.com/document/product/881/20207

腾讯点播播放器与超级播放器：使用文档：https://cloud.tencent.com/document/product/266/14424

腾讯点播播放器：开发文档：https://cloud.tencent.com/document/product/266/14603

web端实时通讯IM：https://cloud.tencent.com/document/product/269/37411

目前还不知道cdn地址

demo中的index.html中说的很明确，哪些是第三方库，哪些是脚本

先看一下index.html的代码：

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Material Design for Bootstrap fonts and icons -->
  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> -->

  <!-- Material Design for Bootstrap CSS -->
  <link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/toastify.min.css">
  
  <title>TRTC Web SDK Samples - 基础音视频通话</title>
</head>

<body>
  <nav class="navbar navbar-light fixed-top rtc-primary-bg">
    <h5>基础音视频通话</h5>
  </nav>
  <form id="form">
    <div class="custom-container container">
      <div class="row">
        <div class="custom-row-container">
          <div class="row">
            <div class="col-ms">
              <div class="card custom-card">
                <div class="form-group">
                  <label for="userId" class="bmd-label-floating">用户ID:</label>
                  <input type="text" class="form-control" name="userId" id="userId">
                </div>
                <div class="form-group bmd-form-group">
                  <label for="roomId" class="bmd-label-floating">房间号:</label>
                  <input type="text" class="form-control" name="roomId" id="roomId">
                </div>
                <div class="form-group bmd-form-group">
                  <button id="join" type="button" class="btn btn-raised btn-primary rtc-primary-bg">加入房间</button>
                  <button id="leave" type="button" class="btn btn-raised btn-primary rtc-primary-bg">离开房间</button>
                  <button id="publish" type="button" class="btn btn-raised btn-primary rtc-primary-bg">开始推流</button>
                  <button id="unpublish" type="button" class="btn btn-raised btn-primary rtc-primary-bg">停止推流</button>
                </div>
              </div>
              <div class="card">
                <button class="btn btn-raised rtc-expand-btn" id="settings" data-toggle="collapse"
                  data-target="#setting-collapse" aria-expanded="false" aria-controls="collapse">
                  设置
                </button>
                <div id="setting-collapse" class="collapse" aria-labelledby="setting-collapse">
                  <div class="card-body">
                    <div class="form-group">
                      <label for="cameraId" class="bmd-label-floating">摄像头</label>
                      <select class="form-control" id="cameraId" name="cameraId">
                      </select>
                    </div>
                    <div class="form-group">
                      <label for="microphoneId" class="bmd-label-floating">麦克风</label>
                      <select class="form-control" id="microphoneId" name="microphoneId">
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
  <div class="video-grid" id="video_grid">
    <div id="local_stream" class="video-placeholder">
      <div id="local_video_info" class="video-info"></div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <!-- Demo 相关第三方库-->
  <script src="./js/jquery-3.2.1.min.js"></script>
  <script src="./js/popper.js"></script>
  <script src="./js/toastify.js"></script>
  <script src="./js/bootstrap-material-design.min.js"></script>
  <script>$(document).ready(function () { $('body').bootstrapMaterialDesign(); });</script>
  <!-- 引入 TRTC WEB SDK 脚本 -->
  <script src="./js/trtc.js"></script>
  <!-- Demo 相关脚本 -->
  <script src="./js/lib-generate-test-usersig.min.js"></script>
  <script src="./js/debug/GenerateTestUserSig.js"></script>
  <script src="./js/utils.js"></script>
  <script src="./js/rtc-client.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>

View Code

里面有：输入用户ID、房间号的输入框；还有进入房间、离开房间、开始推流、停止推流按钮

下面来看看逻辑代码index.js：

/* eslint-disable require-jsdoc */

// initialize userId/roomId
$('#userId').val('user_' + parseInt(Math.random() * 100000000));
$('#roomId').val('889988');

let rtc = null;

$('#join').on('click', function(e) {
  e.preventDefault();
  console.log('join');
  if (rtc) return;
  const userId = $('#userId').val();
  const roomId = $('#roomId').val();
  const config = genTestUserSig(userId);
  rtc = new RtcClient({
    userId,
    roomId,
    sdkAppId: config.sdkAppId,
    userSig: config.userSig
  });
  rtc.join();
});

$('#publish').on('click', function(e) {
  e.preventDefault();
  console.log('publish');
  if (!rtc) {
    Toast.error('请先加入房间！');
    return;
  }
  rtc.publish();
});

$('#unpublish').on('click', function(e) {
  e.preventDefault();
  console.log('unpublish');
  if (!rtc) {
    Toast.error('请先加入房间！');
    return;
  }
  rtc.unpublish();
});

$('#leave').on('click', function(e) {
  e.preventDefault();
  console.log('leave');
  if (!rtc) {
    Toast.error('请先加入房间！');
    return;
  }
  rtc.leave();
  rtc = null;
});

$('#settings').on('click', function(e) {
  e.preventDefault();
  $('#settings').toggleClass('btn-raised');
  $('#setting-collapse').collapse();
});

View Code

可以看出。先让给用户ID和房间号设置了值，

点击进入房间按钮的代码：

$('#join').on('click', function(e) {
  e.preventDefault();
  console.log('join');
  if (rtc) return;
  const userId = $('#userId').val();
  const roomId = $('#roomId').val();
  const config = genTestUserSig(userId);//根据userId生成一个对象含：sdkAppId、userSig，具体代码见GenerateTestUserSig.js
  rtc = new RtcClient({//创建一个rtc实例  传入userid、房间号、sdkAppId、userSig
    userId,
    roomId,
    sdkAppId: config.sdkAppId,
    userSig: config.userSig,//签名
  });
  rtc.join();//调用join方法
});

GenerateTestUserSig.js：根据SDKAPPID, SECRETKEY（秘钥）, EXPIRETIME（签名过期时间 默认设置7天不要太短）生成：userSig（签名）

/* eslint-disable require-jsdoc */
/*
 * Module:   GenerateTestUserSig
 *
 * Function: 用于生成测试用的 UserSig，UserSig 是腾讯云为其云服务设计的一种安全保护签名。
 *           其计算方法是对 SDKAppID、UserID 和 EXPIRETIME 进行加密，加密算法为 HMAC-SHA256。
 *
 * Attention: 请不要将如下代码发布到您的线上正式版本的 App 中，原因如下：
 *
 *            本文件中的代码虽然能够正确计算出 UserSig，但仅适合快速调通 SDK 的基本功能，不适合线上产品，
 *            这是因为客户端代码中的 SECRETKEY 很容易被反编译逆向破解，尤其是 Web 端的代码被破解的难度几乎为零。
 *            一旦您的密钥泄露，攻击者就可以计算出正确的 UserSig 来盗用您的腾讯云流量。
 *
 *            正确的做法是将 UserSig 的计算代码和加密密钥放在您的业务服务器上，然后由 App 按需向您的服务器获取实时算出的 UserSig。
 *            由于破解服务器的成本要高于破解客户端 App，所以服务器计算的方案能够更好地保护您的加密密钥。
 *
 * Reference：https://cloud.tencent.com/document/product/647/17275#Server
 */
function genTestUserSig(userID) {
  /**
   * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
   *
   * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppId，
   * 它是腾讯云用于区分客户的唯一标识。
   */
  const SDKAPPID = 1400324973;

  /**
   * 签名过期时间，建议不要设置的过短
   * <p>
   * 时间单位：秒
   * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
   */
  const EXPIRETIME = 604800;

  /**
   * 计算签名用的加密密钥，获取步骤如下：
   *
   * step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav )，如果还没有应用就创建一个，
   * step2. 单击“应用配置”进入基础配置页面，并进一步找到“帐号体系集成”部分。
   * step3. 点击“查看密钥”按钮，就可以看到计算 UserSig 使用的加密的密钥了，请将其拷贝并复制到如下的变量中
   *
   * 注意：该方案仅适用于调试Demo，正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上，以避免加密密钥泄露导致的流量盗用。
   * 文档：https://cloud.tencent.com/document/product/647/17275#Server
   */
  const SECRETKEY = 'aaa3e88fffd77e4f3755a423151ea4008a4539aa64d41c0d16c3e1a844e2f3f5';

  // a soft reminder to guide developer to configure sdkAppId/secretKey
  if (SDKAPPID === '' || SECRETKEY === '') {
    alert(
      '请先配置好您的账号信息： SDKAPPID 及 SECRETKEY ' +
        '

Please configure your SDKAPPID/SECRETKEY in js/debug/GenerateTestUserSig.js'
    );
  }
  const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
  const userSig = generator.genTestUserSig(userID);
  return {
    sdkAppId: SDKAPPID,
    userSig: userSig
  };
}

View Code

我们还发现加入房间的代码里 new RtcClient();这样一个代码，字面意思是创建一个rtc实例对象；

下面来看看rtc-client.js中的代码：

/* eslint-disable require-jsdoc */

class RtcClient {//声明一个RtcClient类
  constructor(options) {//实例属性
    this.sdkAppId_ = options.sdkAppId;//sdkAppId
    this.userId_ = options.userId;
    this.userSig_ = options.userSig;
    this.roomId_ = options.roomId;

    this.isJoined_ = false;
    this.isPublished_ = false;
    this.localStream_ = null;
    this.remoteStreams_ = [];

    // check if browser is compatible with TRTC
    TRTC.checkSystemRequirements().then(result => {//trtc.js中的TRTC对象
      if (!result) {
        alert('Your browser is not compatible with TRTC! Please download Chrome M72+');
      }
    });
  }

  async join() {//实例方法
    if (this.isJoined_) {
      console.warn('duplicate RtcClient.join() observed');
      return;
    }

    // create a client for RtcClient
    this.client_ = TRTC.createClient({
      mode: 'videoCall', // 实时通话模式
      sdkAppId: this.sdkAppId_,
      userId: this.userId_,
      userSig: this.userSig_
    });

    // 处理 client 事件
    this.handleEvents();

    try {
      // join the room
      await this.client_.join({ roomId: this.roomId_ });
      console.log('join room success');
      Toast.notify('进房成功！');
      this.isJoined_ = true;
    } catch (error) {
      console.error('failed to join room because: ' + error);
      alert(
        '进房失败原因：' +
          error +
          '

请确保您的网络连接是正常的，您可以先体验一下我们的Demo以确保网络连接是正常的：' +
          '
 https://trtc-1252463788.file.myqcloud.com/web/demo/official-demo/index.html ' +
          '

另外，请确保您的账号信息是正确的。' +
          '
请打开链接：https://cloud.tencent.com/document/product/647/34342 查询详细错误信息！'
      );
      Toast.error('进房错误！');
      return;
    }

    try {
      // 采集摄像头和麦克风视频流
      await this.createLocalStream({ audio: true, video: true });
      Toast.info('摄像头及麦克风采集成功！');
      console.log('createLocalStream with audio/video success');
    } catch (error) {
      console.error('createLocalStream with audio/video failed: ' + error);
      alert(
        '请确认已连接摄像头和麦克风并授予其访问权限！

 如果您没有连接摄像头或麦克风，您可以通过调整第60行代码来关闭未连接设备的采集请求！'
      );
      try {
        // fallback to capture camera only
        await this.createLocalStream({ audio: false, video: true });
        Toast.info('采集摄像头成功！');
      } catch (error) {
        console.error('createLocalStream with video failed: ' + error);
        return;
      }
    }

    this.localStream_.on('player-state-changed', event => {
      console.log(`local stream ${event.type} player is ${event.state}`);
      if (event.type === 'video' && event.state === 'PLAYING') {
        // dismiss the remote user UI placeholder
      } else if (event.type === 'video' && event.state === 'STOPPPED') {
        // show the remote user UI placeholder
      }
    });

    // 在名为 ‘local_stream’ 的 div 容器上播放本地音视频
    this.localStream_.play('local_stream');

    // publish local stream by default after join the room
    await this.publish();
    Toast.notify('发布本地流成功！');
  }

  async leave() {
    if (!this.isJoined_) {
      console.warn('leave() - leave without join()d observed');
      Toast.error('请先加入房间！');
      return;
    }

    if (this.isPublished_) {
      // ensure the local stream has been unpublished before leaving.
      await this.unpublish(true);
    }

    try {
      // leave the room
      await this.client_.leave();
      Toast.notify('退房成功！');
      this.isJoined_ = false;
    } catch (error) {
      console.error('failed to leave the room because ' + error);
      location.reload();
    } finally {
      // 停止本地流，关闭本地流内部的音视频播放器
      this.localStream_.stop();
      // 关闭本地流，释放摄像头和麦克风访问权限
      this.localStream_.close();
      this.localStream_ = null;
    }
  }

  async publish() {
    if (!this.isJoined_) {
      Toast.error('请先加入房间再点击开始推流！');
      console.warn('publish() - please join() firstly');
      return;
    }
    if (this.isPublished_) {
      console.warn('duplicate RtcClient.publish() observed');
      Toast.error('当前正在推流！');
      return;
    }
    try {
      // 发布本地流
      await this.client_.publish(this.localStream_);
      Toast.info('发布本地流成功！');
      this.isPublished_ = true;
    } catch (error) {
      console.error('failed to publish local stream ' + error);
      Toast.error('发布本地流失败！');
      this.isPublished_ = false;
    }
  }

  async unpublish(isLeaving) {
    if (!this.isJoined_) {
      console.warn('unpublish() - please join() firstly');
      Toast.error('请先加入房间再停止推流！');
      return;
    }
    if (!this.isPublished_) {
      console.warn('RtcClient.unpublish() called but not published yet');
      Toast.error('当前尚未发布本地流！');
      return;
    }

    try {
      // 停止发布本地流
      await this.client_.unpublish(this.localStream_);
      this.isPublished_ = false;
      Toast.info('停止发布本地流成功！');
    } catch (error) {
      console.error('failed to unpublish local stream because ' + error);
      Toast.error('停止发布本地流失败！');
      if (!isLeaving) {
        console.warn('leaving the room because unpublish failure observed');
        Toast.error('停止发布本地流失败，退出房间！');
        this.leave();
      }
    }
  }

  async createLocalStream(options) {
    this.localStream_ = TRTC.createStream({
      audio: options.audio, // 采集麦克风
      video: options.video, // 采集摄像头
      userId: this.userId_
      // cameraId: getCameraId(),
      // microphoneId: getMicrophoneId()
    });
    // 设置视频分辨率帧率和码率
    this.localStream_.setVideoProfile('480p');

    await this.localStream_.initialize();
  }

  handleEvents() {
    // 处理 client 错误事件，错误均为不可恢复错误，建议提示用户后刷新页面
    this.client_.on('error', err => {
      console.error(err);
      alert(err);
      Toast.error('客户端错误：' + err);
      // location.reload();
    });

    // 处理用户被踢事件，通常是因为房间内有同名用户引起，这种问题一般是应用层逻辑错误引起的
    // 应用层请尽量使用不同用户ID进房
    this.client_.on('client-banned', err => {
      console.error('client has been banned for ' + err);
      Toast.error('用户被踢出房间！');
      // location.reload();
    });

    // 远端用户进房通知 - 仅限主动推流用户
    this.client_.on('peer-join', evt => {
      const userId = evt.userId;
      console.log('peer-join ' + userId);
      Toast.notify('远端用户进房 - ' + userId);
    });
    // 远端用户退房通知 - 仅限主动推流用户
    this.client_.on('peer-leave', evt => {
      const userId = evt.userId;
      console.log('peer-leave ' + userId);
      Toast.notify('远端用户退房 - ' + userId);
    });

    // 处理远端流增加事件
    this.client_.on('stream-added', evt => {
      const remoteStream = evt.stream;
      const id = remoteStream.getId();
      const userId = remoteStream.getUserId();
      console.log(`remote stream added: [${userId}] ID: ${id} type: ${remoteStream.getType()}`);
      Toast.info('远端流增加 - ' + userId);
      console.log('subscribe to this remote stream');
      // 远端流默认已订阅所有音视频，此处可指定只订阅音频或者音视频，不能仅订阅视频。
      // 如果不想观看该路远端流，可调用 this.client_.unsubscribe(remoteStream) 取消订阅
      this.client_.subscribe(remoteStream);
    });

    // 远端流订阅成功事件
    this.client_.on('stream-subscribed', evt => {
      const remoteStream = evt.stream;
      const id = remoteStream.getId();
      this.remoteStreams_.push(remoteStream);
      addView(id);
      // 在指定的 div 容器上播放音视频
      remoteStream.play(id);
      console.log('stream-subscribed ID: ', id);
      Toast.info('远端流订阅成功 - ' + remoteStream.getUserId());
    });

    // 处理远端流被删除事件
    this.client_.on('stream-removed', evt => {
      const remoteStream = evt.stream;
      const id = remoteStream.getId();
      // 关闭远端流内部的音视频播放器
      remoteStream.stop();
      this.remoteStreams_ = this.remoteStreams_.filter(stream => {
        return stream.getId() !== id;
      });
      removeView(id);
      console.log(`stream-removed ID: ${id}  type: ${remoteStream.getType()}`);
      Toast.info('远端流删除 - ' + remoteStream.getUserId());
    });

    // 处理远端流更新事件，在音视频通话过程中，远端流音频或视频可能会有更新
    this.client_.on('stream-updated', evt => {
      const remoteStream = evt.stream;
      console.log(
        'type: ' +
          remoteStream.getType() +
          ' stream-updated hasAudio: ' +
          remoteStream.hasAudio() +
          ' hasVideo: ' +
          remoteStream.hasVideo()
      );
      Toast.info('远端流更新！');
    });

    // 远端流音频或视频mute状态通知
    this.client_.on('mute-audio', evt => {
      console.log(evt.userId + ' mute audio');
    });
    this.client_.on('unmute-audio', evt => {
      console.log(evt.userId + ' unmute audio');
    });
    this.client_.on('mute-video', evt => {
      console.log(evt.userId + ' mute video');
    });
    this.client_.on('unmute-video', evt => {
      console.log(evt.userId + ' unmute video');
    });

    // 信令通道连接状态通知
    this.client_.on('connection-state-changed', evt => {
      console.log(`RtcClient state changed to ${evt.state} from ${evt.prevState}`);
    });
  }
}

View Code

看到这里，我在本地写了demo，有个报错，先到这里，推荐大家看文档：

文档地址：https://cloud.tencent.com/document/product/647/16863

可以现充基础音视频通话来做，慢慢的我那个下看文档

也可以看一下最佳实践里的小例子，很简短，可以照着实现一个web端的音视频通话；

文档地址：https://cloud.tencent.com/document/product/647/32225

下面是基于demo中的一些js文件自己实现的一个实时音视频的，进入房间、退出房间、开始推流、停止推流的小例子，就提的代码还没研究；先贴上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实时音视频demo</title>
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/toastify.min.css">
  <style>
    #local_stream{
      height:500px;
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="col col-xs-3">
      <button class="btn btn-primary" id="join">加入房间</button>
    </div>
    <div class="col col-xs-3">
      <button class="btn btn-primary" id="leave">退出房间</button>
    </div>
    <div class="col col-xs-3">
      <button class="btn btn-primary" id="publish">开始推流</button>
    </div>
    <div class="col col-xs-3">
      <button class="btn btn-primary" id="unpublish">停止推流</button>
    </div>
  </div>
  <div class="row">
    <div class="col col-xs-12">
      <div id="local_stream" class="video-placeholder">
        <div id="local_video_info" class="video-info"></div>
      </div>
    </div>
  </div>



  <!-- jquery -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <!-- 提示框插件 -->
  <script src="./js/toastify.js"></script>
  <!-- bootstrap -->
  <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- 引入 TRTC WEB SDK 脚本 -->
  <script src="./js/trtc.js"></script>
  <!-- 下面是demo相关脚本 -->
  <!-- 生成签名 -->
  <script src="./js/lib-generate-test-usersig.min.js"></script>
  <script src="./js/GenerateTestUserSig.js"></script>
  <script src="./js/utils.js"></script>
  <script src="./js/rtc-client.js"></script>
  

<script>
  let rtc = null;
  // 加入房间
$('#join').on('click', function(e) {
  e.preventDefault();
  console.log('join');
  if (rtc) return;
  let userId = 'user_' + parseInt(Math.random() * 100000000);
  const config = genTestUserSig(userId);//根据userId生成一个对象含：sdkAppId、userSig，具体代码见GenerateTestUserSig.js
  rtc = new RtcClient({//创建一个rtc实例  传入userid、房间号、sdkAppId、userSig
    userId,
    roomId:'889988',
    sdkAppId: config.sdkAppId,
    userSig: config.userSig
  });
  rtc.join();//调用join方法
});
// 退出房间
$('#leave').on('click', function(e) {
  e.preventDefault();
  console.log('leave');
  if (!rtc) {
    Toast.error('请先加入房间！');
    return;
  }
  rtc.leave();
  rtc = null;
});
// 开始推流
$('#publish').on('click', function(e) {
  e.preventDefault();
  console.log('publish');
  if (!rtc) {
    Toast.error('请先加入房间！');
    return;
  }
  rtc.publish();
});
// 停止推流
$('#unpublish').on('click', function(e) {
  e.preventDefault();
  console.log('unpublish');
  if (!rtc) {
    Toast.error('请先加入房间！');
    return;
  }
  rtc.unpublish();
});

</script>
</body>
</html>

效果：

。

相关阅读:
列"xx"不在表Table中
 asp.net中自定义验证控件
 ASP.NET母版与内容页相对路径的问题
 html点小图看大图最快捷的方法
 ThinkCMF的跳转303 404等页面的方法
 关于ThinkCMF自带插件上传不了图片的解决方法
 js中百分比运算,大型数据会算错
 数据库价格汇总查询的方法
 信息资源5
操作系统概论
原文地址：https://www.cnblogs.com/fqh123/p/12384500.html

分析 腾讯的 实时音视频web端demo代码

分析腾讯的实时音视频web端demo代码