uniapp 小程序接入腾讯实时音视频trtc-wx

最新推荐文章于 2025-03-30 16:53:47 发布

兮夏-

最新推荐文章于 2025-03-30 16:53:47 发布

阅读量2.5k

点赞数

分类专栏： uniapp 文章标签： uni-app 小程序实时音视频

本文链接：https://blog.youkuaiyun.com/m0_46693606/article/details/129525453

版权

uniapp 专栏收录该内容

4 篇文章

订阅专栏

环境要求
微信 App iOS 最低版本要求：7.0.9
微信 App Android 最低版本要求：7.0.8
小程序基础库最低版本要求：2.10.0
由于小程序测试号不具备和的使用权限，请使用企业小程序账号申请相关权限进行开发。
由于微信开发者工具不支持原生组件（即和标签），需要在真机上进行运行体验。

前提条件

1.您已注册腾讯云账号，并完成实名认证。

2.开通小程序类目与推拉流标签权限（如不开通则无法正常使用）。
出于政策和合规的考虑，微信暂未放开所有小程序对实时音视频功能（即和标签）的支持：
小程序推拉流标签不支持个人小程序，只支持企业类小程序。
小程序推拉流标签使用权限暂时只开放给有限类目。
符合类目要求的小程序，需要在微信公众平台>开发>开发管理>接口设置中自助开通该组件权限，如下图所示：
在这里插入图片描述
第一步：下载官方demo，附地址：https://github.com/LiteAVSDK/Live_WXMini，然后导入本地HbuilderX中

里面有三个项目，这里选择TRTCSimpleDemoUniapp这个
第二步：将文件夹下的lib文件夹拷贝到自己uniapp项目根目录下
在这里插入图片描述
pages页面下面是模板可以自行选择使用

3.第三步引入TRTC

import TRTC from '@/lib/trtc-wx'

4.初始化TRTC

// 创建推流实例
	     this.pusher = this.TRTC.createPusher({
			 enableCamera:true,
			 enableMic:true,
			 mode:'SD',
			 videoHeight:360
			 
		 })

进入房间

enterRoom(options) {
		 console.log(options);
	       const {
	         roomId,
	         userId,
			 sdkAppID,
			 userSig
	       } = options
	       this.pusher = this.TRTC.enterRoom({
	         userID: userId,
	         sdkAppID,
	         userSig,
	         roomID: roomId,
	         enableMic:true,
	       })
		   console.log(this.pusher);
	       this.TRTC.getPusherInstance().start() // 开始推流（autoPush的模式下不需要）
	     },

事件监听

 bindTRTCRoomEvent() {
	       const TRTC_EVENT = this.TRTC.EVENT
	       // 初始化事件订阅
	       this.TRTC.on(TRTC_EVENT.LOCAL_JOIN, (event) => {
	         console.log('* room LOCAL_JOIN', event)
	       })
	       this.TRTC.on(TRTC_EVENT.LOCAL_LEAVE, (event) => {
	         console.log('* room LOCAL_LEAVE', event)
	       })
	       this.TRTC.on(TRTC_EVENT.ERROR, (event) => {
	         console.log('* room ERROR', event)
	       })
	       // 远端用户退出
	       this.TRTC.on(TRTC_EVENT.REMOTE_USER_LEAVE, (event) => {
	         console.error('* room REMOTE_USER_LEAVE', event)
	         this.playerList = event.data.playerList
	       })
	       // 远端用户推送音频
	       this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_ADD, (event) => {
	         console.log('* room REMOTE_AUDIO_ADD', event)
	         const {
	           player,
	         } = event.data
	         this.setPlayerAttributesHandler(player, {
	           muteAudio: false,
	         })
	       })
	       // 远端用户取消推送音频
	       this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_REMOVE, (event) => {
	         console.error('* room REMOTE_AUDIO_REMOVE', event)
	         const {
	           player,
	         } = event.data
	         this.setPlayerAttributesHandler(player, {
	           muteAudio: true,
	         })
	       })
	     },
	     // 设置 pusher 属性
	    setPusherAttributesHandler(options) {
	      this.pusher = this.TRTC.setPusherAttributes(options)
	    },
	
	    // 设置某个 player 属性
	    setPlayerAttributesHandler(player, options) {
	      this.playerList = this.TRTC.setPlayerAttributes(player.streamID, options)
	    },

退出房间

 exitRoom() {
		  this.TRTC.getPusherInstance().stop() 
	      const { pusher, playerList } = this.TRTC.exitRoom()
	      this.pusher =  pusher
	      this.playerList = playerList
		  
	    },

 <live-pusher class="live-pusher" :mode="pusher.mode" :autopush="pusher.autopush" :url="pusher.url"
      :enable-mic="pusher.enableMic" :enable-camera="pusher.enableCamera"
	  ></live-pusher>

要给live-pusher设置高宽

data中定义的变量

      moitorData:{},
	  pusher:{},
	  TRTC: null,