Vue+Uniapp实现直播功能（推流拉流）

前端世界的蒋小姐

已于 2023-08-30 09:54:38 修改

阅读量1.8w

点赞数 7

分类专栏： uniapp+vue直播文章标签：前端 vue.js

于 2022-03-31 22:40:04 首次发布

本文链接：https://blog.csdn.net/weixin_51258044/article/details/123884057

版权

本文介绍了如何使用Vue和Uniapp实现直播功能，前端利用uniapp的live-pusher进行推流，vue结合flv.js进行拉流播放。讨论了uniapp推流的配置和vue拉流时遇到的跨域与304状态码问题，并推荐了相关资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：

前言

目前有一个项目,需要做一个APP和一个PC端网页，主要功能是类似直播，经查阅资料，可采用uniapp+vue+推流拉流的技术，前端使用uniapp打开摄像头，并将视频流推流给后端，后端将视频流进行处理，形成m3u6或者flv格式的视频，前端使用flv.js进行播放视频流。

总共分为二部分，一篇是针对uniapp+vue（前端），另一篇是ngxin直播服务器的搭建(后端)。

一、核心插件

uniapp推流：（自带标签）live-pusher推流

vue拉流：flv.js视频播放器

1.uniapp推流

官方代码参考：实现推流

live-player | uni-app官网https://uniapp.dcloud.io/component/live-player

创建uniapp项目
在pages–>index–>新建live.nvue页面

必须是nvue后缀

uniapp中的manifest.json文件，左侧菜单找到App模块配置，勾选 LivePusher(直播推流)

页面代码：

<template>
    <view>
        <view class="account-form">
            <view class="uni-form-item">
                <view class="uni-input-wrapper">
                    <view class="uni-label uni-label-must">直播间标题</view>
                    <input class="uni-input" placeholder="请输入直播间标题" :value="form.liveroomTitle" @input="changeInput($event,'liveroomTitle')"/>
                </view>
            </view>
        </view>
        <button class="cu-btn bg-red margin-tb-sm lg" v-if="!startState" @click="saveForm">开始直播</button>
        <button class="cu-btn bg-red margin-tb-sm lg" v-if="startState" @click="downcast">关闭直播</button>
        <button class="cu-bt

最低0.47元/天解锁文章