前言:
工作要求,希望能在現有的項目中新增一個rtsp流媒體播放的功能,本來是想使用VLC插件,但是據說它不支持高版本的谷歌瀏覽器,遂放棄。
後來發現了H5Stream(h5stream 支持RTSP/RTMP拉流/RTMP推流/GB28181 攝像機NVR集成,支持HLS/RTSP/RTMP/WS/RTC 服務,並且在不轉碼的情況下支持H.264;還兼容不同的操作系統和瀏覽器)。
然後查看官方文檔,但是對於萌新來說,實在太難理解了!/(ㄒoㄒ)/~~
於是我又開始各種蒐羅教程,但是網上的教程很少,就幾篇還寫的不是很全面,這裏先附上我看到的博客:
- Demons丶丶
- weixin_41196185
- 雲煙img-------------- ShellCollector :這兩篇是相同的,不知道是同個作者呢還是誰抄襲了誰
準備工作:下載和安裝
官網提供的在這(你可以試着自己找資源)👇
官網傳送門👇
百度網盤👇
開始:
(1)雙擊vcredist_x64.exe進行安裝,安裝後需重啓,這個安裝包也保存着吧,如果已經安裝成功的雙擊會顯示修復和卸載
(2)解壓產品包h5s-r9.0.0605-win64-release.zip,解壓路徑隨意
(3)雙擊根目錄中的regservice.bat自動註冊
(4)修改\h5s-r8.7.0718.19-win64-release\conf目錄下的h5ss.conf配置文件,將strUrl的流地址修改爲你自己的
這裏提供一個流地址:rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov
tip:你可以使用VLC播放器測試一下流地址是否正常,如果無法播放,請更換爲其他的
(5)雙擊根目錄下的h5ss.bat啓動服務,切記不能關閉哦!
注意:如果無法運行,出現如下報錯:那可能是vcredist_x64.exe安裝出了問題,這裏提供微軟下載,重新安裝下!
(6)打開網頁,瀏覽器輸入localhost:8080 ,看到如下界面代表成功
(7)你也可以直接瀏覽器輸入localhost:8080/demo.html
那如何引入到自己的web項目中呢???
其實很簡單,在h5s-r8.7.0718.19-win64-release\www目錄下有個demo.html文件,複製到你的項目中去,然後引入相應的js文件,注意!!host 的 window.location.host 改爲 localhost:8080,因爲H5Stream默認端口爲8080,所以爲了避免衝突,將你web項目的端口號修改爲8081,否則你啓動H5Stream服務的時候,就無法啓動項目了!
<!DOCTYPE HTML>
<html>
<head>
<title>H5STREAM VIDEO</title>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/adapter.js"></script>
<script src="js/platform.js"></script>
<script src="js/h5splayer.js"></script>
<script src="js/h5splayerhelper.js"></script>
<link rel = "stylesheet" type = "text/css" href = "css/h5splayer.css" />
</head>
<body>
<div class="h5videodiv">
<video class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline>
</video>
<div class="playpause" id="playpause1" ></div>
</div>
</body>
<script>
if (H5siOS() === true
|| H5sSafariBrowser() === true)
{
$('#h5sVideo1').prop("controls", true);
}
var conf1 = {
videoid:'h5sVideo1',
protocol: window.location.protocol, //'http:' or 'https:'
host: "localhost:8080", //'localhost:8080'
rootpath:'/', // '/' or window.location.pathname
token:'token1',
hlsver:'v1', //v1 is for ts, v2 is for fmp4
session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
};
var v1 = H5sPlayerCreate(conf1);
$('#h5sVideo1').parent().click(function () {
if($(this).children(".h5video").get(0).paused){
if(v1 != null)
{
v1.disconnect();
delete v1;
v1 = null;
}
v1 = H5sPlayerCreate(conf1);
console.log(v1);
v1.connect();
$(this).children(".playpause").fadeOut();
}else{
v1.disconnect();
delete v1;
v1 = null;
$(this).children(".h5video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
</script>
</html>
最後:
重新啓動h5ss.bat
然後運行web項目,就可以看到視頻了。
我是將視頻嵌套在我已有的html中,效果如下