uniapp简易直播 _直播

【uniapp简易直播】枕上从妨一夜睡，灯前读尽十年诗。这篇文章主要讲述uniapp简易直播相关的知识，希望能为你提供帮助。
实验准备

在服务器部署nginx-rtmp作为我们直播推流和拉流的服务器（如果服务商选择七牛，也是直接给地址推流）。为了加快部署，我在这一步使用Docker。

docker pull tiangolo/nginx-rtmp docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp

记下推流地址（我本地搭建的：192.168.1.178:1935）
新建Uniapp项目
点击项目下方的manifest.json文件，点击APP常用其他设置去除V3编译器（Hbuilder 2.5.9 alpha V3模式会报uni.createLivePusherContext的错）

Part 1 直播推流index.nvue(uni.createLivePusherContext在APP端仅支持Nvue)

< template> < view> < live-pusher id=" livePusher" :url=" url" mode=" FHD" > < /live-pusher> < button @click=" startLive" > 开始推流（开始直播）< /button> < button @click=" stopLive" > 结束推流< /button> < /view> < /template> < script> export default { data() { return { url: ' rtmp://192.168.1.178:1935/live/exp' , enableCamera: false, context: null }; }, onReady() { this.context = uni.createLivePusherContext(' livePusher' , this); }, methods: { EnableCamera() { this.enableCamera = true; }, 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>

Part 2 直播拉流(播放)

App的实时音视频播放，不是使用 live-player，而是直接使用 video 组件。（来源：官网文档）

< template> < view> < video src=https://www.songbingjia.com/android/" rtmp://192.168.1.178:1935/live/exp" style=" width: 100vw; height: 400rpx; " :autoplay=" true" controls> < /video> < /view> < /template> < script> export default {} < /script>

效果