利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

简介: 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云的有偿直播服务,服务包括软硬件设备,摄像机,编码器,流媒体服务器等。但是其高昂的费用以及较高的准入门槛让许多个人和小型企业望而却步,本文要讲解的是如何使用nginx-rtmp搭建直播服务器,配合FFmpeg推流,在网页端vue.js作为载体利用video.js作为流播放器,打造一套可用的在线视频直播方案。

众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云的有偿直播服务,服务包括软硬件设备,摄像机,编码器,流媒体服务器等。但是其高昂的费用以及较高的准入门槛让许多个人和小型企业望而却步,本文要讲解的是如何使用nginx-rtmp搭建直播服务器,配合FFmpeg推流,在网页端vue.js作为载体利用video.js作为流播放器,打造一套可用的在线视频直播方案。

视频直播的流程可以分为如下几步:

采集 —>处理—>编码和封装—>推流到服务器—>服务器流分发—>播放器流播放

实现直播节目在终端上的展现。因为我这里使用的传输协议是RTMP, 所以只要支持RTMP 流协议的播放器都可以使用,这里我们使用nginx,

一般情况下视频采集处理后推流到流媒体服务器,第一部分功能完成。第二部分就是流媒体服务器,负责把从第一部分接收到的流进行处理并分发给观众。第三部分就是客户端播放,只需要拥有支持流传输协议的播放器即可

搭建直播服务器是一个漫长而复杂的过程,编译设置有点繁琐。好在docker上有大把别人编译设置好的rtmp环境,所以可以直接拿来用,docker的优越性由此可见一斑,这里用到的是alfg/nginx-rtmp库。

安装docker,可以在阿里云的镜像上下载比较快一点http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/

目前稳定版是DockerToolbox-18.03.0-ce.exe 直接点击安装即可

安装过程有一点需要注意,必须要开启本机bios的cpu虚化技术

安装好docker后,下载nginx-rtmp镜像,并且运行服务映射端口到1945和8000

docker pull alfg/nginx-rtmp
docker run -it -p 1935:1935 -p 8000:80 --rm alfg/nginx-rtmp

访问宿主的8000端口显示nginx欢迎页面

然后利用FFmpeg进行推流操作,ffmpeg是什么请移步:Python3利用ffmpeg针对视频进行一些操作

输入命令,注意摄像头和麦必须和电脑的设备吻合,另外推流服务器也要推到刚刚部署好的nginx上面去

ffmpeg -f dshow -i video="VMware Virtual USB Video Device":audio="Microphone (High Definition Audio Device)" -tune:v zerolatency -f flv "rtmp://192.168.99.100:1935/stream/test"

推流成功后,我们就要在网站上观看现场直播了,这里前端服务我们使用vue.js来搭建,视频流播放器我们使用video.js

首先建立一个直播的脚手架项目,然后安装一下必要的直播库,最后启动项目

#建立项目
vue init webpack-simple zhibo
cd zhibo
cnpm install vue-router save
cnpm install

#安装直播组件
cnpm install video.js
cnpm install aes-decrypter
cnpm install m3u8-parser
cnpm install mpd-parser
cnpm install mux.js
cnpm install url-toolkit
cnpm install videojs-contrib-hls

#热启动项目
cnpm run dev

新建一个video.vue,添加播放代码

<template>
    <div>

    

      <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" >
    <!-- 直播地址就是nginx映射后的播放地址,注意后缀为直播流的m3u8 -->
    <source src="http://192.168.99.100:8000/live/test.m3u8" >
</video>

    </div>
  </template>
   
  <script>

import videojs from 'video.js'
import 'videojs-contrib-hls'


  export default {
    data () {
      return {
      
      }
    
    },
    mounted:function(){

      videojs('my-video', {
    bigPlayButton: true,
    textTrackDisplay: false,
    posterImage: true,
    errorDisplay: false,
    controlBar: true
}, function () {
    this.play()
})

    }
  }
  </script>
   
  <style>
  </style>

最后,在vue.js的路由里绑定video.vue组件,进入浏览器,测试直播播放

搞定收工

相关文章
|
11天前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
71 44
|
1月前
|
弹性计算 Ubuntu Linux
阿里云服务器一键安装Docker社区版教程,基于系统运维管理OOS
阿里云服务器一键安装Docker社区版教程,基于系统运维管理OOS自动化部署。支持Ubuntu 22.04/20.04、CentOS 7.7-7.9及Alibaba Cloud Linux 3.2104 LTS。前提条件:ECS实例需运行中且有公网。步骤:选择Docker扩展并安装,验证成功通过命令`docker -v`查看版本号。
297 79
|
3月前
|
存储 Linux Docker
docker在欧拉服务器上编译安装应该注意什么?如何操作?
【10月更文挑战第31天】docker在欧拉服务器上编译安装应该注意什么?如何操作?
118 2
|
4月前
|
应用服务中间件 Linux nginx
FFmpeg学习笔记(一):实现rtsp推流rtmp以及ffplay完成拉流操作
这篇博客介绍了如何使用FFmpeg实现RTSP推流到RTMP服务器,并使用ffplay进行拉流操作,包括在Windows和Linux系统下的命令示例,以及如何通过HTML页面显示视频流。
726 0
|
3月前
|
缓存 JavaScript 持续交付
“解锁Node.js新纪元:如何借助Docker打造快速、高效且一致性的现代应用部署体验”
【10月更文挑战第25天】本文介绍了如何使用Docker容器化Node.js应用,包括容器化的好处、创建Docker镜像的步骤、构建和运行镜像的方法、管理依赖、保持应用更新以及调试技巧。通过容器化,可以提高应用的可移植性和可扩展性,简化开发和部署流程。
55 2
|
4月前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
892 3
|
4月前
|
弹性计算 数据库连接 Nacos
阿里云ECS服务器在docker中部署nacos
docker pull nacos 失败,docker部署nacos遇到的问题,nacos数据库连接,nacos端口映射
333 1
|
4月前
|
网络安全 虚拟化 Docker
SSH后判断当前服务器是云主机、物理机、虚拟机、docker环境
结合上述方法,您可以对当前环境进行较为准确的判断。重要的是理解每种环境的特征,并通过系统的响应进行综合分析。如果在Docker容器内,通常会有明显的环境标志和受限的资源视图;而在云主机或虚拟机上,虽然它们也可能是虚拟化的,但通常提供更接近物理机的体验,且可通过硬件标识来识别虚拟化平台。物理机则直接反映硬件真实信息,较少有虚拟化痕迹。通过这些线索,您应该能够定位到您所处的环境类型。
122 2
|
4月前
|
网络协议 应用服务中间件 nginx
FFmpeg错误笔记(一):nginx-rtmp-module推流出现 Server error: Already publishing
这篇文章讨论了在使用nginx-rtmp-module进行RTMP推流时遇到的“Server error: Already publishing”错误,分析了错误原因,并提供了详细的解决办法,包括修改nginx配置文件和终止异常的TCP连接。
300 0
FFmpeg错误笔记(一):nginx-rtmp-module推流出现 Server error: Already publishing
|
4月前
|
前端开发 Docker 容器
主机host服务器和Docker容器之间的文件互传方法汇总
Docker 成为前端工具,可实现跨设备兼容。本文介绍主机与 Docker 容器/镜像间文件传输的三种方法:1. 构建镜像时使用 `COPY` 或 `ADD` 指令;2. 启动容器时使用 `-v` 挂载卷;3. 运行时使用 `docker cp` 命令。每种方法适用于不同场景,如静态文件打包、开发时文件同步及临时文件传输。注意权限问题、容器停止后的文件传输及性能影响。
1063 0

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62