《手把手带你入坑 H5+小程序直播开发》学习笔记

本文所包含内容：

• 直播的主流协议

• Video属性和方法详解

• 直播源的制作

• H5直播演示

• 微信小程序直播演示

• 常见问题

直播的主流协议

HLS协议, RTMP协议, HTTP-FLV协议

HLS协议

<video>获取M3U8索引文件，文件中包含包含其它M3U8文件和视频分段

此类文件包含三种类型：动态列表、静态列表和全量列表，后两者较前者会多一到两个字段，文件示例

#EXTM3U
#EXT-X-VERSION:6     # 版本号，默认是3
#EXT-X-TARGETDURATION:6 # 时长
#EXT-X-MEDIA-SEQUENCE:0 # 序号
#EXT-X-PLAYLIST-TYPE:EVENT # 静态列表包含
#EXT-X-PLAYLIST-TYPE:VOD # 全量列表包含
#EXTINF:4.797000,
index0.ts
#EXTINF:4.396000,
index1.ts
#EXTINF:5.297000,
index2.ts
#EXT-X-ENDLIST # 全量列表包含

TS文件解析流程

使用方便，但缺点是在同一个M3U8中分片文件过多时会带来高延时

RTMP协议

RTMP（Real Time Messaging Protocol）

传输文件格式是FLV，基于TCP协议，需要处理3次握手，因为使用更为复杂

HTTP-FLV协议

HTTP-FLV协议结合了HLS使用方便和RTMP低延时的特性

相比较RTMP协议的优点：

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

Video属性和方法详解

相关工具：Web Server for Chrome(在Chrome上模拟服务器请求)

下载、全屏隐藏：controlslist: nodownload, nofullscreen

贴图：poster属性

自动播放: autoplay

静音：muted （移动端非静音视频不允许自动播放）

循环播放：loop

预加载：preload （不同浏览器和客户端表现会存在差异）

音量控制：默认音量是1，添加volume属性通常无法生效，需通过JS代码来实现，如：

<script type="text/javascript">
  var v = document.getElementById("my_video");
  # 播放音量控制
  v.volume = 0.5;
  # 播放时间控制（单位：秒）
  v.currentTime = 60;
  # 视频地址切换（如切换不同清晰度）
  v.src = "xxxx.mp4";
  # 时长: duration
</script>

备用地址切换

# 当第一个地址出错时，访问第二视频地址
<video id="my_video" width="400" height="225"
controls controlslist="nodownload nofullscreen">
  <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./video1.mp4" type="video/mp4">
  <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./video2.mp4" type="video/mp4">
</video>
# 此时通过前述的v.src获取的地址为空，需使用v.currentSrc

事件

加载开始:loadstart

时长变化：durationchange

视频元数据下载完成：loadedmetadata

没有足够的数据播放下一帧：loadeddata

正在下载数据：progress

视频有帧可以播放：canplay

可以流畅地播放：canplaythrough

播放：play

暂停：pause

点击进度条视频查找：seeking

视频查找结束：seeked

正在准备数据：waiting

准备好数据播放：playing

播放时间变化：timeupdate

播放结束：ended

播放出错：error

# 加载开始loadstart
v.addEventListener('loadstart', function(e) {
  console.log('loadstart');
})

直播源的制作

Nginx安装

Mac:

brew tap denji/nginx
brew install nginx-full --with-rtmp-module
# 输入nginx启动服务，使用http://localhost:8080进行验证
# ngnix -s stop; nginx -s reload

Windows:
http://nginx.org/en/docs/windows.html (按步骤操作需先安装Git Bash)

FFmpeg安装

Mac:

brew install ffmpeg
# 输入ffmpeg进行验证

Windows:

http://ffmpeg.org/download.html
https://ffmpeg.zeranoe.com/builds/

配置Nginx

# Mac配置
cd /usr/local/etc/nginx/
# -a后加atom或其它编辑器名称打开文件
open nginx.conf -a "Visual Studio Code"
# Windows下找到对应文件
# 添加rtmp模块
rtmp{
    server {
        listen 1935;
        # 分块大小
        chunk_size 4000;

        # 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;
        }
    }
}

# 配置http版块
http {
...    
    server {
...
        location /hls {
           types {
               application/vnd.apple.mpegurl m3u8;
               video/mp2t ts;
           }
           root /usr/local/var/www;
           add_header Cache-Control no-cache;
           # 解决跨域请求的问题
           add_header Access-Control-Allow-Origin *;
        }
    }
}

工具准备：VLC播放器和Safari浏览器

RTMP测试：

通过本地视频模拟推流

ffmpeg -re -i test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/rtmplive/rtmp

VLC播放器中点击File > Open Network...，然后在URL部分输入前面定义的地址：

rtmp://localhost:1935/rtmplive/rtmp

HLS测试

模拟HLS推流

ffmpeg -re -i test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/stream

打开Safari浏览器中打开http://localhost:8080/hls/stream.m3u8进行访问

TODO：HTTP-FLV的推流方式相对复杂，后续进行补充

封装包推流

如果您对Nginx不了解也不想要了解相关细节，还可以通过已封装的包进行测试

链接: https://pan.baidu.com/s/1jV51FmC0TodGODKiJM4BUg 密码: qbu9

下载该文件直接运行即可

# 执行以下命令推流
ffmpeg -re -i test.mp4 -c copy -f flv rtmp://localhost:1935/live/movie
# 直播地址
# hls
http://127.0.0.1:7002/live/movie.m3u8
# http-flv
http://127.0.0.1:7001/live/movie.flv
# rtmp
rtmp://localhost:1935/live/movie

H5直播演练

播放器：video.js、hls.js、flv.js

# 安装eslint
npm install eslint -g
# 初始化package.json
npm init
eslint --init
# ? How would you like to configure ESLint? Use a popular style guide
# ? Which style guide do you want to follow? Standard
# ? What format do you want your config file to be in? JavaScript
# 目录准备
mkdir source 
cd source
mkdir videojs
mkdir hlsjs
mkdir flvjs

HLS视频直播

Video.js

# VIDEOJS拥有丰富的<a href="http://videojs.com/plugins/" target="_blank">插件</a>
cd videojs
curl -O vjs.zencdn.net/6.7/video-js.min.css
curl -O vjs.zencdn.net/6.7/video.min.js

# 点播测试代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>video.js点播视频的应用</title>
    <link rel="stylesheet" href="./video-js.min.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./video.min.js" type="text/javascript"></script>
  </head>
  <body>
    <video
        id="my-player"
        class="video-js"
        controls
        preload="auto"
        poster="//vjs.zencdn.net/v/oceans.png">
      <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../test.mp4" type="video/mp4"></source>
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that supports HTML5 video
      </p>
    </video>
    <script type="text/javascript">
      var player = videojs('my-player', {
        width: 400,
        height: 200
      });
    </script>
  </body>
</html>

# 直播
curl -O https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js

# 示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>video.js点播视频的应用</title>
    <link rel="stylesheet" href="./video-js.min.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./video.min.js" type="text/javascript"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./videojs-contrib-hls.js"></script>
  </head>
  <body>
    <video id="my-player" class="video-js" controls>
      <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://live.streamingfast.net/osmflivech4.m3u8" type="application/x-mpegURL">
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
      </p>
    </video>
    <script type="text/javascript">
      var player = videojs('my-player', {
        width: 400,
        height: 200
      });
    </script>
  </body>
</html>

hls.js

cd ../hlsjs
touch index.html
touch index.js
touch index.css
curl -O https://cdn.jsdelivr.net/npm/hls.js@latest
mv hls.js\@latest hls.js

# hls.js好处在于它的轻量，可以在没有冗余的情况下自定义播放器的样式，以下是冗长的示例代码
# index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hls.js演示</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./hls.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div class="player pause">
      <video id="video"></video>
      <em class="btn"></em>
      <span class="state">正在直播</span>
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./index.js" type="text/javascript"></script>
  </body>
</html>


# index.js
var video = document.getElementById('video');
var hls_url = "http://localhost:8080/hls/stream.m3u8";
var btn = document.querySelector('.btn');
var player = document.querySelector('.player');
if(Hls.isSupported()) {
  var hls = new Hls();
  hls.loadSource(hls_url);
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED,function() {
    // video.play();
});
}else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = hls_url;
  video.addEventListener('loadedmetadata',function() {
    // video.play();
  });
}

btn.addEventListener('click', function(){
  if(video.paused){
    video.play();
  }else{
    video.pause();
  }
})

video.addEventListener('click', function() {
  if(video.paused){
    video.play();
  }else{
    video.pause();
  }
})

video.addEventListener('play',function(){
  player.className = 'player';
})

video.addEventListener('pause',function(){
  player.className = 'player pause';
})


# index.css
html *, body *{
  margin: 0;
  padding: 0;
}
.player{
  width: 400px;
  height: 200px;
  position: relative;
}
.player video{
  width: 100%;
  height: 100%;
}
.player .btn{
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px auto auto -35px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.5);
  line-height: 40px;
}
.player .btn:hover{
  background: rgba(255, 255, 255, 0.7);
}
.player .btn:before{
  border: 20px solid #ddd;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  content: " ";
  display: block;
  margin-left: 10px;
  width: 0;
  height: 0;
}
.player.btn:before:hover{
  border-left-color: #fff;
}
.player.pause .btn{
  display: block;
}
.player .state{
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 14px;
  color: #000;
}
.player.pause .state{
  display: none;
}

HTTP-FLV视频直播

flv.js

cd ../flvjs
touch index.html
touch index.js
curl -O http://bilibili.github.io/flv.js/dist/flv.js


# index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>flv.js演示</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./flv.js" charset="utf-8"></script>
  </head>
  <body>
    <video id="videoElement" width="400" height="200" controls></video>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./index.js" charset="utf-8"></script>
  </body>
</html>


# index.js
var flvjs = window.flvjs;
if (flvjs.isSupported()) {
  var videoElement = document.getElementById('videoElement');
  var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://127.0.0.1:7001/live/movie.flv'
  });
  flvPlayer.attachMediaElement(videoElement);
  flvPlayer.load();
  flvPlayer.play();
}

微信小程序直播演示

需通过小程序开发工具的远程调试功能在手机上进行调试，手机与电脑在同一局域网，并且在直播源中使用内网地址192.168.*.*

<!--index.wxml-->
<view class="container">
  <view>
    <live-player class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://192.168.xxx.xxx:7001/live/movie.flv" mode="live" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
  </view>
</view>

//index.js
Page({
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
      console.error('live-player error:', e.detail.errMsg)
  }
})

常见问题

1.Error: homebrew/nginx was deprecated. This tap is now empty as all its formulae were migrated.

brew tap denji/nginx

课程链接：https://coding.imooc.com/class/chapter/212.html

本文首次发表于 Alan Hou 的个人博客