2020-02-06发表2021-01-31更新13 分钟读完 (大约1987个字)

直播从入门到实践开发

大前端技能

ES6、react、vue、webpack、angluar

服务类

node.js
express.js
koa.js

3d 数据图像

three.js

二维图像

d3.js
raphael.js
echart.js

视频

video.js
hls.js
flv.js

直播

直播原理

视频格式

hls 对应的是 ts格式的视频，只有苹果浏览器支持
mp4、webm 偏点播 hls、flv偏直播

直播协议

HLS 协议 tm视频格式延时
RTMP 协议 flv 视频格式配置复杂
HTTP-FLV协议 flv 视频格式低延时、

HLS协议

live playlist（动态列表）直播
event playlist（静态列表）
vod playlist（全量列表）点播

动态列表
静态列表
全量列表

ts 文件

延时跟 m318 文件跟切片有关系

RTMP 协议
RTMP 是 Real Time Messaging Protocol （实时消息传输协议）的首字母缩写。
该协议基于 TCP，是一个协议族，包括 RTMP 基本协议及 RTMPT/RTMPS/RTMPE 等多种变种。RTMP 是一种设计用来进行实时数据通信的网络协议，主要用来在 Flash、AIR 平台和支持 RTMP 协议的流媒体/交互服务器之间进行音视频和数据通信。主播客户端使用。flv视频格式。

采集端用 web 来做协议是 webrtc。

RTMP 协议

HTTP-FLV协议

接合二者优点
flv 视频格式
建立长连接
建立 HTTP 协议

HTTP-FLV协议

1、可以在一定程度上避免防火墙的干扰（例如：有的机房只允许 80 端口通过）
2、可以很好的兼容 HTTP 302 跳转，做到灵活调度
3、可以使用 HTTPS 做加密通道
4、很好的支持移动端（android,ios）

video

属性和方法

贴图 poster
控制条 controls
自动播放 autoplay
循环播放 loop
预加载 preload
音量 volume
播放地址设置
静音 muted
播放时间设置

<!-- 控制条 无下载无全屏 -->
<video controls controlslist="nodownload nofullscreen"></video>
<!-- 贴图 -->
<video poster='./poster.jpg'></video>
<!-- 自动播放 -->
<video autoplay></video>
<!-- 静音 非静音状态下的视频是不允许自动播放的 -->
<video muted></video>
<!-- 循环播放 -->
<video loop></video>
<!-- 预加载 -->
<video preload></video>
<!-- 音量控制 -->
<video id="_volume"></video>
<script>
  var v = document.getElementById('_volume')
  v.volume = 0.5
</script>
<!-- 控制播放时间 -->
<script>
  var v = document.getElementById('_volume')
  v.currentTime = 60 //单位秒
</script>
<!-- 切换视频地址 -->
<script>
  var v = document.getElementById('_volume')
  v.src = './test-2.mp4' //单位秒
</script>
<!-- 备用地址 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持Video标签。
</video>
<script>
  var v = document.getElementById('_volume')
  setTimeout(function(){
    console.log('src',v.currentSrc);
  },1000)
</script>

事件

视频查找
时长变化
元数据加载
视频下载监听
可播放监听
播放监听
暂停监听
查找开始
查找结束
视频加载等待
视频结束

<video id="_volume"></video>
<script>
  var v = document.getElementById('_volume');
  console.log(v.duration);
  //  视频开始加载
  v.addEventListener('loadstart',function(e){
    console.log('loadstart');
  })

  //  监听事长变化
  v.addEventListener('durationchange',function(e){
    console.log('loadstart');
    // 查看视频时长
    console.log(v.duration);
  })

  //  获取到视频的源数据
  v.addEventListener('loadedmetadata',function(e){
    console.log('loadedmetadata');
  })

  //  加载下一帧
  v.addEventListener('loadeddata',function(e){
    console.log('loadeddata');
  })

  //  正在下载
  v.addEventListener('progress',function(e){
    console.log('progress');
  })

  //  视频可以播放
  v.addEventListener('canplay',function(e){
    console.log('canplay');
  })

  //  视频可以流程播放了
  v.addEventListener('canplaythrough',function(e){
    console.log('canplaythrough');
  })

  //  canplay、canplaythrough 之后允许播放
  //  播放触发
  v.addEventListener('play',function(e){
    console.log('play');
  })

  //  暂停
  v.addEventListener('pause',function(e){
    console.log('pause');
  })

  // 监听播放位置改变
  v.addEventListener('seeking',function(e){
    console.log('seeking');
  })

  // seeking 结束
  v.addEventListener('seeked',function(e){
    console.log('seeked');
  })

  //  waiting 等待 视频无法解码
  v.addEventListener('waiting',function(e){
    console.log('waiting');
  })

  //  当音频/视频在已因缓冲而暂停或停止后已就绪时
  v.addEventListener('playing',function(e){
    console.log('playing');
  })

  //  当目前的播放位置已更改时
  v.addEventListener('timeupdate',function(e){
    console.log('timeupdate');
  })

  //  返回音频/视频的播放是否已结束
  v.addEventListener('ended',function(e){
    console.log('ended');
  })

  //  返回表示音频/视频错误状态的 MediaError 对象
  v.addEventListener('error',function(e){
    console.log(v.error.code);
  })
</script>

直播源的制作

方法一 nginx + ffmpeg

1、安装 nginx、ffmpeg
2、配置 nginx
3、准备视频
4、利用 ffmpeg 推流

安装 Nginx

Mac: brew install nginx-full –with-rtmp-module
windows：http://nginx.org/en/download.html

windows 下载如下
nginx/Windows-1.18.0 pgp

安装 ffmpeg

Mac：brew install ffmpeg
windows：https://ffmpeg.org/download.html
ffmpeg
下载 ffmpeg

ffmpeg 检查是否安装

命令行输入 ffmpeg

配置 nginx

location /hls {
  types {
    application/vnd.apple.mpegurl m3u8;
    video/mp2t ts;
  }
  root /usr/local/var/www;
  add_header Cache-Control no-cache;
}

rtmp {
  server {

    # rtmp 直播流配置
    application rtmplive {
      # 开启
      live on;
      # 最大连接数
      max_connections 1024;
    }

    # hls 直播流配置
    application hls {
      # 开启
      live on;
      hls on;
      # 文件存储地址
      hls_path /usr/local/var/www/hls
      hls_fragment 5s;
    }
  }
}

启动 nginx 的配置不报错，退出的时候报错，报错信息是以下内容
nginx: [emerg] unknown directive “rtmp” in D:\nginx-1.18.0/conf/nginx.conf:9
网上说用记事本打开会增加 utf8-bom 什么的格式导致，但是我下来了nginx-rtmp-module 中的测试例子仍报错。网上资料显示说下载自带 rtmp 模块的 nginx 版本如 nginx 1.7.11.3 Gryphon。网上资料说下载 nginx 1.8.1版本然后下载 nginx-rtmp-module 启动命令 ./sbin/nginx -s reload，尝试了下，启动不了 ………… 问题搁置

推流

ffmpeg -re -i IPX-451.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/rtm
ffmpeg -re -i IPX-451.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/stream

下载 vlc播放器
验证推流过程

方法二集成服务

1、下载服务
2、安装服务
3、准备源视频
4、开启服务
5、利用 ffmpeg 推流

启动 server 下服务

open server

推流命令

ffmpeg -re -i IPX-451.mp4 -c copy -f flv rtmp://localhost:1935/live/movie

验证地址

RTMP：rtmp://localhost:1935/live/movie
FLV：http://127.0.0.1:7001/live/movie.flv
HLS：http://127.0.0.1:7002/live/movie.m3u8

H5 直播

video.js：自定义UI、快捷键、弹幕、播放 HLS
hls.js：HLS 类型的直播点播、小巧
flv.js：HTTP-FLV协议

全局安装 eslint

npm i eslint -g

配置
eslint –init

相关资料
[视频]H5与小程序直播开发视频教程√

如何开发一款H5小程序直播

DPlayer：视频播放器
xgplayer：具有解析器的HTML5视频播放器，可节省流量
nginx-rtmp-module：基于NGINX的媒体流服务器
H5与小程序直播开发视频源码：具有解析器的HTML5视频播放器，可节省流量

videojs 的插件和皮肤

超简单的FFmpeg安装方法√
vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本√
windows下nginx的rtmp配置加载问题 unknown directive “rtmp”√
使用nginx-rtmp-module搭建RTMP直播服务器√
关于HLS直播流HTML页面播放解决√

HTML5视频直播及H5直播扫盲
 大前端介绍与直播原理
 前端中的直播
[使用flv.js做直播](https://github.com/gwuhaolin/blog/issues/3
web前端 html5 直播功能开发
 使用flv.js快速搭建html5网页直播
 html5-dash-hls-rtmp
关于flv.js 在ios端播放时候id兼容问题
 直播中前端技术