广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

uniapp实现直播的方法：首先通过推流，代码为【<button class="btn" @click="start">开始推流</button>】；然后使用video标签实现拉流即可。

本教程操作环境：windows7系统、uni-app2.5.1版本，Dell G3电脑。

uniapp实现直播的方法：

1、推流

<template>    <view class="content">        <template>            <view>                <live-pusher                    id="livePusher"                    ref="livePusher"                    class="livePusher"                    url=""  **这里需要请求后端接口，拿到推流地址**                    mode="SD"                    :muted="true"                    :enable-camera="true"                    :auto-focus="true"                    :beauty="1"                    whiteness="2"                    aspect="9:16"                    @statechange="statechange"                    @netstatus="netstatus"                    @error="error"                ></live-pusher>                <button class="btn" @click="start">开始推流</button>                <button class="btn" @click="pause">暂停推流</button>                <button class="btn" @click="resume">resume</button>                <button class="btn" @click="stop">停止推流</button>                <button class="btn" @click="snapshot">快照</button>                <button class="btn" @click="startPreview">开启摄像头预览</button>                <button class="btn" @click="stopPreview">关闭摄像头预览</button>                <button class="btn" @click="switchCamera">切换摄像头</button>                <button class="btn" @click="bofang">去播放</button>            </view>        </template>    </view></template><script>export default {    data() {        return {            context:[]        };    },    onReady() {        // 注意：需要在onReady中 或 onLoad 延时        this.context = uni.createLivePusherContext('livePusher', this);    },    methods: {        statechange(e) {            console.log('statechange:' + JSON.stringify(e));        },        netstatus(e) {            console.log('netstatus:' + JSON.stringify(e));        },        error(e) {            console.log('error:' + JSON.stringify(e));        },        start(){            this.context.start({                success: a => {                    console.log('livePusher.start:' + JSON.stringify(a));                },                error:err=>{                    console.log(err)                }            });        },        close() {            this.context.close({                success: a => {                    console.log('livePusher.close:' + JSON.stringify(a));                }            });        },        snapshot() {            this.context.snapshot({                success: e => {                    console.log(JSON.stringify(e));                }            });        },        resume() {            this.context.resume({                success: a => {                    console.log('livePusher.resume:' + JSON.stringify(a));                }            });        },        pause() {            this.context.pause({                success: a => {                    console.log('livePusher.pause:' + JSON.stringify(a));                }            });        },        stop() {            this.context.stop({                success: a => {                    console.log(JSON.stringify(a));                }            });        },        switchCamera() {            this.context.switchCamera({                success: a => {                    console.log('livePusher.switchCamera:' + JSON.stringify(a));                }            });        },        startPreview() {            this.context.startPreview({                success: a => {                    console.log('livePusher.startPreview:' + JSON.stringify(a));                }            });        },        stopPreview() {            this.context.stopPreview({                success: a => {                    console.log('livePusher.stopPreview:' + JSON.stringify(a));                }            });        },        bofang(){            this.$u.route({                url: 'pages/index/index'            })        }    }};</script><style>.content {    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;}.logo {    height: 200rpx;    width: 200rpx;    margin-top: 200rpx;    margin-left: auto;    margin-right: auto;    margin-bottom: 50rpx;}.text-area {    display: flex;    justify-content: center;}.title {    font-size: 36rpx;    color: #8f8f94;}</style>**

2、拉流

这里是app拉流，用的是video标签，代码如下

<template>    <view>        <video src="" style="width: 100vw;height: 400rpx;" :autoplay="true" controls></video>    </view></template> <script>    export default {}</script>

src是请求接口得到的拉流地址

相关免费学习推荐：php编程（视频）

推荐（免费）：uni-app开发教程

以上就是uniapp如何实现直播的详细内容，更多请关注9543建站博客其它相关文章！