在网页上显示监控视频

最近需要在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>

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

时的工作中常会遇到一些系统集成的需求，需要在软件平台集成视频监控系统。而软件开发者往往不懂安防弱电系统，不知道如何在自己的软件界面中集成一些监控的实时画面。而监控厂家提供的SDK比较复杂，很难在短时间完成集成的任务。最终导致软件平台的一些功能无法实现，影响项目的质量。

本文提供的方法主要基于VLC播放器的ActiveX插件，通过这个插件，在网页中调用摄像机的RTSP流，实现图像的实时预览，音频的监听等等功能。文章以海康的IP网络摄像机为例给出具体的调用方法，供大家学习参照。

VLC软件下载

登录VLC官网 https://www.videolan.org/，选择windows（32位）版本下载。

下载VLC软件

VLC软件安装（务必勾选插件）

运行安装文件

选择软件安装位置

一定记得要勾选网页浏览器插件

完成安装

网页编辑

可选用记事本（notepad）或专业的编辑器，输入如下代码，保存为html网页文件。

<html>
<body>

<title>TESTVDEIO-1-TEST</title>
<head>
<table>
            <tbody>
            <caption>视频监控演示</caption>
        <tr>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
        </tr>
         <tr>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
            <td>
            <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
            </td>
        </tr>
    </tbody>
</table>
            </object>
</body>
</html>

代码编辑截图

海康威视RTSP调用格式

具体请参看海康专业文档

浏览器测试

先用Google Chrome浏览器测试，提示插件不支持。

Chrome浏览器提示插件不受支持

用微软IE测试，需要安装插件。

IE浏览器提示要安装ActiveX插件

确认安装插件

浏览器只显示了第一个画面。

IE浏览器显示不完整

用编辑器测试，2种内核都能正常显示。

编辑器里测试效果

改用360浏览器，呈现2X2的画面，实现最终的显示效果。

360浏览器显示的最终效果图

结语

本文参考了一些专业文章，就不一一列出了，在这一并谢过！

由于本人水平有限，有不对的地方敬请指正。文章旨在抛砖引玉，通过讨论，相互学习，共同进步。

我是WoNew弱电蜗牛，一名从业多年的弱电工程师，在头条传播弱电专业知识和行业信息，分享工作中的经验和心得。
喜欢我的文章或视频，欢迎点赞和转发。有疑问或建议，也欢迎留言，我会尽力解答。

篇介绍了前端入门——html 中如何使用图片,今天讲下如何使用视频和音频等多媒体元素，它们能让你的网页更加丰富，读者相对于文字图片更愿意观看视频和音频或其它多媒体。在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。

什么是多媒体？

是多种媒体的综合，一般包括文本，声音和图像等多种媒体形式。在计算机系统中，多媒体指组合两种或两种以上媒体的一种人机交互式信息交流和传播媒体。使用的媒体包括文字、图片、照片、声音、动画和影片，以及程式所提供的互动功能。

在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

多媒体文件格式

多媒体元素（比如视频和音频）存储于媒体文件中。多媒体元素也拥有带有不同扩展名字的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。具体有哪些格式可以参考 w3cshool 网站的介绍，https://www.w3cschool.cn/html5/html5-video.html ，https://www.w3cschool.cn/html5/html5-audio.html。

HTML5 Video(视频)

直到现在，网页上仍然不存在一项显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

语法如下：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持Video标签。
</video>

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道视频的大小，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。一个页面可以使用多个<video> 标签，<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。

显示效果：

HTML5Audio(音频)

和视频一样没有统一的标准，各个浏览器都不一样。HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。通过使用HTML5中的audio功能，你可以实现与flash相同的功能，即回放、跳转、缓冲等。

语法如下：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

control 属性供添加播放、暂停和音量控件。在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。允许使用多个 <source> 元素。<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。

显示效果：

HTML 插件——辅助应用程序

插件（Plug-in）是扩展浏览器标准功能的计算机程序，插件被设计用于许多不同的目的：

运行 Java 小程序
运行 ActiveX 控件
显示 Flash 电影
显示视频或音频
显示地图
扫描病毒
验证银行账号

1、<object> 元素

它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中。

如下：

插入一个网页片段

<object width="100%" height="500px" data="snippet.html"></object>

或者插入一个图片

<object data="audi.jpeg"></object>

播放一个视频

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>

播放一个音频

<object height="100" width="100" data="song.mp3"></object>

2、<embed> 元素

插入一个flash文件

<embed width="400" height="50" src="bookmark.swf">

插入html片段

<embed width="100%" height="500px" src="snippet.html">

播放一个音频

<embed height="100" width="100" src="song.mp3" />

插入一个图片

<embed src="audi.jpeg">

注意：
大多数浏览器不再支持 Java 小程序和插件。
大多数现代浏览器关闭了对 Flash 的支持。
我们可以使用 <video> 和 <audio> 标签来显示视频和音频

视频和音频如何兼容大多浏览器

如下视频代码，HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

HTML 5 + <object> + <embed> 是最好的解决办法。

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

如下音频代码，HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。

HTML 5 + <embed> 是最好的解决办法。

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>

到此你以及了解了如何在网页中使用视频音频及其它多媒体控件，赶快自己试试，祝你学习愉快。

参考文献：https://www.w3school.com.cn/html/html_video.asp

上篇：前端入门——html 中如何使用图片

下篇：前端入门——html 表格的使用

在线咨询

上一篇：21天学通HTML+CSS+JavaScript Web开发中文完整PDF版
下一篇：这些是你想要的H5键盘兼容方案

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商