## 一、创建直播间页面 ## 二、 点击中间按钮进入直播间页面 ## 三、隐藏顶部标题栏 ## 四、使用live-pusher组件 ## 五、开启预览 ## 六、 最终代码 ``` <template> <view> <live-pusher id="livePusher" ref="livePusher" class="livePusher" url="" :mode="mode" :muted="true" :enable-camera="enableCamera" :auto-focus="autoFocus" :beauty="beauty" whiteness="whiteness" device-position = "devicePosition" @statechange="statechange" @netstatus="netstatus" @error="error" :style="{'height' : windowHeight + 'px' }" style="width:750rpx" ></live-pusher> </view> </template> <script> export default { data() { return { // 屏幕的高度 windowHeight : 0, // 保存live-pusher 实例对象 context : null, // 推流地址，支持RTMP协议。 url : "", // 推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。 mode : "SD", // 开启摄像头 enableCamera : true, // 自动聚集 autoFocus : true, // 美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 beauty : 0, // 美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。 whiteness : 0, // 前置或后置，值为front, back devicePosition : "back" }; }, onLoad() { const res = uni.getSystemInfoSync() this.windowHeight = res.windowHeight console.log(this.windowHeight) }, onReady() { this.context = uni.createLivePusherContext("livePusher",this) this.startPreview() }, methods: { // 开启预览 startPreview(){ this.context.startPreview({ success : (e)=>{ console.log(e) } }) }, // 监听直播状态的变化 statechange(e){ console.log(e) }, // 监听直播网络状态变化 netstatus(e){ console.log(e) }, // 监听直播错误变化 error(e){ console.log(e) } } }; </script> <style></style> ```