騰訊 TRTC Web SDK 的應用實踐

gitHub

https://github.com/qlaiqyc/plugin-trtc-demo.git

瀏覽器測試是否支持 ：https://www.qcloudtrtc.com/webrtc-samples/abilitytest/index.html

文檔

參考：https://trtc-1252463788.file.myqcloud.com/web/docs/TRTC.html

基本實現

• 原理是很簡單的，就是和文檔一起走
• 然後進行封裝一下

插件引入

import TRTC from "trtc-js-sdk";
import { genTestUserSig } from "@/assets/js/lib-generate-test-usersig.min.js";

注意：lib-generate-test-usersig.min.js 是 demo 中直接copy 過來 直接修改 參數

流程實現

• 代碼

<template>
  <div class="home">
    <div id="local_stream"></div>
    <div id="remote_stream"></div>
  </div>
</template>

<script>
// @ is an alias to /src

import TRTC from "trtc-js-sdk";
import { genTestUserSig } from "@/assets/js/lib-generate-test-usersig.min.js";
export default {
  name: "Home",
  data() {
    return {
      userId: "user_" + parseInt(Math.random() * 100000000), //用戶id --可更改
      roomId: 8888, //房間號--加入相同房間才能聊
      client: "", //客戶端服務
      remoteStream: "", //遠方播放流
      localStream: "" //本地流
    };
  },
  components: {},
  created() {
    const $t = this;
    this.$nextTick(() => {
      const { userId } = $t;
      //獲取簽名
      const config = genTestUserSig(userId);
      const sdkAppId = config.sdkAppId;
      const userSig = config.userSig;

      $t.client = TRTC.createClient({
        mode: "videoCall",
        sdkAppId,
        userId,
        userSig
      });

      $t.fun4start();
    });
  },
  methods: {
    //
    async fun4start() {
      this.fun4subStream();
      this.fun4join();
    },
    //創建發佈本地音視頻流
    async fun4createLocalStream() {
      const { userId } = this,
        $t = this;
      $t.localStream = TRTC.createStream({
        userId,
        audio: true,
        video: true
      });

      $t.localStream.setScreenProfile("120p");

      $t.localStream
        .initialize()
        .catch(error => {
          console.log(error, "----------------999");
          // console.error('初始化本地流失敗 ' + error);
        })
        .then(() => {
          console.log("初始化本地流成功");
          $t.client
            .publish($t.localStream)
            .then(() => {
              console.log("本地流發佈成功", $t.localStream.hasVideo());
            })
            .catch(e => {
              console.log(e);
            });
          console.log("本地播放成功");
          $t.localStream.play("local_stream");
        });
    },
    //本地視頻流播放

    async fun4join() {
      const { roomId } = this,
        $t = this;
      $t.client
        .join({ roomId })
        .catch(error => {
          console.error("進房失敗 " + error);
        })
        .then(() => {
          console.log("進房成功");

          $t.fun4createLocalStream();
        });
    },
    //訂閱遠端音視頻流
    async fun4subStream() {
      const $t = this;
      $t.client.on("stream-added", event => {
        const remoteStream = event.stream;
        console.log("遠端流增加: " + remoteStream.getId());
        //訂閱遠端流
        $t.client
          .subscribe(remoteStream, { audio: true, video: true })
          .catch(e => {
            console.error("failed to subscribe remoteStream", e);
          });
      });
      $t.client.on("stream-subscribed", event => {
        console.error(event, "---subscribed");
        const remoteStream = event.stream;
        const id = "remote_stream-" + remoteStream.getId();

        this.remoteStream = id;
        $t.remotePlay = remoteStream;
        // let dom = $t.$refs.remoteStream;
        // if(!dom)return;
        // //做了dom操作 需要使用$nextTick(),否則找不到創建的標籤無法進行播放
        // console.log(666)
        // remoteStream.stop();

        console.error(
          "------555------",
          remoteStream.hasAudio(),
          remoteStream.hasVideo()
        );

        remoteStream
          .play("remote_stream")
          .then(() => {
            // autoplay success
          })
          .catch(e => {
            console.table(e);
          });
      });
    }

    //監聽遠端流
  }
};
</script>
<style lang="scss">
.home {
  #local_stream,
  #remote_stream {
    width: 100vw;
    height: 100px;
  }
}
</style>

• 實現demo
  -

缺點

• 只是初步實現 demo
• 還爲進行 二次封裝