Nginx-rtmp+ FFmpeg +Docker + vue.js 直播系统搭建
思路(如图):

1,开启推流服务器(这里我的Nginx-rtmp服务器搭建成功)
进入docker 开启推流服务器 docker run -it -p 1935:1935 -p 8000:80 --rm alfg/nginx-rtmp

2,推流(两种方法)
命令推流:
查看本机摄像头及麦克风设备 ffmpeg -list_devices true -f dshow -i dummy
音视频推流: 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"
#推流视频文件
ffmpeg -re -stream_loop -1 -i test.mp4 -f flv rtmp://192.168.99.100:1935/stream/test
播放地址http://192.168.99.100:8000/live/test.m3u8 #将摄像头推流到hls
ffmpeg -f vfwcap -i "0" -c:v libx264 -preset ultrafast -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://localhost:1935/hls/home
播放地址http://localhost:8080/hls/home.m3u8 #将屏幕推流到rtmp
start ffmpeg -f gdigrab -i desktop -vcodec libx264 -preset ultrafast -acodec libmp3lame -ar 44100 -ac 1 -f flv
播放地址rtmp://localhost:1935/live/jing
使用第三方软件推流:(例如:OBS Studio)
3,拉流
这里前端使用的是通过VUE
注意使用video需安装以下几个依赖
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
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" >
<source src="http://192.168.99.100:8000/live/test.m3u8" type="application/x-mpegURL">
</video> <script>
//vue 的video插件
import videojs from 'video.js'
import 'videojs-contrib-hls' export default {
mounted:function(){
//自动执行直播平台
videojs('my-video', {
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
}, function () {
this.play()
})
}
}
} </script>
效果如下:

Nginx-rtmp+ FFmpeg +Docker + vue.js 直播系统搭建的更多相关文章
- nginx RTMP FFmpeg 视频直播
/**************************************************************************** * nginx RTMP FFmpeg 视频 ...
- centos7+nginx+rtmp+ffmpeg搭建流媒体服务器(保存流目录与http目录不要随意配置,否则有权限问题)
搭建nginx-http-flv-module升级代替rtmp模块,详情:https://github.com/winshining/nginx-http-flv-module/blob/master ...
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- H264音视频直播系统 服务器端+客户端源码 可用于直播系统搭建
RTP协议实现直播系统搭建,采用H.264和AAC编码,码率极低,同时有较高的视频清晰度和音频音质,可用于视频聊天.视频会议.摄像头监控等多种应用场景. 直播系统搭建发布端,选择视频和音频设备,指定服 ...
- 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...
- ffmpeg,rtmpdump和nginx rtmp实现录屏,直播和录制
公司最近在做视频直播的项目,我这里分配到对直播的视频进行录制,录制的方式是通过rtmpdump对rtmp的视频流进行录制 前置的知识 ffmpeg: 用于实现把录屏工具发出的视频和音频流,转换成我们需 ...
- (转)Nginx+rtmp+ffmpeg搭建流媒体服务器
(1)下载第三方扩展模块nginx-rtmp-module # mkdir module && cd module //创建一个存放模块的目录 # wget https://githu ...
- windows平台简易直播系统搭建
最近做直播系统的朋友很多,正好前端时间也在做这一块,写片文章分享下开发心得,以为后用. 直播系统我将它分为前堆推流,后台服务,客户端播放三大部分.前端推流基于ffmpeg,后台服务 使用crtmp服务 ...
随机推荐
- web自动化 模拟鼠标、键盘操作
一.鼠标操作 1.1鼠标的悬停操作,move_to_element from selenium import webdriver from selenium.webdriver.common.acti ...
- 牛客练习赛68 牛牛的无向图 题解(krusal思想)
题目链接 题目大意 要你查询q 次询问,每次询问给出一个 L ,询问\(\sum_{i=1}^n\sum_{j=i+1}^n[d(i,j)<=L]\).其中 [C] 表示当命题 C 为真的时候为 ...
- odoo13之右上角弹出提示框
前言 在odoo中已经提供好了右上角弹出提示框的接口,我们只需要调用即可: 而提示框的实现又分为前端js实现和后段函数实现,前后端实现的效果相同. 实现效果图 前端实现提示框 在前端中显示提示框最常用 ...
- Spark SQL解析查询parquet格式Hive表获取分区字段和查询条件
首先说一下,这里解决的问题应用场景: sparksql处理Hive表数据时,判断加载的是否是分区表,以及分区表的字段有哪些?再进一步限制查询分区表必须指定分区? 这里涉及到两种情况:select SQ ...
- HTTP响应报文应答状态码及含义
本应答报文状态码是老猿结合多方资料收集综合后并加以老猿自己的理解进行说明的应答报文状态码,应该是最新最全解释最详尽的,供大家参考:
- PyQt(Python+Qt)学习随笔: QAbstractItemView的dragDropMode属性
老猿Python博文目录 老猿Python博客地址 一.概述 dragDropMode属性用于控制视图拖放事件的处理方式,其类型为枚举类型DragDropMode. 二.枚举类型DragDropMod ...
- Redis整合MySQL和MyCAT分库组件(来源是我的新书)
MyCAT是一个开源的分布式数据库组件,在项目里,一般用这个组件实现针对数据库的分库分表功能,从而提升对数据表,尤其是大数据库表的访问性能.而且在实际项目里,MyCAT分库分表组件一般会和MySQL以 ...
- [亲测可用]BCompare文件比较对比工具4.3.4绿色版
程序员必备良品 Beyond Compare 灰常好用,一直使用的文本 文件比较工具,用来对比两个文件文本的差异,可以用于各种代码,文本对比 使用方法: 解开压缩后:添加右键的 !添加右键.bat,运 ...
- 水星路由器自动更换IP工具
这个工具是本人抢火车票的时候,自己写的换IP工具,仅支持自己的水星,其他水星不知道,请自测!!!! 点击更换IP,他会断开链接,重新拨号!!(达到更换IP的目的) !!开发语言:易语言(源码在下方)使 ...
- 第 5篇 Scrum 冲刺博客
一.站立式会议 1.站立式会议照片 2.昨天已完成的工作 售货员页面功能 3.今天计划完成的工作 添加登录系统账号密码数据库模块 继续对商品销售部分进行编码 职工管理页面 4.工作中遇到的困难 ①页面 ...