Vue+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官网icon-default.png?t=N7T8https://uniapp.dcloud.io/component/live-player

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

必须是nvue后缀

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

页面代码: