腾讯实时音视频SDK[三]:小程序端实现

最新推荐文章于 2023-03-14 14:03:22 发布
最新推荐文章于 2023-03-14 14:03:22 发布
阅读量2.5k 收藏
点赞数
分类专栏： 腾讯实时音视频SDK使用完整demo 文章标签： 音视频 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706619/article/details/122173759
版权
本文介绍了使用腾讯实时音视频SDK在小程序端实现音视频通信的过程。首先，小程序启动时会建立WebSocket连接，获取房间号。当收到房间号后，小程序进入房间。在代码实现中，SDK的sdkappid、secretKey和签名来自后端接口。在页面使用时，需要注意组件状态和权限问题，例如初始化Pusher时需要避免在无URL状态下操作，以及处理元素显示问题以防止声音消失。
摘要由CSDN通过智能技术生成
说明

小程序这边一进来就会建立websocket链接,将必要参数给到后端,然后等待后端生成房间号并等待客服进入房间,才下发房间号给到小程序.这里是小程序收到房间号后进入房间的实现.

效果图

等待接听…
在这里插入图片描述
接听后…
在这里插入图片描述

安装引入
npm i trtc-wx-sdk
import TRTC from 'trtc-wx-sdk'
代码如下

这里我封装成了组件,这里sdkappid和secretKey以及签名都是来自后端接口,没有使用debug的模拟.

页面使用:
<div class="calling-video">
     <business-tencentCalling id="trtcComponent" :config="playVidoe.input.rtcConfig" ref="trtcComponent" :isEnterRoom.sync="isEnterRoom"></business-tencentCalling>
</div>
组件内部
<template>
  <view class="template-1v1">
    <view v-for="(item,index) in playerList" :key="index" v-if="item.src && (item.hasVideo || item.hasAudio)" :class="['view-container','player-container' ,item.isVisible?'':'none']">
      <live-player
              class="player"
              :id="item.streamID"
              :data-userid="item.userID"
              :data-streamid="item.streamID"
              :data-streamtype="item.streamType"
              :src="item.src"
              :mode="RTC"
              :autoplay="item.autoplay"
              :mute-audio="item.muteAudio"
              :mute-video="item.muteVideo"
              :orientation="item.orientation"
              :object-fit="item.objectFit"
              :background-mute="item.enableBackgroundMute"
              :min-cache="item.minCache"
              :max-cache="item.maxCache"
              :sound-mode="item.soundMode"
              :enable-recv-message="item.enableRecvMessage"
              :auto-pause-if-navigate="item.autoPauseIfNavigate"
              :auto-pause-if-open-native="item.autoPauseIfOpenNative"
              :debug="debug"
              @statechange="_playerStateChange"
              @fullscreenchange="_playerFullscreenChange"
              @netstatus="_playerNetStatus"
              @audiovolumenotify  ="_playerAudioVolumeNotify"
      />
    </view>
    <view v-if="pusher.enableMic" :class="'view-container pusher-container ' + (pusher.isVisible ? '' : 'none') + ' ' +'fullscreen'">
      <live-pusher
              class="pusher"
              v-show="pusher.enableCamera"
              :url="pusher.url"
              :mode="pusher.mode"
              :autopush="pusher.autopush"
              :enable-camera="pusher.enableCamera"
              :enable-mic="pusher.enableMic"
              :muted="!pusher.enableMic"
              :enable-agc="pusher.enableAgc"
              :enable-ans="pusher.enableAns"
              :enable-ear-monitor="pusher.enableEarMonitor"
              :auto-focus="pusher.enableAutoFocus"
              :zoom="pusher.enableZoom"
              :min-bitrate="pusher.minBitrate"
              :max-bitrate="pusher.maxBitrate"
              :video-width="pusher.videoWidth"
              :video-height="pusher.videoHeight"
              :beauty="pusher.beautyLevel"
              :whiteness="pusher.whitenessLevel"
              :orientation="pusher.videoOrientation"
              :aspect="pusher.videoAspect"
              :device-position="pusher.frontCamera"
              :remote-mirror="pusher.enableRemoteMirror"
              :local-mirror="pusher.localMirror"
              :background-mute="pusher.enableBackgroundMute"
              :audio-quality="pusher.audioQuality"
              :audio-volume-type="pusher.audioVolumeType"
              :audio-reverb-type="pusher.audioReverbType"
              :waiting-image="pusher.waitingImage"
              :debug="debug"
              @statechange="pusherStateChangeHandlerFun"
              @netstatus="_pusherNetStatusHandler"
              @error="_pusherErrorHandler"
              @bgmstart="_pusherBGMStartHandler"
              @bgmprogress="_pusherBGMProgressHandler"
              @bgmcomplete="_pusherBGMCompleteHandler"
              @audiovolumenotify="_pusherAudioVolumeNotify"
      />
      <view class="loading" v-if="!_isEnterRoom">
        <view class="loading-text">等待接听中...</view>
      </view>
    </view>
    <cover-view v-if="_isEnterRoom" class="calling-time">通话时间 {{ videoOrVoiceObj.msgIPtime.longTime}}</cover-view>
    <view class="handle-btns" v-if="videoBtnsVisible&&hasEnterRoom">
      <!--视频/语音   toggleVideoFun -->
      <cover-view class="box-wrap">
        <cover-view class="btn-normal" @click="_toggleVideoFun">
          <cover-image class="closeVideoImg" v-if="pusher.enableCamera" src="/static/img/closeCamera.png"></cover-image>
          <cover-image class="videoImg" v-else src="/static/img/camera.png"></cover-image>
        </cover-view>
        <cover-view class="btn-word">{{pusher.enableCamera?'关闭摄像头':'打开摄像头'}}</cover-view>
      </cover-view>
      <!-- 挂断 -->
      <cover-view class="box-wrap">
          <cover-view class="btn-hangup" @click="_hangUp"><cover-image src="/static/img/hangup.png"></cover-image></cover-view>
          <cover-view class="btn-word">挂断</cover-view>
        </cover-view>
      <!-- 翻转镜头 -->
      <cover-view class="box-wrap">
        <cover-view class="btn-normal" @click="_pusherSwitchCamera"><cover-image src="/static/img/turnCamera.png"></cover-image></cover-view>
        <cover-view class="btn-word">翻转镜头</cover-view>
      </cover-view>
    </view>
    <cover-view class="bottom-btns" v-if="videoBtnsVisible&&hasEnterRoom">
      <cover-view class="box-wrap" >
        <cover-view class="btn-normal" @click="_setPlayerSoundMode">
          <cover-image class="closeVideoImg" v-if="playerList[0].soundMode === 'ear'" src="/static/img/ear_sound.png"></cover-image>
          <cover-image class="videoImg" v-else src="/static/img/outer_sound.png"></cover-image>
        </cover-view>
        <cover-view class="btn-word" v-if="playerList[0].soundMode === 'ear'">听筒</cover-view>
        <cover-view class="btn-word" v-else>免提</cover-view>
      </cover-view>
    </cover-view>
  </view>
</template>
<style lang="scss" scoped>
  /* 1v1 视频电话模式 */
  .template-1v1{
    width: 100vw;
    display: flex;
    height: 100vh;
    position: relative;
  }
  .template-1v1 .pusher-container{
    width: 100vw;
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }

  .template-1v1 .pusher-container.fullscreen{
    width: 100vw;
    height: 100vh !important;
    display: flex;
    height: 0rpx;
    top: 0;
    right: 0;
  }

  .template-1v1 .loading {
    position: absolute;
    top: 40vh;
    left: 50vw;
    transform: translate(-50%, 0);
    width: 300rpx;
    height: 250rpx;
    border-radius: 12rpx;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
  }
  .template-1v1 .loading-img {
    height: 200rpx;
    display:flex;
    justify-content: center;
    align-items: center;
    animation: rotate 2s linear infinite;
  }
  .template-1v1 .rotate-img {
    width:160rpx;
    height: 160rpx;
  }
  .template-1v1 .loading-text {
    width: 100%;
    padding-top: 40rpx;
    text-align: center;
  }
  @keyframes rotate {
    0%{ transform: rotate(0deg);}
    50%{ transform: rotate(180deg);}
    100%{ transform: rotate(360deg);}
  }
  .template-1v1 .player-container:nth-child(1){
    width: 100vw;
    height: 100vh;
  }

  .template-1v1 .handle-btns {
    position: absolute;
    z-index: 3;
    bottom: 18vh;
    right: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .template-1v1 .bottom-btns {
    position: absolute;
    z-index: 3;
    bottom: 2vh;
    right: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .calling-time{
    position: absolute;
    z-index: 3;
    bottom: 35vh;
    font-size: 36rpx;
    left: 0;
    width: 100vw;
    color: #fff;
    text-align: center;
  }
  .template-1v1 .handle-btns .box-wrap,.template-1v1 .bottom-btns .box-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 140rpx;
    height: auto;
  }
  .template-1v1 .handle-btns .box-wrap .btn-word,.template-1v1 .bottom-btns .box-wrap .btn-word{
    color: #fff;
    margin-top: 30rpx;
  }

  .template-1v1 .btn-normal {
    width: 110rpx;
    height: 110rpx;
    box-sizing: border-box;
    display: flex;
    border:1rpx solid white;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  .template-1v1 .btn-normal cover-image{
    width: 50rpx;
    height: auto;
    margin-bottom: 2rpx;
  }
  .template-1v1 .btn-normal .closeVideoImg{
    width: 58rpx;
  }
  .template-1v1 .btn-normal .videoImg{
    width: 64rpx;
  }

  .template-1v1 .btn-hangup  {
    width: 110rpx;
    height: 110rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  .template-1v1 .btn-hangup cover-image{
    width: 110rpx;
    height: 110rpx;
  }

</style>
import TRTC from 'trtc-wx-sdk'
export default {
	data () {
	    return {
	      TRTC:undefined,
		  pusher:undefined,
		  playerList:[],
		  //控制视频按钮显隐
		  videoBtnsVisible:true,
		  //进房状态
		  // isEnterRoom:false,
		  //控制视频按钮显隐
		  videoBtnsVisible:true,
		  //自己写一个计时功能
		  courentTime:0,
		  videoOrVoiceObj:{
		  //计时器
		    msgIPtime:{
		      timer: "",
		      content: "",
		      hour: 0,
		      minutes: 0,
		      seconds: 0,
		      longTime:'00:00:00'
		    }
		  },
		  //是否执行进房操作
		  hasEnterRoom:false
	    }
	  },
	  beforeMount(options) {
	    this.TRTC = new TRTC()
	    //初始化数据 房间号  签名等
	    this.init(options)
	    this.bindTRTCRoomEvent()
	  },
	  props:{
		 config:{
		    type: Object,
		    default: () => ({
		      sdkAppID: '',
		      userID: '',
		      userSig: '',
		      template: '',
		      debugMode: ''
		    })
		  },
		  //进房结果  成功:true/失败:false
		  isEnterRoom:{
		    type: Boolean,
		    default: false
		  },
	},
	  methods:{
		init() {
		    // pusher 初始化参数
		    const pusherConfig = {
		      beautyLevel: 9,
		    }
		    const pusher = this.TRTC.createPusher(pusherConfig)
		    console.log(pusher.pusherAttributes, '000')
		    this.pusher= pusher.pusherAttributes
		     
		  },
		  toJSON(){
		    return this
		  },
		
		  async enterRoom(options,callback) {
		    //执行了进房操作
		    this.hasEnterRoom = true
		    //进房状态
		    let enterRoomStatus={
		      isOk:false,
		      msg:undefined,
		      info:{}
		    }
		    
		    const roomID = options.roomID
		    const config =  Object.assign(this.config, { roomID })
		
		    //校验参数
		    if (!this.methods('checkParamFun',this.config)) {
		      enterRoomStatus.msg = '缺少必要参数'
		      enterRoomStatus.info = {}
		      callback(enterRoomStatus)
		      return;
		    }
		    //
		    config.enableMic= true, // 进房默认开启音频上行
		    config.enableCamera= false, // 进房默认开启视频上行
		    config.frontCamera= 'back', // 进房默认开启视频上行
		    new Promise((r)=>{
		      try{
		        this.pusher=this.TRTC.enterRoom(config)
		        r()
		      }catch(res){
		        console.error(TAG_NAME, '进房失败', res);
		        enterRoomStatus.msg = '进房失败'
		        enterRoomStatus.info = res
		        wx.showToast({
		          title: '组件内进房失败'+JSON.stringify(res),
		        }) 
		        callback(enterRoomStatus)
		        r()
		      }
		    }).then(()=>{
		      this.TRTC.getPusherInstance().start() // 开始推流（autoPush的模式下不需要）
		      console.log('开始推流',this.pusher)
		      enterRoomStatus.msg = '进房成功'
		      enterRoomStatus.isOk = true
		      enterRoomStatus.info = {}
		      callback(enterRoomStatus)
		    })
		  },
		
		  exitRoom() {
		    const result = this.TRTC.exitRoom()
		    this.pusher= result.pusher
		    this.playerList=result.playerList
		  },
		
		  //隐藏
		  hiddenBtns(){
		    console.log('隐藏')
		    this.videoBtnsVisible = false
		  },
		  //显示
		  refreshBtns(){
		    console.log('显示')
		    this.videoBtnsVisible = true
		  },
		
		  //我写的计时功能
		  initTime() {
		    console.log('不执行吗?')
		    /*时间处理*/
		    this.timer = setInterval(() => {
		      this.courentTime = new Date().getTime();
		    }, 1000);
		  },
		  //通话时长
		  ipVoiceOrVideoLongTimeClick(){
		    this.videoOrVoiceObj.msgIPtime.timer = setInterval(this.startMsgIPtimeTimer, 1000);
		  },
		  startMsgIPtimeTimer () {
		    this.videoOrVoiceObj.msgIPtime.seconds += 1;
		    if ( this.videoOrVoiceObj.msgIPtime.seconds >= 60) {
		      this.videoOrVoiceObj.msgIPtime.seconds = 0;
		      this.videoOrVoiceObj.msgIPtime.minutes += 1;
		    }
		    if ( this.videoOrVoiceObj.msgIPtime.minutes >= 60) {
		      this.videoOrVoiceObj.msgIPtime.minutes = 0;
		      this.videoOrVoiceObj.msgIPtime.hour =  this.videoOrVoiceObj.msgIPtime.hour + 1;
		    }
		  this.videoOrVoiceObj.msgIPtime.longTime =( this.videoOrVoiceObj.msgIPtime.hour < 10 ? '0' +  this.videoOrVoiceObj.msgIPtime.hour :  this.videoOrVoiceObj.msgIPtime.hour) + ':'+ ( this.videoOrVoiceObj.msgIPtime.minutes < 10 ? '0' +  this.videoOrVoiceObj.msgIPtime.minutes :  this.videoOrVoiceObj.msgIPtime.minutes) + ':' + ( this.videoOrVoiceObj.msgIPtime.seconds < 10 ? '0' +  this.videoOrVoiceObj.msgIPtime.seconds :  this.videoOrVoiceObj.msgIPtime.seconds);
		  },
		  resetMsgIPtime(){  //重置
		    clearInterval(this.videoOrVoiceObj.msgIPtime.timer);
		    this.videoOrVoiceObj.msgIPtime.hour=0;
		    this.videoOrVoiceObj.msgIPtime.minute=0;
		    this.videoOrVoiceObj.msgIPtime.ms=0;
		    this.videoOrVoiceObj.msgIPtime.seconds=0;
		    this.videoOrVoiceObj.msgIPtime.longTime="00:00:00";
		  },
		  stopMsgIPtime(){  //暂停
		    clearInterval(this.videoOrVoiceObj.msgIPtime.timer);
		  },
		
		  // 设置某个 player 属性
		  setPlayerAttributesHandler(player, options) {
		    this.playerList=this.TRTC.setPlayerAttributes(player.streamID, options)
		  },
		
		  // 事件监听
		  bindTRTCRoomEvent() {
		    console.log('有被调用')
		    const TRTC_EVENT = this.TRTC.EVENT
		    // 初始化事件订阅
		    this.TRTC.on(TRTC_EVENT.LOCAL_JOIN, (event) => {
		      this._isEnterRoom = true
		      //进房成功  开启计时功能
		      this.initTime()
		      this.ipVoiceOrVideoLongTimeClick()
		      console.log('* room LOCAL_JOIN 进房成功了', event)
		      console.log('进房成功人员',this.playerList)
		    })
		    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) => {
		      const { playerList } = event.data
		      this.playerList= playerList
		      console.log('* room REMOTE_USER_LEAVE', event)
		    })
		    // 远端用户推送视频
		    this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_ADD, (event) => {
		      console.log('* room REMOTE_VIDEO_ADD',  event)
		      const { player } = event.data
		      // 开始播放远端的视频流，默认是不播放的
		      this.setPlayerAttributesHandler(player, { muteVideo: false })
		    })
		    // 远端用户取消推送视频
		    this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_REMOVE, (event) => {
		      console.log('* room REMOTE_VIDEO_REMOVE', event)
		      const { player } = event.data
		      this.setPlayerAttributesHandler(player, { muteVideo: true })
		    })
		    // 远端用户推送音频
		    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.log('* room REMOTE_AUDIO_REMOVE', event)
		      const { player } = event.data
		      this.setPlayerAttributesHandler(player, { muteAudio: true })
		    })
		  },
		
		  // 是否订阅某一个player Audio
		  _mutePlayerAudio(event) {
		    const player = event.currentTarget.dataset.value
		    if (player.hasAudio && player.muteAudio) {
		      this.setPlayerAttributesHandler(player, { muteAudio: false })
		      return
		    }
		    if (player.hasAudio && !player.muteAudio) {
		      this.setPlayerAttributesHandler(player, { muteAudio: true })
		      return
		    }
		  },
		
		  // 订阅 / 取消订阅某一个player Video
		  _mutePlayerVideo(event) {
		    const player = event.currentTarget.dataset.value
		    if (player.hasVideo && player.muteVideo) {
		      this.setPlayerAttributesHandler(player, { muteVideo: false })
		      return
		    }
		    if (player.hasVideo && !player.muteVideo) {
		      this.setPlayerAttributesHandler(player, { muteVideo: true })
		      return
		    }
		  },
		
		  //打开摄像头
		  _toggleVideoFun() {
		    if (this.pusher.enableCamera) {
		      this.publishLocalVideo(false);
		    } else {
		      this.publishLocalVideo(true);
		    }
		  },
		
		  /**
		 * 摄像头开关
		 * @returns {Promise}
		 */
		  publishLocalVideo(val) {
		    this.setPusherAttributesHandler({enableCamera: val})
		  },
		
		  
		
		/**
		 * 设置推流参数并触发页面渲染更新
		 * @param {Object} options live-pusher 的配置
		 * @returns {Promise}
		 */
		 setPusherAttributesHandler(options) {
		    this.pusher= this.TRTC.setPusherAttributes(options)
		    this.TRTC.getPusherInstance().start() // 开始推流（autoPush的模式下不需要）
		    console.log('看下人员',this.playerList)
		  },
		
		  // 挂断退出房间
		  _hangUp() {
		    this.exitRoom()
		    uni.reLaunch({
		      url: '/pages/callOver/index',
		      fail: e=>{
		        uni.switchTab({
		          url:'/pages/callOver/index'
		        })
		      }
		    })
		    setTimeout(()=>{
		      this.exitRoom();
		      //停止定时器,重置计时时间
		      this.resetMsgIPtime()
		      this.stopMsgIPtime()
		    },300)
		  },
		
		  // 设置美颜
		  _setPusherBeautyHandle() {
		    const  beautyLevel = this.pusher.beautyLevel === 0 ? 3 : 0
		    this.setPusherAttributesHandler({ beautyLevel })
		  },
		
		  // 发布 / 取消发布 Audio
		  _pusherAudioHandler() {
		    if (this.pusher.enableMic) {
		      this.setPusherAttributesHandler({ enableMic: false })
		    } else {
		      this.setPusherAttributesHandler({ enableMic: true })
		    }
		  },
		
		  _pusherSwitchCamera() {
		    const  frontCamera = this.pusher.frontCamera === 'front' ? 'back' : 'front'
		    this.TRTC.getPusherInstance().switchCamera(frontCamera)
		  },
		
		  _setPlayerSoundMode() {
		    if (this.playerList.length === 0) {
		      return
		    }
		    const player = this.TRTC.getPlayerList()
		    const soundMode = player[0].soundMode === 'speaker' ? 'ear' : 'speaker'
		    this.setPlayerAttributesHandler(player[0], { soundMode })
		  },
		  // 请保持跟 wxml 中绑定的事件名称一致
		  pusherStateChangeHandlerFun(event) {
		    const code = event.detail.code;
		    const message = event.detail.message;
		    console.log('监控状态码', 'pusherStateChange：', code, event);
		    this.TRTC.pusherEventHandler(event)
		  },
		  _pusherNetStatusHandler(event) {
		    this.TRTC.pusherNetStatusHandler(event)
		  },
		  _pusherErrorHandler(event) {
		    this.TRTC.pusherErrorHandler(event)
		  },
		  _pusherBGMStartHandler(event) {
		    this.TRTC.pusherBGMStartHandler(event)
		  },
		  _pusherBGMProgressHandler(event) {
		    this.TRTC.pusherBGMProgressHandler(event)
		  },
		  _pusherBGMCompleteHandler(event) {
		    this.TRTC.pusherBGMCompleteHandler(event)
		  },
		  _pusherAudioVolumeNotify(event) {
		    this.TRTC.pusherAudioVolumeNotify(event)
		  },
		  _playerStateChange(event) {
		    this.TRTC.playerEventHandler(event)
		  },
		  _playerFullscreenChange(event) {
		    this.TRTC.playerFullscreenChange(event)
		  },
		  _playerNetStatus(event) {
		    this.TRTC.playerNetStatus(event)
		  },
		  _playerAudioVolumeNotify(event) {
		    this.TRTC.playerAudioVolumeNotify(event)
		  },
		  //校验
		  checkParamFun(rtcConfig){
		    if (!rtcConfig.sdkAppID) {
		      console.error('未设置 sdkAppID');
		      this.methods("tips",'未设置 sdkAppID')
		      return false;
		    }
		
		    if (rtcConfig.roomID === undefined) {
		      console.error('未设置 roomID');
		      this.methods("tips",'未设置 roomID')
		      return false;
		    }
		
		    if (rtcConfig.roomID < 1 || rtcConfig.roomID > 4294967296) {
		      console.error('roomID 超出取值范围 1 ~ 4294967295');
		      this.methods("tips",'roomID 超出取值范围 1 ~ 4294967295')
		      return false;
		    }
		
		    if (!rtcConfig.userID) {
		      console.error('未设置 userID');
		      this.methods("tips",'未设置 userID')
		      return false;
		    }
		
		    if (!rtcConfig.userSig) {
		      console.error('未设置 userSig');
		      this.methods("tips",'未设置 userSig')
		      return false;
		    }
		
		    if (!rtcConfig.template) {
		      console.error('未设置 template');
		      this.methods("tips",'未设置 template')
		      return false;
		    }
		    return true
		  }
		
		
		  //提示
		  tips(str,len){
		    uni.showToast({
		      icon: "none",
		      duration: len?len:1000,
		      position: 'top',
		      title: str,
		    }) 
		  }
	 },
	 watch:{
		 config: {
		    handler: function(newVal, oldVal) {
		      console.log('watch config',newVal);
		    },
		    deep: true
		  },
	},
	computed:{
		_isEnterRoom:{
		    get () {
		      return this.isEnterRoom || false
		    },
		    set (val) {
		      this.$emit('update:isEnterRoom', val)
		    }
		  },
	}
	  
}
注意一些坑sdkId和secretKey一定要对,签名可以先用debug的模拟.

出现这个是因为小程序appid不对

''渲染失败，错误原因:

insertLivePusher:fail jsapi has no permission,

event=insertLivePusher, runningState=foreground, permissionMsg-permission got, detail=jsapi has nopermission

添加v-if使得数据更新,组件在一进页面就加载了,然后初始化了一个pusher,但是没有url,所以没有画面也接不通,等到进房之后重新赋值就友东西触发页面更新了,就有画面了.

无画面问题,但是这个v-if也使得元素消失,写法不对导致元素节点消失,所以关闭摄像头导致没有声音了.

有问题可以私聊详细交流

_小郑有点困了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
腾讯实时音视频SDK[一]:业务和场景
_小郑有点困了的博客
12-27 1587
应用场景 实现一个视频客服的平台,那么常规的电话对于处理现场问题,势必不太可行,所以就需要实时音视频.当用户在现场出现问题.例如:无法缴费/设备停电等情况. 业务实现 当用户于小程序端发起通话,后端先做排队/分配客服等操作.这些就不详谈了.主要是前端的逻辑. 1,用户扫码并点击求助按钮,携带相关信息参数跳转小程序 2,以websocket的形式进行长连接,将必要信息给到后端 3,后端接到求助消息,然后生成房间号 4,分配客服,房间号先下发到客服,客服先进房间 5,然后再给到用户 5,双方都进房间,方可
腾讯实时音视频通话sdk集成----小程序版本
m0_59910554的博客
03-17 759
【代码】腾讯实时音视频通话sdk集成----小程序版本。
微信小程序接入腾讯SDK的步骤
qq_39784865的博客
04-08 4865
1、申请开发者秘钥：打开网站https://lbs.qq.com/dev/console/application/mine PS:如果还没注册开发者账户先自行注册，注册成功之后登录进入腾讯位置的控制台界面，创建应用，添加key即可 2、下载微信小程序JavaScriptSDKhttps://lbs.qq.com/qqmap_wx_jssdk/ 3、安全域名设置，登录小程序管理后台，在小程序管理后台-> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置...
uniapp 小程序接入腾讯实时音视频trtc-wx
m0_46693606的博客
03-14 2131
微信 App iOS 最低版本要求：7.0.9微信 App Android 最低版本要求：7.0.8小程序基础库最低版本要求：2.10.0由于小程序测试号不具备 和 的使用权限，请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件（即 和 标签），需要在真机上进行运行体验。
微信小程序实时音视频的使用
haming123的专栏
09-28 3871
本文我们介绍如何使用live-pusher组件和live-player组件以及腾讯云实时音视频产品来开发一个视频通话的小程序。
【多人会议功能】uniapp - 微信小程序 - 腾讯云
qq_39891453的博客
10-20 3561
uniapp微信小程序通过腾讯云实现多人会议功能。
腾讯云实时音视频聊天房-小程序专用SDK-精简版（TRTC）
01-05
微信开发者工具直接导入（测试跑通账号在腾讯云里创建） 精简版仅包含 TRTC 和直播播放（TXLivePlayer）两项功能，对 App 的安装包体积增量最小，适合仅使用 TRTC 相关功能的客户。 TRTC官方说明网址：...
基于腾讯云多人音视频SDK的功能实现
最新发布
09-18
本文将深入探讨基于腾讯云多人音视频SDK的功能实现，帮助开发者更好地理解和应用这一技术。 首先，我们需要理解腾讯云多人音视频SDK的基本架构。这个SDK包含了音频处理、视频编码与解码、网络传输、设备管理等多个...
微信小程序音视频SDK包
04-17
微信小程序音视频SDK包是专为开发者设计的一款强大的工具，旨在提供全面的音视频功能，以支持各种在线应用场景，如远程网络视频会议、在线远程教育、屏幕共享、电子白板、影音共享以及在线直播等。这个SDK包的核心是...
在小程序中使用腾讯视频插件播放教程视频的方法
08-27
本文将详细介绍如何在小程序中使用腾讯视频插件来播放教程视频，同时也简要提及使用视频组件的方式。 首先，尝试直接使用视频组件播放服务器上的视频。这可以通过在`<video>`组件中设置`src`属性来实现，如 `...
仿腾讯视频小程序.zip微信小程序模板源码纯前端静态小程序源码
02-23
3. **音视频处理**：腾讯视频小程序中，必然涉及到音视频播放功能。开发者需要理解如何使用微信小程序的媒体API来加载、播放、控制视频，并处理错误。此外，可能还需要实现视频预加载、播放进度控制和全屏播放等功能...
QQmusicPlayer播放器
01-07
QQ music Player 播放器 源码 有效果图
腾讯语音识别sdk-Android-Demo
11-15
腾讯语音识别sdk 安卓demo（Eclipse），用于参考， 详细参考腾讯官网：https://cloud.tencent.com/document/product/441/6892
语音识别sdk_语音识别 sdk_离线语音识别sdk - 云+社区 - 腾讯云
q6q6q的专栏
10-27 1616
广告关闭2017年12月，云+社区对外发布，从最开始的技术博客到现在拥有多个社区产品。未来，我们一起乘风破浪，创造无限可能。录音文件识别请求,数据结构,android sdk,ios sdk,自学习模型,使用云函数方式的录音文件识别,node.js sdk,热词,node.js sdk,更新热词表,获取热词表,删除热词表,创建热词表,设置热词表状态,列举热词表,下载热词表,识别效果问题排查,产品动...
【新知实验室--音视频通话】腾讯云TRTC-实时音视频---多人会议视频通话SDK基础搭建
m0_61486963的博客
11-30 2082
为实现 视频通话 一般来说是需要掌握许多的技术栈的，并且学习与搭建过程在没有人指导的时候，会很痛苦，所以至今为止，我都没有顺理出来，搭建视频通话的学习路径CSDN 联合 腾讯云–TRTC （实时音视频服务）展开了 “腾讯云音视频-新知实验室-TRTC实时音视频体验计划”从官方的介绍中，我知道了原来现在已经有第三方的音视频服务工具SDK，帮助开发者快速的搭建音视频服务更多SDK使用细节详情，在 ‘音视频热门场景实战训练营’直播回放中可以了解腾讯实时音视频文档。
微信小程序接入腾讯云实时音视频TRTC----基本使用
weixin_47886687的博客
08-12 5132
一.在腾讯云申请账号，拿到adkAppID 二.下载腾讯云demo 三.分析demo 跑通Demo与快速集成有官方介绍,以下记录自己理解.
腾讯 TRTC Web SDK 的应用实践
我是小兵
04-28 4133
核心是看文档哦文档新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 文档 参考：https://trtc-12...
一个基于腾讯云实时音视频的SDKdemo
平平无奇程序员
11-05 5216
哈咯大家好，这里是码农的搬运工！！ 这几天也是一时兴起，想到腾讯云的实时音视频的SDK来进行一个真正的视频通话，也是编写了一个小小的demo 话不多说，整活，开干！！！ 首先哈，我们评估下腾讯云的这个实时音视频SDK【有利也有弊】（此篇文档仅针对web端的SDK哈）： 一、本身腾讯云的实时音视频SDK使用的是Chrome推出的WebRTC的协议，会有一定的限制性，参考腾讯云官方文档哈： 实时音视频 API 概览 - 客户端 API - 文档中心 - 腾讯云 ...
两个小程序之间如何实现实时音视频通话？代码如何实现？
07-14
要在两个小程序之间实现实时音视频通话，可以借助腾讯云的实时音视频 SDK（TRTC）和实时音视频云服务。 以下是实现步骤和代码示例： 步骤一：准备工作 1. 在腾讯云官网注册账号并创建云通信应用，获取 SDKAppID。 2. 下载 TRTC 的小程序 SDK，并在小程序项目中引入。 步骤二：初始化 SDK 在小程序的 App.js 中初始化 TRTC SDK，代码示例如下： ```javascript const trtcConfig = { SDKAppID: 'your_SDKAppID', // 替换为实际的 SDKAppID }; App({ onLaunch: function () { wx.$trtc = require('./path/to/TRTCSDK.js').createInstance(trtcConfig); } }); ``` 步骤三：实现音视频通话 1. 在小程序页面中创建 TRTC 实例，并设置事件监听： ```javascript const trtcInstance = getApp().$trtc; Page({ data: { roomId: '', localView: '', remoteView: '', }, onLoad: function () { trtcInstance.on('onLocalView', (e) => { this.setData({ localView: e.view }); }); trtcInstance.on('onRemoteView', (e) => { this.setData({ remoteView: e.view }); }); trtcInstance.on('onUserExit', (e) => { // 处理用户退出房间的逻辑 }); }, joinRoom: function () { const roomId = this.data.roomId; const userId = 'your_user_id'; // 替换为实际的用户 ID trtcInstance.joinRoom(roomId, userId); }, exitRoom: function () { trtcInstance.exitRoom(); } }); ``` 2. 在小程序页面的 WXML 中使用 live-player 组件展示本地和远程视频画面： ```html <!-- 本地画面 --> <live-player src="{{localView}}" bindplay="onPlay"></live-player> <!-- 远程画面 --> <live-player src="{{remoteView}}" bindplay="onPlay"></live-player> ``` 3. 在小程序页面的 WXSS 中设置 live-player 的样式： ```css live-player { width: 100%; height: 100%; } ``` 4. 其他用户加入房间后，会触发 `onRemoteView` 事件，将远程视频画面展示在 live-player 组件中。 这样，两个小程序就可以通过 TRTC 实现实时音视频通话了。具体的实现细节还需要根据业务需求进行调整和完善。以上仅为简单示例，更详细的代码和功能可以参考腾讯云 TRTC 小程序 SDK 的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值