目的：實現(xiàn)web在線直播
????為了實現(xiàn)流暢的在線直播，有rtmp或rtsp協(xié)議，綜合考量后決定采用rtmp（?Adobe?的私有協(xié)議，決定了前臺需要用到flash）。
????后臺技術實現(xiàn)：nginx-rtmp-module（http://nginx.org/en/download.html）；前臺采用flash獲取音視頻流直播，采用videojs進行觀看(還有SRS，Red5，wowoza，F(xiàn)MS等可搭建流媒體服務器)。
一、搭建視頻流服務器
????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協(xié)議訪問web頁面（可百度：tomcat+https，蠻簡單實現(xiàn)）
#不然，如果使用chrome訪問的話需要設置沙箱模式（可百度：沙箱模式的chrome瀏覽器的運行 ，其實就是右擊-屬性-目標，追加? ?--unsafely-treat-insecure-origin-as-secure="http://ip:port"?--user-data-dir=C:\tmp）
#最重要一點：windows遠程桌面操作調試的話你是無法通過頁面訪問攝像頭的，提示連接成功但是就是看不到畫面，切記，切記（不然可以讓你懷疑一切）！
?建議：采用h5技術獲取音視頻流，可用WebRTC+websocket(你需要知道：WebRTC是“網(wǎng)絡實時通信”的縮寫，它主要用來讓瀏覽器實時獲取和交換視頻、音頻和數(shù)據(jù)，分三個API。MediaStream（又稱getUserMedia）、RTCPeerConnection、RTCDataChannel），為什么？因為flash終將落幕！
