架构师

您现在的位置是:首页 > 技术博客 > 编程基础

编程基础

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

架构师小跟班 2020-06-01 编程基础
据网上查证,好像没有一个浏览器不安装插件可以直接播放rtsp流媒体。经站长测试,即使安装了插件,有些浏览器也未必支持,比如QQ浏览器,谷歌浏览器等。这里我们选用的是360安全浏览

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

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

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

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

第二步:安装

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

rtsp://admin:ruiyi123456@192.168.1.64:554

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

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

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

第四步:在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:ruiyi123456@192.168.1.64: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/bootstrap@3.3.7/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:ruiyi123456@192.168.1.64: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>


文章评论