整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
嘍大家好，我是胖達(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)系。
