vue 腾讯TRTC ，深入浅出

首先登录腾讯TRTC申请实时音视频的SDKAppID和SDKSecretKey

可以走快速跑通Demo

插入代码（资源中的），，将代码中的SDKAPPID和SECRETKEY改成自己的，，引入在自己的页面上就可以了

<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>