下方配有完整Demo 并且已跑通 （vue语法）
准备工作
在集成小程序 SDK 前，请确保您已完成以下步骤
- 创建了腾讯云实时音视频应用，购买了相应的套餐，并获取到 SDKAppID 和密钥信息。
- 开通小程序类目与推拉流标签权限。
- 小程序服务器域名配置。
如何引用
您可以通过 npm 包的方式进行引用，也可以通过 SDK 资源 下载 trtc-wx.js 文件，直接进行引用。（我是直接下载的trtc-wx.js 文件）
npm 方式安装：
npm install trtc-wx-sdk
import TRTC from 'trtc-wx-sdk'
步骤1：创建符合您业务场景 WXML 文件模板
根据您的业务场景，编写 wxml 文件，创建 &dxlt;live-pusher&dxgt; 和 &dxlt;live-player&dxgt;，并将标签上的属性与 trtc-wx 提供的方法相绑定
<template>
<view style="height: 100%;">
<live-pusher class="pusher"
: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"
:beauty-style="pusher.beautyStyle"
:filter="pusher.filter"
@statechange="_pusherStateChangeHandler"
@netstatus="_pusherNetStatusHandler"
@error="_pusherErrorHandler"
@bgmstart="_pusherBGMStartHandler"
@bgmprogress="_pusherBGMProgressHandler"
@bgmcomplete="_pusherBGMCompleteHandler"
@audiovolumenotify="_pusherAudioVolumeNotify" />
<!-- 这个playerList应该是个长度为3的数组，具体会由房间内有多少人决定 -->
<view v-for="(item,index) in playerList" :key="index" :id="'player-'+item.streamID">
<live-player class="player"
:id="item.id"
:data-streamid="item.streamid"
: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>
</template>
在 trtc-wx 包中导出的是一个名为 TRTC 的类，您需要在 onLoad 的生命周期中，在当前页面去实例化这个类，同时创建 Pusher，并监听 TRTC 抛出的事件
/**
* 生命周期函数// 在生命周期中新建一个TRTC的类
*/
onLoad: function(options) {
var that = this
that.TRTC = new TRTC(that)
that.EVENT = that.TRTC.EVENT
//监听本地进房事件
that.TRTC.on(that.EVENT.LOCAL_JOIN, (event) => {
console.log('本地进房', event.stream)
}, that)
// rtcConfig 是初始化参数，返回初始化后的推流状态，需要与模板相结合
that.pusher = that.TRTC.createPusher({
'frontCamera': 'back'
})
that.enterRoom();
},
步骤2：开始推流
首先需要进入我们的 TRTC 房间，调用 enterRoom 的方法
enterRoom(options) {
var that = this
const Signature = genTestUserSig('sssss')
console.log(Signature, 'pusher')
that.pusher = that.TRTC.enterRoom({
sdkAppID: Signature.sdkAppID, // 您的腾讯云账号
userID: 'sssss', //当前进房用户的userID
userSig: Signature.userSig, // 您服务端生成的userSig
roomID: 1234, // 您进房的房间号，
enableMic: true, // 进房默认开启音频上行
enableCamera: true, // 进房默认开启视频上行
debugMode:true,
}),
that.TRTC.getPusherInstance().start() // 开始进行推流
},
下面是完整代码， 已跑通，测试可以通话（只是跑通正常的音视频通话），可以根据自己的业务需求增加相应的功能 （复制上加上GenerateTestUserSig。js文件就可以了）
GenerateTestUserSig。js里面的配置请看官方文档
<template>
<view style="height: 100%;">
<live-pusher class="pusher"
: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"
:beauty-style="pusher.beautyStyle"
:filter="pusher.filter"
@statechange="_pusherStateChangeHandler"
@netstatus="_pusherNetStatusHandler"
@error="_pusherErrorHandler"
@bgmstart="_pusherBGMStartHandler"
@bgmprogress="_pusherBGMProgressHandler"
@bgmcomplete="_pusherBGMCompleteHandler"
@audiovolumenotify="_pusherAudioVolumeNotify" />
<!-- 这个playerList应该是个长度为3的数组，具体会由房间内有多少人决定 -->
<view v-for="(item,index) in playerList" :key="index" :id="'player-'+item.streamID">
<live-player class="player"
:id="item.id"
:data-streamid="item.streamid"
: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>
</template><script>
import {genTestUserSig} from '../../debug/GenerateTestUserSig.js'
import TRTC from '../../common/trtc-wx.js'
export default {
data() {
return {
pusher: {},
playerList: {},
EVENT:null
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this
that.TRTC = new TRTC(that)
that.EVENT = that.TRTC.EVENT
that.TRTC.on(that.EVENT.LOCAL_JOIN, (event) => {
console.log('本地进房', event.stream)
}, that)
that.TRTC.on(that.EVENT.REMOTE_USER_JOIN, (event)=>{
console.log('远端进房',event.stream)
},that)
this.TRTC.on(that.EVENT.LOCAL_LEAVE, (event)=>{
console.log('本地退房成功',event.stream)
})
// rtcConfig 是初始化参数，返回初始化后的推流状态，需要与模板相结合
that.pusher = that.TRTC.createPusher({
'frontCamera': 'back'
})
that.enterRoom();
},
onShow() {
},
methods: {
enterRoom(options) { var that = this
const Signature = genTestUserSig('sssss')
console.log(Signature, 'pusher')
that.pusher = that.TRTC.enterRoom({
sdkAppID: Signature.sdkAppID, // 您的腾讯云账号
userID: 'sssss', //当前进房用户的userID
userSig: Signature.userSig, // 您服务端生成的userSig
roomID: 1234, // 您进房的房间号，
enableMic: true, // 进房默认开启音频上行
enableCamera: true, // 进房默认开启视频上行
debugMode:true,
}),
that.TRTC.getPusherInstance().start() // 开始进行推流
}, }
}
</script>
<style scoped lang="scss">
.pusher{
height: 100%;
}
</style>
