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

环境要求
微信 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,

猜你喜欢

转载自blog.csdn.net/m0_46693606/article/details/129525453