「胖达分享」网页中的图片和html文档的路径

喽大家好，我是胖达。本期视频来看看路径相关的内容。我们知道在网页中存在很多的图片，如果把这些图片和html文档放在一起，这样不光不美观，管理起来也非常不方便。通常会新建一个专门用来管理图像资源的文件夹，当需要查找图像的时候就会选择使用路径的方式来指定图像文件的位置。

路径的类型又分为两种，第一种是相对路径，第二种是绝对路径。今天先来了解一下相对路径。相对路径是相对于当前文件的位置来表示资源，也就是图片位置的路径表达方式。简单来说就是图片相对于当前html文档的位置。这里把相对路径的分类给大家列出来了，一个一个往下看。

·首先是同级路径。同级路径不需要在html里面写任何符号，只需要将文件名写到html属性里就可以了。在代码里看一下，这里有一个image，点jpg的图片和html文档处于同一级，所以在html的属性里直接写image，点jpg保存一下看看效果。

可以看到现在图片是正常展示的，同级路径下只需要在html属性里完整填写图像文件的名称就可以了。

·再来看第二个下级路径。当图像文件位于html文件下一集时，需要在html属性里完整填写同级文件夹的名称，然后斜杠写出对应图片文件的名称。

→首先打开资源文件夹，在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。

→打开vscode，新建一个gtml文档，这里新增一个image标签。

→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了，打开以后会发现里面有一个image，点jpg的图片。把这个路径写一下，在src属性里面写入位于当前html文件同级的images文件夹的名称，使用符号斜杠找到image，点gpg，看一下效果。此时图片也完整显示出来了。

→如果在amager四文件夹里还有一个amager四文件夹，下级路径又该怎么写？在amager文件夹里再新建一个文件夹，打开vscod，在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹，在这里面又放了一张图片。

这张图片应该怎样让它展示出来？一起来看一下。

→首先找到同级的images文件夹，使用符号斜杠，此时vscode会提供给两个选项，一个是imagers文件夹，另一个是imager.gpg。选择imagers，imagers文件夹里面的imager.gpg的文件了，保存一下看看效果。

在浏览器中这两张图片都完美的展现出来了。

最后来看一下相对路径里面的。上级路径使用的符号是点点杠。上级路径又应该怎么理解？也就是图像文件是位于当前这个 hd ml文件的上一集。

在练习文件夹里新增一个名为 hd ml的文件夹，打开vs code，选择刚刚新增的文件夹，选择新建文件，这里需要新增一个 hd ml文档。在当前 hd ml文档中，如果想要调用上一级的 image 点 j p g 的图片应该怎么做？在 sr c 属性里面使用点点杠。

这里 vs code提供了上一集路径中存在的文件，选择 image 点 j p g，在浏览器中看下效果，此时图片也是正常显示的。如果hd ml文件藏得更深一些，把当前的文件复制一份，新增一个hd ml文件夹，将复制的文档粘贴一下，打开刚刚复制的文档，修改sr c属性里面的值，使用点点杠。

此时是没有找到 amage 点 j p g 的文件，这个时候就需要重复刚刚的操作，点点杠就能找到需要到的 amage 点 jbg 的文件了，保存一下看看效果。这里可以看到图片还是正常显示出来了。

本期视频主要了解了相对路径的三种分类，一个是同级路径，一个是下级路径，还有一个是上级路径。希望小伙伴们下来可以好好练习一下，这对于后期的内容非常重要。下期再来聊聊绝对路径。本期的内容到此结束，感谢观看，下期再见。

最近需要在web项目中显示监控视频，采用了webrtc+webrtc-streamer+coturn的方案实现，能够在公网上做很低的延时，对于实时监控视频有很好的效果，是目前来讲比较好的一个选择方案。

1、webrtc 用于视频流的显示。

2、webrtc-streamer负责去监控视频主机（这里多数是NVR或DVR）去拉取RSTP视频流，并转发到Webrtc中进行显示。

3、coturn用于webrtc与webrtc-streamer之间的通信穿透服务，主要作用是穿透做NAT穿透，让双方找到能互相找到。

网络逻辑结构图

一、webrtc-streamer安装

这里采用的是CentOS 7系统，直接采用的Docker安装，关于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参数分别指向cotum的strun和tun服务，这里同内一定要用自己搭建的穿透服务，webrtc-streamer内置的服务是指向goole提供的一个服务，国内访问及其不稳定，关于cotum的安装请参照官网。这里启动好以后，就可以通过浏览器访问8000端口的服务了，这里可以通过以下地址来验证视频流服是否成功。

http://ip:8000/webrtcstreamer.html?rtsp://admin:admin@ip:554/Streaming/Channels/101

如果上面的地址能播放视频，说明配置成功了，地址后面的参数是视频流的地址。

二、web端视频显示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- webrtc公用库-->
    <script src="/js/adapter.js"></script>
    <!-- webrtc-streamer调用库，来自webrtc-streamer-->
    <script src="/js/webrtcstreamer.js"></script>
</head>
<body>
<!-- 视频显示部分 -->
<div id="play_div"></div>
<script>
    var webRtcServerList = [];//视频流服务对象部分
    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服务地址
    //---------创建视频播放界面--------------------------------------------------------
    function plays(idx){
        var videoelt = document.createElement("video");//创建一个播放器
        var vi_tag='videoTag_'+idx;//播放器的id
        videoelt.id = vi_tag;//播放器id
        videoelt.muted = true;
        videoelt.width=500;
        videoelt.height=600;
        videoelt.controls=true;//开启进度条
        document.getElementById ("play_div").appendChild(videoelt);//添加播放器到界面中
        var webRtcServer = new WebRtcStreamer(vi_tag,rsurl);//创建webrtc流对象
        //连接视频,参数1 视频地址，参数2 音频地址（这里没有），参数3 连接参数(这里采用的是tcp,120秒超时等）
        webRtcServer.connect(urls[idx],undefined,"rtptransport=tcp&timeout=120&width=320&height=0");
        webRtcServerList[idx]=webRtcServer;//缓存视频流对象
    }
    //----------页面退出时关闭播放流---------------------
    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>

这样就完成了整个项目实现，这里如果视频没有播放成功，最有可能是穿透服务的问题，需要检查穿透服务。

言

前面文章中写过类似的文章《手把手教你HTML5实现根据LBS定位到商家两点之间距离多少》，建议有兴趣的小伙伴可以看看。

使用 HTML5 Geolocation API 来构建基于地理位置的应用～

各种浏览器对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+ -

出于安全考虑，部分浏览器只允许通过HTTPS协议使用 Geolocation API。在HTTP协议下使用Geolocation API 浏览器会抛出异常，在开发阶段，127.0.0.1和localhost 等本地域在两种协议下均可使用。

Geolocation API 通过 navigator.geolocation 全局对象进行访问，第一次访问的时候会询问用户是否允许共享位置。

判断浏览器是否支持 Geolocation API

        // 判断浏览器属否支持获取位置
        if(navigator.geolocation){
            console.log("可以获取");
        }else{
            console.log("不支持");
        }

实例代码如下：

<!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="点击获取位置" id="btn">
    <script>
        let btnBtn = document.getElementById('btn')
        btnBtn.onclick = () => { // 点击事件
                getAdd()
            }
            // 成功回调
        let success = (position) => {
                console.log(`获取位置成功：${position.coords}`);
                console.log(position.coords); // 获取坐标信息
                // coords的常用属性
                console.log(position.coords.latitude); // 获取坐标纬度
                console.log(position.coords.longitude); // 获取坐标经度
                console.log(position.coords.accuracy); // 获取坐标精度，单位为米
                console.log(position.timestamp); // 获取位置的时间戳

            }
            // 失败回调
        let error = (positionErr) => {
            console.log(`获取位置失败：${positionErr.code}+${positionErr.message}`);
        }

        let options = {
            enableHightAccuracy: false, // 获取高精度的位置信息，可能会增加响应时间，默认是false
            timeout: 30000, // 设置超时时间，单位毫秒，如果到达设定的时间没获取到信息则回触发失败回调，默认值为0，无限大
            maximumAge: 0 // 设置用户位置信息缓存的最大时间
        }
        let getAdd = () => {
            navigator.geolocation.getCurrentPosition(success, error, options)
        }


        // 判断浏览器属否支持获取位置
        if(navigator.geolocation){
            console.log("可以获取");
        }else{
            console.log("不支持");
        }
    </script>
</body>

</html>

当获取位置失败时，会调用失败回调(error函数)。返回的参数<positionErr.code 标识错误的原因><positionErr.message错误信息描述> positionErr.code 值

UNKNOWN_ERROR(0): 其他错误
PERMISSION_DENIED(1): 用户拒绝分享位置信息
POSITION_UNAVAILABLE(2): 获取用户位置信息失败
TIMEOUT(3): 获取用户位置信息超时

整合营销服务商

「胖达分享」网页中的图片和html文档的路径

言

使用 HTML5 Geolocation API 来构建基于地理位置的应用～

推荐文章

您的项目需求