一、Hbuilderx 安装

(本文Hbuilderx版本2.9.3.20201014)
https://www.dcloud.io/hbuilderx.html

二、创建项目

项目选择uni-app，模板选择内置uni-ui项目模板

项目创建

三、创建页面

在项目pages下右键新增页面，这里需要注意一下：页面格式分别有vue和nvue(native vue)两种，如果只是做小程序或者网页采用vue即可，但由于直播和推流都涉及原生组件开发所以有关页面需要采用nvue，vue和nvue是可以同时并存的，开发模式也是一样，相关区别可以查看这里 https://uniapp.dcloud.io/use-weex

创建页面

四、跑一下推流案例

相关文档：https://uniapp.dcloud.io/api/media/live-pusher-context?id=createlivepushercontext

<template>
    <view>
        <live-pusher id="livePusher" :url="url" :enable-camera="enableCamera" mode="FHD"></live-pusher>
        <button @click="startLive">开始推流（开始直播）</button>
        <button @click="stopLive">结束推流</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                url: 'rtmp://vpush.qdd88.cn/live/621FD133-889D-1707-CF0E-83A8A715D412',
                enableCamera: true,
                context: null
            };
        },
        onReady() {
            this.context = uni.createLivePusherContext('livePusher', this);
            this.context.switchCamera() // 摄像头切换（切换为后置）
            this.context.startPreview() // 摄像头预览 （不加会黑屏）
        },
        methods: {
            startLive() {
                this.context.start({
                    success: a => {
                        console.log('livePusher.start:' + JSON.stringify(a));
                    }
                });
            },
            stopLive() {
                this.context.stop({
                    success: a => {
                        console.log(JSON.stringify(a));
                    }
                });
            }
        }
    };
</script>

五、效果图

效果图

六、总结

花了一天的时间，踩了不少的坑坑，终于还是跑出来了，后面章节将开始优化推流页面，重点可能是原生层级关系！
坑坑列表：
plus.video.createLivePusher

官方建议