直播 从入门到实践开发

fallen_down
900 阅读4分钟

大前端技能

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协议

HLS协议

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：nginx.org/en/download…

windows 下载如下 nginx/Windows-1.18.0 pgp

安装 ffmpeg

Mac：brew install ffmpeg windows：ffmpeg.org/download.ht… 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

验证地址

H5 直播

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

全局安装 eslint

npm i eslint -g

配置 eslint --init

我自己搭建的hexo 博客出了问题，更新不了博客了，先迁移一部分到掘金，如果可以后续将陆续迁移过来。hexo 原博客地址大前端试听课 - Fallen-down ，未完待续，更新不知道何年何月了。

相关资料

avatar
文章
阅读
粉丝