嘍大家好,我是胖達(dá)。本期視頻來(lái)看看路徑相關(guān)的內(nèi)容。我們知道在網(wǎng)頁(yè)中存在很多的圖片,如果把這些圖片和html文檔放在一起,這樣不光不美觀,管理起來(lái)也非常不方便。通常會(huì)新建一個(gè)專門用來(lái)管理圖像資源的文件夾,當(dāng)需要查找圖像的時(shí)候就會(huì)選擇使用路徑的方式來(lái)指定圖像文件的位置。
路徑的類型又分為兩種,第一種是相對(duì)路徑,第二種是絕對(duì)路徑。今天先來(lái)了解一下相對(duì)路徑。相對(duì)路徑是相對(duì)于當(dāng)前文件的位置來(lái)表示資源,也就是圖片位置的路徑表達(dá)方式。簡(jiǎn)單來(lái)說(shuō)就是圖片相對(duì)于當(dāng)前html文檔的位置。這里把相對(duì)路徑的分類給大家列出來(lái)了,一個(gè)一個(gè)往下看。
·首先是同級(jí)路徑。同級(jí)路徑不需要在html里面寫任何符號(hào),只需要將文件名寫到html屬性里就可以了。在代碼里看一下,這里有一個(gè)image,點(diǎn)jpg的圖片和html文檔處于同一級(jí),所以在html的屬性里直接寫image,點(diǎn)jpg保存一下看看效果。
可以看到現(xiàn)在圖片是正常展示的,同級(jí)路徑下只需要在html屬性里完整填寫圖像文件的名稱就可以了。
·再來(lái)看第二個(gè)下級(jí)路徑。當(dāng)圖像文件位于html文件下一集時(shí),需要在html屬性里完整填寫同級(jí)文件夾的名稱,然后斜杠寫出對(duì)應(yīng)圖片文件的名稱。
→首先打開資源文件夾,在這里新增一個(gè)images的文件夾。將image圖片文件復(fù)制一份放到images文件夾里。
→打開vscode,新建一個(gè)gtml文檔,這里新增一個(gè)image標(biāo)簽。
→在左側(cè)資源管理器中剛剛新增的images文件夾已經(jīng)顯示出來(lái)了,打開以后會(huì)發(fā)現(xiàn)里面有一個(gè)image,點(diǎn)jpg的圖片。把這個(gè)路徑寫一下,在src屬性里面寫入位于當(dāng)前html文件同級(jí)的images文件夾的名稱,使用符號(hào)斜杠找到image,點(diǎn)gpg,看一下效果。此時(shí)圖片也完整顯示出來(lái)了。
→如果在amager四文件夾里還有一個(gè)amager四文件夾,下級(jí)路徑又該怎么寫?在amager文件夾里再新建一個(gè)文件夾,打開vscod,在左側(cè)的資源管理器中a major s文件夾下面又新增了一個(gè)a major s文件夾,在這里面又放了一張圖片。
這張圖片應(yīng)該怎樣讓它展示出來(lái)?一起來(lái)看一下。
→首先找到同級(jí)的images文件夾,使用符號(hào)斜杠,此時(shí)vscode會(huì)提供給兩個(gè)選項(xiàng),一個(gè)是imagers文件夾,另一個(gè)是imager.gpg。選擇imagers,imagers文件夾里面的imager.gpg的文件了,保存一下看看效果。
在瀏覽器中這兩張圖片都完美的展現(xiàn)出來(lái)了。
最后來(lái)看一下相對(duì)路徑里面的。上級(jí)路徑使用的符號(hào)是點(diǎn)點(diǎn)杠。上級(jí)路徑又應(yīng)該怎么理解?也就是圖像文件是位于當(dāng)前這個(gè) hd ml文件的上一集。
在練習(xí)文件夾里新增一個(gè)名為 hd ml的文件夾,打開vs code,選擇剛剛新增的文件夾,選擇新建文件,這里需要新增一個(gè) hd ml文檔。在當(dāng)前 hd ml文檔中,如果想要調(diào)用上一級(jí)的 image 點(diǎn) j p g 的圖片應(yīng)該怎么做?在 sr c 屬性里面使用點(diǎn)點(diǎn)杠。
這里 vs code提供了上一集路徑中存在的文件,選擇 image 點(diǎn) j p g,在瀏覽器中看下效果,此時(shí)圖片也是正常顯示的。如果hd ml文件藏得更深一些,把當(dāng)前的文件復(fù)制一份,新增一個(gè)hd ml文件夾,將復(fù)制的文檔粘貼一下,打開剛剛復(fù)制的文檔,修改sr c屬性里面的值,使用點(diǎn)點(diǎn)杠。
此時(shí)是沒(méi)有找到 amage 點(diǎn) j p g 的文件,這個(gè)時(shí)候就需要重復(fù)剛剛的操作,點(diǎn)點(diǎn)杠就能找到需要到的 amage 點(diǎn) jbg 的文件了,保存一下看看效果。這里可以看到圖片還是正常顯示出來(lái)了。
本期視頻主要了解了相對(duì)路徑的三種分類,一個(gè)是同級(jí)路徑,一個(gè)是下級(jí)路徑,還有一個(gè)是上級(jí)路徑。希望小伙伴們下來(lái)可以好好練習(xí)一下,這對(duì)于后期的內(nèi)容非常重要。下期再來(lái)聊聊絕對(duì)路徑。本期的內(nèi)容到此結(jié)束,感謝觀看,下期再見。
最近需要在web項(xiàng)目中顯示監(jiān)控視頻,采用了webrtc+webrtc-streamer+coturn的方案實(shí)現(xiàn),能夠在公網(wǎng)上做很低的延時(shí),對(duì)于實(shí)時(shí)監(jiān)控視頻有很好的效果,是目前來(lái)講比較好的一個(gè)選擇方案。
1、webrtc 用于視頻流的顯示。
2、webrtc-streamer負(fù)責(zé)去監(jiān)控視頻主機(jī)(這里多數(shù)是NVR或DVR)去拉取RSTP視頻流,并轉(zhuǎn)發(fā)到Webrtc中進(jìn)行顯示。
3、coturn用于webrtc與webrtc-streamer之間的通信穿透服務(wù),主要作用是穿透做NAT穿透,讓雙方找到能互相找到。
網(wǎng)絡(luò)邏輯結(jié)構(gòu)圖
一、webrtc-streamer安裝
這里采用的是CentOS 7系統(tǒng),直接采用的Docker安裝,關(guān)于Docker安裝可以參考《Kubernetes安裝記錄》的docker部分。
docker pull mpromonet/webrtc-streamer
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer -s120.92.19.150:3478 -tnoka:noka@120.92.19.150:3478
這里后面的-t和-s參數(shù)分別指向cotum的strun和tun服務(wù),這里同內(nèi)一定要用自己搭建的穿透服務(wù),webrtc-streamer內(nèi)置的服務(wù)是指向goole提供的一個(gè)服務(wù),國(guó)內(nèi)訪問(wèn)及其不穩(wěn)定,關(guān)于cotum的安裝請(qǐng)參照官網(wǎng)。這里啟動(dòng)好以后,就可以通過(guò)瀏覽器訪問(wèn)8000端口的服務(wù)了,這里可以通過(guò)以下地址來(lái)驗(yàn)證視頻流服是否成功。
http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101
如果上面的地址能播放視頻,說(shuō)明配置成功了,地址后面的參數(shù)是視頻流的地址。
二、web端視頻顯示代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- webrtc公用庫(kù)-->
<script src="/js/adapter.js"></script>
<!-- webrtc-streamer調(diào)用庫(kù),來(lái)自webrtc-streamer-->
<script src="/js/webrtcstreamer.js"></script>
</head>
<body>
<!-- 視頻顯示部分 -->
<div id="play_div"></div>
<script>
var webRtcServerList = [];//視頻流服務(wù)對(duì)象部分
var urls=[
'rtsp://admin:HUAN1415@192.168.1.106:554/Streaming/Channels/102',//視頻流地址
'rtsp://admin:HUAN1415@210.201.225.44:554/Streaming/Channels/202'//視頻流地址
];
var rsurl='http://210.201.225.42:8000/';//webrtc-streamer服務(wù)地址
//---------創(chuàng)建視頻播放界面--------------------------------------------------------
function plays(idx){
var videoelt = document.createElement("video");//創(chuàng)建一個(gè)播放器
var vi_tag='videoTag_'+idx;//播放器的id
videoelt.id = vi_tag;//播放器id
videoelt.muted = true;
videoelt.width=500;
videoelt.height=600;
videoelt.controls=true;//開啟進(jìn)度條
document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//創(chuàng)建webrtc流對(duì)象
//連接視頻,參數(shù)1 視頻地址,參數(shù)2 音頻地址(這里沒(méi)有),參數(shù)3 連接參數(shù)(這里采用的是tcp,120秒超時(shí)等)
webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
webRtcServerList[idx]=webRtcServer;//緩存視頻流對(duì)象
}
//----------頁(yè)面退出時(shí)關(guān)閉播放流---------------------
window.onbeforeunload = function() {
for(var i=0;i<webRtcServerList.length;i++){
webRtcServerList[i].disconnect();
}
}
//---------初始化加載視頻----------------------------
window.onload= function() {
for(var i=0;i<urls.length;i++){
plays(i);
}
}
</script>
</body>
</html>
這樣就完成了整個(gè)項(xiàng)目實(shí)現(xiàn),這里如果視頻沒(méi)有播放成功,最有可能是穿透服務(wù)的問(wèn)題,需要檢查穿透服務(wù)。
前面文章中寫過(guò)類似的文章《手把手教你HTML5實(shí)現(xiàn)根據(jù)LBS定位到商家兩點(diǎn)之間距離多少》,建議有興趣的小伙伴可以看看。
各種瀏覽器對(duì)HTML5 Geolocation 的支持
瀏覽器 版本 只支持HTTPS版本 IE 9+ - Edge 12+ - Firefox 3.5+ - Chrome 5+ 50+ Safari 5+ 39+ iOS Safari 3.2+ 10.2+ Android Browser 2.1+ 56+ Chrome for Android 57+ 57+ UC Browser for Android 11.4+ -
出于安全考慮,部分瀏覽器只允許通過(guò)HTTPS協(xié)議使用 Geolocation API。在HTTP協(xié)議下使用Geolocation API 瀏覽器會(huì)拋出異常,在開發(fā)階段,127.0.0.1和localhost 等本地域在兩種協(xié)議下均可使用。
Geolocation API 通過(guò) navigator.geolocation 全局對(duì)象進(jìn)行訪問(wèn),第一次訪問(wèn)的時(shí)候會(huì)詢問(wèn)用戶是否允許共享位置。
判斷瀏覽器是否支持 Geolocation API
// 判斷瀏覽器屬否支持獲取位置
if(navigator.geolocation){
console.log("可以獲取");
}else{
console.log("不支持");
}
實(shí)例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
獲取用戶地理位置
<input type="button" value="點(diǎn)擊獲取位置" id="btn">
<script>
let btnBtn = document.getElementById('btn')
btnBtn.onclick = () => { // 點(diǎn)擊事件
getAdd()
}
// 成功回調(diào)
let success = (position) => {
console.log(`獲取位置成功:${position.coords}`);
console.log(position.coords); // 獲取坐標(biāo)信息
// coords的常用屬性
console.log(position.coords.latitude); // 獲取坐標(biāo)緯度
console.log(position.coords.longitude); // 獲取坐標(biāo)經(jīng)度
console.log(position.coords.accuracy); // 獲取坐標(biāo)精度,單位為米
console.log(position.timestamp); // 獲取位置的時(shí)間戳
}
// 失敗回調(diào)
let error = (positionErr) => {
console.log(`獲取位置失?。?{positionErr.code}+${positionErr.message}`);
}
let options = {
enableHightAccuracy: false, // 獲取高精度的位置信息,可能會(huì)增加響應(yīng)時(shí)間,默認(rèn)是false
timeout: 30000, // 設(shè)置超時(shí)時(shí)間,單位毫秒,如果到達(dá)設(shè)定的時(shí)間沒(méi)獲取到信息則回觸發(fā)失敗回調(diào),默認(rèn)值為0,無(wú)限大
maximumAge: 0 // 設(shè)置用戶位置信息緩存的最大時(shí)間
}
let getAdd = () => {
navigator.geolocation.getCurrentPosition(success, error, options)
}
// 判斷瀏覽器屬否支持獲取位置
if(navigator.geolocation){
console.log("可以獲取");
}else{
console.log("不支持");
}
</script>
</body>
</html>
當(dāng)獲取位置失敗時(shí),會(huì)調(diào)用失敗回調(diào)(error函數(shù))。返回的參數(shù)<positionErr.code 標(biāo)識(shí)錯(cuò)誤的原因><positionErr.message錯(cuò)誤信息描述> positionErr.code 值
《手把手教你HTML5實(shí)現(xiàn)根據(jù)LBS定位到商家兩點(diǎn)之間距離多少》
作者:藍(lán)海00
鏈接:https://www.jianshu.com/p/d0b0b6120055
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。