基于微信的HTML5直播

基础温习

大家可以先看一下我原来的一篇博文Red5-server流媒体服务器搭建及转HLS格式这样就很好理解我接下来的直播环境搭建了。

功能模块概述

通过obs客户端推流到nginx流媒体服务器上，对流媒体用ffmpeg将流剪切为若干段ts流文件并保存到临时目录中，通过访问m3u8格式拼接ts流文件段来观看直播。

推流端

采用开源工具OBS客户端进行推流

• 根据项目的推流地址，填入OBS客户端（下载地址）中，并设置场景，保存后重启，便可开始推流。
  为更加稳定的推流，建议使用以上链接中的v0.625稳定版本，按提示安装完成后，打开设定.在广播设定中，伺服器统一填写我们项目的流媒体接收流地址：
  rtmp://127.0.0.1:1935/hls/
  以上这几个数据都是可以更改的。
  127.0.0.1——你的流媒体服务器ip
  1935——你的rtmp端口号
  hls——你的直播nginx配置模块
  具体在下文中也有详细介绍
  
  

  配置地址

回到主界面，右键来源，选择添加视频捕捉设备或获取窗口等（相关设置默认即可），点击开始串流，便可开始直播。

添加场景

图为添加视频捕捉设备后的直播画面：

直播中

流媒体服务器

• Nginx接收推流模块

rtmp_auto_push on;
rtmp {
    server {
        listen 1935; 
application hls {
            live on; 
            hls on; 
            hls_path /tmp/hls; 
            on_publish http://公网ip的项目地址/liveOnPublish; 
            on_publish_done http://公网ip的项目地址/liveOnDone; 
            notify_method get;
        }
}
}

配上我在word上的注解

注解1

• Nginx处理直播流模块

http {
server {
        listen  80; 
        server_name  localhost;
   location /hls  {
            secure_link $arg_st,$arg_e;
            secure_link_md5 key$arg_e; 
            subs_filter .ts '.ts?st=$arg_st&e=$arg_e&clentip=$remote_addr';
            subs_filter_types application/vnd.apple.mpegurl; 
            if ($secure_link = "") {
                 return 402;
            } 
            if ($secure_link = "0") {
                 return 403;
            } 
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /tmp; 
            add_header Cache-Control no-cache;
        }
}
}

注解2

项目部署服务器

流媒体服务器不通过项目服务器，整个直播过程的推流和处理流都在流媒体服务器上进行。项目服务器主要进行直播地址加密处理意见推流开始和结束触发的方法（liveOnPublish()，liveOnDone()）已及对直播地址加密.

播放端

直接通过HTML5中的

存在的问题

• 延迟待测试（不科学的数据是安卓手机普遍在30-40s，苹果手机在20-30s）
• 并发待测试
• 掉帧待测试（网速影响大，网络好几乎不掉帧，网络差掉一半，用户体验差）