如何在网页端和移动端播放rtmp和hls视频流

安卓设备上的播放——Vitamio

安卓设备3.0以上原生支持hls，但是不支持rtmp，为了统一以及低版本兼容，可以使用第三方的一个播放器库——vitamio。

hls播放

如果仅需要在移动设备的WebView上播放，可以选择使用html中嵌入hls播放。如下html能够在所有Safari或者安卓3.0以上的WebView上播放。这样就不需要使用第三方的播放器。

VideoJS

如果要让网页支持在所有浏览器上播放，就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。

可以用VLC media player播放，具体 *** 作步骤如下：

1、首先，在安装了VLC的计算机上单击“开始”，然后单击所有程序，如下图所示，然后进入下一步。

2、其次，找到VLC media player并点击打开，如下图所示，然后进入下一步。

3、接着，在下方红框中粘贴rtmp流媒体地址，然后单击播放，如下图所示，然后进入下一步。

4、最后，如果网络不好，可以单击缓存处，将缓存值设置的大点，就可以流畅地播放视频了，如下图所示。这样，问题就解决了。

功能模块概述

通过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 项目地址/liveOnPublish

on_publish_done 项目地址/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中的<video>标签设置src来播放直播流。如：

<video src="pro/live.m3u8?st=UM/L8jdfTlY2b1j1F6XSxA==&e=1468548530

" controls="controls"></video>

存在的问题

延迟待测试（不科学的数据是安卓手机普遍在30-40s，苹果手机在20-30s）

并发待测试

掉帧待测试（网速影响大，网络好几乎不掉帧，网络差掉一半，用户体验差）

---