sanling

文件操作

将uni_modules/streaming目录，复制到uni_modules目录中，如果不存在则创建目录

添加本地\云端插件

购买并添加腾讯云直播插件，插件地址：https://ext.dcloud.net.cn/plugin?id=2786
打开manifest.json，选择“App原生插件配置”，点击“选择云端插件”，勾选腾讯云直播

config目录中app.js添加以下代码

export const LIVE_APP_ID         = 'e33149aae5'; //直播方提供的app_id
export const LIVE_APP_SECRET     = 'M2Y4MjBmMWRlMjMxYWYwNmU4MTFhZTRkZTg4MGEyNGExMjU2YzBmZTE2YjhiNWMxZGQ4ZjlkYjA1ZDAzMmE0OQ=='; //直播方提供的app_secret
export const LIVE_HTTP_URL       = 'https://live.alitest.yaoyuankj.top';//直播端接口地址
export const LIVE_WS_URL         = 'wss://live.alitest.yaoyuankj.top/message';//直播端WebSocket接口地址
export const LIVE_DEBUG          =  false;//false关闭所有console输出

项目初始化

npm init -y
npm install crypto-js --save
npm install hashids --save

内容插槽可以写成通用组件，引入template内部(代码使用nvue写法)

创建承载直播页面=>例如：push.nvue

<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<RY-TencentLive-Pusher class="live" ref="livePusher" v-bind:style="{ width: playerWidth, height: playerHeight,background: '#252e37' }"></RY-TencentLive-Pusher>
		<!-- #endif -->
		<live-push ref="livePush" @goDetail="goDetail" @buyGoods="buyGoods" @shearRoom="shearRoom">
			<template v-slot:goodsDetail>
				<view  style="width: 100%;height: 300px;background-color: darkcyan;margin-bottom: 10px;border-radius: 20rpx 20rpx 0 0;">
					商品详情
				</view>
			</template>
		</live-push>
	</view>
</template>

直播页面javascript部分添加代码

<script>
	import stream from '@/uni_modules/streaming/js/streaming.js';
	export default {
		data() {
			return {
				playerWidth:uni.getSystemInfoSync().windowWidth,//屏幕宽度
				playerHeight:uni.getSystemInfoSync().windowHeight//屏幕高度
			}
		},
		onLoad(option) {
			let self = this 
			this.$nextTick(function() {
				// 直播初始化
				stream.init({
					liveId: option.liveId, //直播方直播间id
					livePusher: self.$refs.livePusher, //直播初始化
					liveType: 'push', //直播类型标记（push为直播端）
				});
			})
		},
		methods:{
			// 商品详情
			goDetail(data) {
				console.log("商品详情", data);
				// 返回值说明
				// data={
				// 	"goodsId": "",//业务方直播商品id
				// 	"liveId": "",//直播方直播间id
				// }
			},
			// 橱窗商品去抢购
			buyGoods(data){
				console.log("商品详情", data);
				// 返回值说明
				// data={
				// 	"goodsId": "",//业务方直播商品id
				// }
			},
			// 分享
			shearRoom(data) {
				console.log("分享", data);
				// 返回值说明
				// data={
				// 	"liveId": "",//直播方直播间id
				// 	"title": "",//直播方直播间标题
				// 	"cover": "",//直播方直播间头像
				// }
			}
		}
	}
</script>

创建承载播放页面=>例如：play.nvue

<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<RY-TencentLive-Player class="live" ref="livePlayer" v-bind:style="{ width: playerWidth, height: playerHeight, background: '#252e37' }"></RY-TencentLive-Player>
		<!-- #endif -->
		<live-play ref="livePlay" @goDetail="goDetail" @buyGoods="buyGoods" @shareRoom="shareRoom">
			<template v-slot:goodsDetail>
				<view  style="width: 100%;height: 300px;background-color: darkcyan;margin-bottom: 10px;border-radius: 20rpx 20rpx 0 0;">
					商品详情
				</view>
			</template>
		</live-play>
	</view>
</template>

播放页面javascript部分添加代码

<script>
	import stream from '@/uni_modules/streaming/js/streaming.js';
	export default {
		data() {
			return {
				playerWidth:uni.getSystemInfoSync().windowWidth,//屏幕宽度
				playerHeight:uni.getSystemInfoSync().windowHeight//屏幕高度
			}
		},
		onLoad(option) {
			let self = this
			this.$nextTick(function() {
				// 直播初始化
				stream.init({
					liveId: option.liveId, //直播方直播间id
					userId: option.userId, //业务端用户id
					nickName: option.nickName, //业务端用户昵称
					livePlayer: self.$refs.livePlayer, //播放端初始化
					liveType: 'play', //直播类型标记（play为播放端）
				});
			})
		},
		methods:{
			// 商品详情
			goDetail(data) {
				console.log("商品详情", data);
				// 返回值说明
				// data={
				// 	"goodsId": "",//业务方直播商品id
				// 	"liveId": "",//直播方直播间id
				// }
			},
			// 橱窗商品去抢购
			buyGoods(data){
				console.log("商品详情", data);
				// 返回值说明
				// data={
				// 	"goodsId": "",//业务方直播商品id
				// }
			},
			// 分享
			shareRoom(data) {
				console.log("分享", data);
				// 返回值说明
				// data={
				// 	"liveId": "",//直播方直播id
				// 	"title": "",//直播方直播间标题
				// 	"cover": "",//直播方直播间头像
				// }
			}
		}
	}
</script>