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

提示：

前言

目前有一个项目,需要做一个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