Skip to content
广告位招租广告位招租

兼容端

安卓苹果Web鸿蒙小程序

使用示例

vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view>
			<button @click="handleRegisterLicense">注册License</button>
			<button @click="handleRequestPermission">申请权限</button>
			
			<button @click="handlePusher">打开推流视图 - Pusher</button>
			<button @click="handlePlayer">打开拉流视图 - Player</button>
			<button @click="handleSetVideoQuality">设置画面质量 - Pusher</button>
			
			<button @click="handleStartPush">开启推流 - Pusher</button>
			<button @click="handleStartPlayer">开启拉流 - Player</button>
		</view>
		<view v-if="state.pusher">
			<text>直播推流</text>
			<t-tlive-pusher
				style="width: 200px;height: 300px;background-color: rgba(0, 0, 0, 0.1);" 
				ref="TlivePusher"
				:protocol="2"
			></t-tlive-pusher>
		</view>
		<view v-if="state.player">
			<text>直播拉流</text>
			<t-tlive-player
				style="width: 200px;height: 300px;"
				ref="TlivePlayer"
			></t-tlive-player>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script lang="uts">
	import * as Tlive from "@/uni_modules/t-tlive"
	
	type stateType = {
		pusher: boolean;
		player: boolean;
	}
	export default {
		data() {
			return {
				state: {
					pusher: false,
					player: false
				} as stateType
			}
		},
		onReady(){
			this.handleRegisterLicense()
		},
		methods: {
			handleRegisterLicense() {
				Tlive.loadLicence({
					licenceURL: "",
					licenceKey: "",
					success: (result: Tlive.TTliveResult) => {
						console.log(result)
					},
					fail: (result: Tlive.TTliveResult) => {
						console.log(result)
					}
				} as Tlive.TTliveOptions)
			},
			handleRequestPermission(){
				Tlive.requestPermission({
					success: (result: Tlive.TTliveResult) => {
						console.log(result)
					},
					fail: (result: Tlive.TTliveResult) => {
						console.log(result)
					}
				} as Tlive.TTliveOptions)
			},
			handlePusher() {
				this.state.pusher = true
			},
			handlePlayer(){
				this.state.player = true
			},
			handleStartPush(){
				(this.$refs['TlivePusher'] as TTlivePusherElement).startPush({
					pushURL: "",
					success: (result: Tlive.TTliveResult) => {
						console.log(result)
					},
					fail: (result: Tlive.TTliveResult) => {
						console.log(result)
					}
				} as Tlive.TTliveOptions)
			},
			handleSetVideoQuality() {
				(this.$refs['TlivePusher'] as TTlivePusherElement).setVideoQuality({
					videoFps: 24,
					resolution: 19201080,
					resolutionMode: 2,
					videoBitrate: 1200,
					minVideoBitrate: 800,
					success: (result: Tlive.TTliveResult) => {
						console.log(result)
					},
					fail: (result: Tlive.TTliveResult) => {
						console.log(result)
					}
				} as Tlive.TTliveOptions)
			},
			handleStartPlayer() {
				(this.$refs['TlivePlayer'] as TTlivePlayerElement).startLivePlay({
					flvUrl: "",
					success: (result: Tlive.TTliveResult) => {
						console.log(result)
					},
					fail: (result: Tlive.TTliveResult) => {
						console.log(result)
					}
				} as Tlive.TTliveOptions)
			}
		}
	}
</script>

暴露的类型

ts
export type TTliveResult = {
	code: number;
	msg: string;
	data?: any;
}
export type TTliveOptions = {
	licenceURL?: string;
	licenceKey?: string;
	pushURL?: string;	// 推流地址
	resolution?: number;	// 视频分辨率
	resolutionMode?: number;	// 视频模式
	videoFps?: number;	// 视频采集帧率
	videoBitrate?: number;	// 视频码率
	minVideoBitrate?: number;	// 最低视频码率
	flvUrl?: string;	// 拉流地址
	fillMode?: number;	// 拉流窗口适配
	success?: (result: TTliveResult) => void;
	fail?: (result: TTliveResult) => void;
}