如何在前端HTML中使用海康相机rtsp流（vlc）

据网上查证，好像没有一个浏览器不安装插件可以直接播放rtsp流媒体。经站长测试，即使安装了插件，有些浏览器也未必支持，比如QQ浏览器，谷歌浏览器等。

这里我们选用的是360安全浏览器。

第一步：下载插件：vlc-3.0.10-win32.exe

下载地址：https://www.videolan.org/vlc/

第二步：安装

双击一直下一步。打开vlc软件，依次点击菜单栏中的“媒体”，“打开网络串流”，输入以下流地址：

rtsp://admin:[email protected]:554

如何在前端HTML中使用海康相机rtsp流（vlc）

其中，rtsp：协议，admin：用户名，ruiyi123456：密码，192.168.1.64：摄像头IP，554：端口号。

在摄像头联网的情况下，可以直接在浏览器中输入摄像头IP，打开海康的后台管理页面，用户名密码同上。

如何在前端HTML中使用海康相机rtsp流（vlc）

第三步：测试，点击上面窗口的“播放”按钮即可。

如何在前端HTML中使用海康相机rtsp流（vlc）

第四步：在HTML中使用

在vue中使用，新建一个xxx.vue文件，贴入以下内容。

<template>
  <div>
    <object type='application/x-vlc-plugin' id='vlc' events='True' width="1300px" height="750px"
            pluginspage="http://www.videolan.org"
            codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
      <param name='mrl' value='rtsp://admin:[email protected]:554' id="mrl"/>
      <param name='volume' value='30'/>
      <param name='autoplay' value='false'/>
      <param name='loop' value='false'/>
      <param name='fullscreen' value='false'/>
    </object>
  </div>
</template>

在HTML中使用：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    ul li {
        list-style: none;
    }

    #imgs {
        height: 610px;
        overflow-y: auto
    }

    #imgs li {
        float: left;
    }
</style>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="fixed-table-toolbar">
                    <div class="col-sm-2">
                        <ul id="surveillanceTask" class="list-group">
                            <li>请选择摄像头</li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <div class="fleft videoarea">
                            <div id="video">
                                <object type='application/x-vlc-plugin' id='vlc' events='True' width="1300px"
                                        height="750px" pluginspage="http://www.videolan.org"
                                        codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                                    <param name='mrl' value='rtsp://admin:[email protected]:554' id="mrl"/>
                                    <param name='volume' value='30'/>
                                    <param name='autoplay' value='false'/>
                                    <param name='loop' value='false'/>
                                    <param name='fullscreen' value='false'/>
                                </object>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/appjs/sys/videoMonitoring/videoMonitoring.js"></script>

</body>
</html>