vue Tencent TRTC, explain in simple terms

First log in to Tencent TRTC to apply for the SDKAppID and SDKSecretKey of real-time audio and video

You can quickly run through the demo

Insert the code (in the resource), change the SDKAPPID and SECRETKEY in the code to your own, and import it on your own page.

<template>
  <div class="home">
    <div id="local_stream"   :class="show?'local_stream':'remote_stream'"    @click="setclass"></div>
    <div id="remote_stream" :class="!show?'local_stream':'remote_stream'"    @click="setclass"></div>
    <div  @click="leave" style="position: absolute; bottom:1%;z-index: 1000;width:100%;text-align: center;">
 <img src="@/assets/wx/hangUp.png" alt="" style="width: 35px;">
    </div>
  </div>
</template>


<script>
import wx from 'weixin-js-sdk'
import { Toast } from 'vant'
import TRTC from "trtc-js-sdk";
import { genTestUserSig } from "@/assets/js/lib-generate-test-usersig.min.js";
export default {
  name: "Home",
  data() {
    return {
      ten:'1',
      show:'',
      userId: undefined, //用户id --可更改
      roomId: undefined, //房间号--加入相同房间才能聊
      client: "", //客户端服务
      remoteStream: "", //远方播放流
      localStream: "",//本地流
      callType:"",// 0是视频 1是语音
    };
  },
  components: {},
  created() {
    this.roomId=Number(this.$route.query.roomId);
    if(this.$route.query.callType){
      this.callType = this.$route.query.callType
    }
    const $t = this;
    this.$nextTick(() => {
      const  userId  = this.$route.query.userId;
      //获取签名
      const config = genTestUserSig(userId);
      const sdkAppId = config.sdkAppId;
      const userSig = config.userSig;

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

      $t.fun4start();
    });
  },
  methods: {
  
      leave() {
 this.ten='0'

 this.client.unpublish(this.localStream).then(() => {
   // 取消发布本地流成功

 });


 this.client                                   

   .leave()                           

   .then(() => {
     console.log("退房成功");

     // 停止本地流，关闭本地流内部的音视频播放器

     this.localStream.stop();

     // 关闭本地流，释放摄像头和麦克风访问权限            像这种什么stop，close方法调不起来的  自己看看上面是不是有问题

     this.localStream.close();

     this.localStream = null;

     this.client = null;

     // 退房成功，可再次调用client.join重新进房开启新的通话。

   })

   .catch((error) => {
     console.error("退房失败 " + error);

     // 错误不可恢复，需要刷新页面。

   });
      /*#ifdef H5*/
      this.$router.push('/')
            /*#endif*/
      /*#ifdef MP-WEIXIN*/
      wx.miniProgram.navigateTo({
        url: '/pages_my/my/myOrders'
      })

      /*#endif*/



},

  
    setclass(){
        this.show=!this.show
    },
    //
    async fun4start() {
      this.fun4subStream();
      this.fun4join();
    },
    //创建发布本地音视频流
    async fun4createLocalStream() {
      const  userId  = this.$route.query.userId;
      const   $t = this;
      $t.localStream = TRTC.createStream({
        userId,
        audio: true,
        // 0是视频 1是语音
        video: this.callType == 0 ? true : false
      });

      $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((res) => {
              console.log("本地流发布成功", $t.localStream.hasVideo());
            })
            .catch(e => {
              console.log(e);
            });
          console.log("本地播放成功");
          $t.localStream.play("local_stream");

        });
    },
    //本地视频流播放

    async fun4join() {
      const { roomId } = this
      const $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-removed', event => {
  const remoteStream = event.stream;
  if(this.ten=='1'){
    Toast('对方已挂断,')
  }

setTimeout(() => {
  this.leave()

}, 1500);
});
      $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="less">
.home {

  min-height: 100vh;
  .local_stream{
    width: 100%;
    height: 100vh;
  }
  .remote_stream {
    width: auto;
    height: 200px;
    position: absolute;
    top:0;
    right: 0;
    z-index:2000;
  }
}
</style>