目的：实现web在线直播
为了实现流畅的在线直播，有rtmp或rtsp协议，综合考量后决定采用rtmp（ Adobe 的私有协议，决定了前台需要用到flash）。
后台技术实现：nginx-rtmp-module（http://nginx.org/en/download.html）；前台采用flash获取音视频流直播，采用videojs进行观看(还有SRS，Red5，wowoza，FMS等可搭建流媒体服务器)。
一、搭建视频流服务器
windows版省事(链接：https://pan.baidu.com/s/1HNce4Wu0bxnyZ9ifn0dbzQ 提取码：nlh0)，解压nginx-rtmp-module（你需要关注conf/nginx.conf）,运行nginx.exe后，任务管理器中会增加两个nginx.exe的服务，访问stat页会查看视频流服务器接收到的推流信息（http://127.0.0.1:8080/stat）。
linux版（https://pan.baidu.com/s/17ftjFUoVeszka5mCPmLEMA 提取码：ym6o ），压缩包内有安装说明，不会掉沟。
二、推流
测试的话下载个推流工具，建议使用大牛直播（https://www.daniulive.com/index.php/sdk-demo%e4%b8%8b%e8%bd%bd/）提供的推流工具（链接：https://pan.baidu.com/s/1G2ez4EiyTGlAs4NiisWNvQ 提取码：qvw5）
html(相关引用内容，https://pan.baidu.com/s/1x52__FumQdUvxu_jl0HS2Q 提取码：qh6x):
<div id="streamer_div" >
<object id="my-streamer_div" >
<embed id="my-streamer" src="/html/zhibo/js/RtmpStreamer.swf" bgcolor="#ffffff" quality="high" width="510" height="400" allowScriptAccess="always" type="application/x-shockwave-flash" />
</object>
</div>
js:
<script type="text/javascript">
$(function(){
var intervalID= setInterval(function(){
//setTimeout console.log("##查看my-streamer是否加载完成");
if(checkFlashLoaded("my-streamer")){
clearInterval(intervalID);
push();
intervalID = null; } },
1000); })
//开启我的摄像头
function push(){
var push_name=$("#stream_name").val()+"?user_id="+$("#stream_name").val()+"&user_name="+$("#user_name").val();
var streamer = document.getElementById("my-streamer");//或者 $("#my-streamer").get(0);
streamer.setScreenSize(500, 375);//一定要等到swf加载完成，不然会报错
streamer.setScreenPosition(0, -20);
streamer.publish($("#push_url").val(),push_name);
}
var i=0;
//检查swf是否加载完成
function checkFlashLoaded(embed){
try {
return Math.floor(document.getElementById(embed).PercentLoaded())==100;
} catch (e) {
i++;
console.log("##i="+i);
return false; } }
</script>
推流是否成功可以在nginx的stat页面进行查看（http://127.0.0.1:8080/stat）；
三、观看直播(相关引用内容，https://pan.baidu.com/s/1VOP-KcPDutMuUgvJQ05tqg 提取码：xb7c)：
<!--引入播放器样式--> <link href="/html/zhibo/css/video-js.min.css" rel="stylesheet"> <!--引入播放器js--> <script src="/html/zhibo/js/video7.3.0.min.js"></script> <script src="/html/zhibo/js/videojs-flash.min.js"></script>
<div id="streamer_div" >
<video id="live-stream" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" fluid="true" data-setup='{"videoWidth":520,"controls":false}' autoplay="autoplay" poster="/html/ui/images/police.jpg" >
<source src="这里是视频流地址，如：rtmp://127.0.0.1:1935/hls/001" type="rtmp/flv">
<p class="vjs-no-js">
您的浏览器不支持HTML5，请升级浏览器。
</p>
</video>
</div>
四、nginx.conf(on_connect ,on_publish ,on_play ……是干什么用的，请自行度娘)
worker_processes 1;
error_log logs/error.log debug;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
on_connect http://127.0.0.1/nginx/on_connect;
timeout 20s;
application hls {
live on;
hls on;
hls_path temp/hls;
hls_playlist_length 5s;
hls_fragment 1s;
notify_method get;
on_play http://127.0.0.1/nginx/on_play;
on_publish http://127.0.0.1/nginx/on_publish;
on_done http://127.0.0.1/nginx/on_done;
on_play_done http://127.0.0.1/nginx/on_play_done;
on_publish_done http://127.0.0.1/nginx/on_publish_done;
on_record_done http://127.0.0.1/nginx/on_record_done;
on_update http://127.0.0.1/nginx/on_update;
notify_update_timeout 10s;
} }}
http {
server {
listen 8089;
location / { root www; }
location /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; }
location /stat.xsl { root www; }
location /hls {
#server hls fragments
types{ application/vnd.apple.mpegurl m3u8; video/mp2t ts; }
alias temp/hls; expires -1; }
}}
五、注意
#尽量使用https协议访问web页面（可百度：tomcat+https，蛮简单实现）
#不然，如果使用chrome访问的话需要设置沙箱模式（可百度：沙箱模式的chrome浏览器的运行 ，其实就是右击-属性-目标，追加 --unsafely-treat-insecure-origin-as-secure="http://ip:port" --user-data-dir=C:\tmp）
#最重要一点：windows远程桌面操作调试的话你是无法通过页面访问摄像头的，提示连接成功但是就是看不到画面，切记，切记（不然可以让你怀疑一切）！
建议：采用h5技术获取音视频流，可用WebRTC+websocket(你需要知道：WebRTC是“网络实时通信”的缩写，它主要用来让浏览器实时获取和交换视频、音频和数据，分三个API。MediaStream（又称getUserMedia）、RTCPeerConnection、RTCDataChannel），为什么？因为flash终将落幕！
