如何在前端HTML中使用海康相机rtsp流（vlc）
据网上查证，好像没有一个浏览器不安装插件可以直接播放rtsp流媒体。经站长测试，即使安装了插件，有些浏览器也未必支持，比如QQ浏览器，谷歌浏览器等。这里我们选用的是360安全浏览器。第一步：下载插件：vlc-3.0.10-win32.exe下载地址：https://www.videolan.org/vlc/ 第二步：安装双击一直下一步。打开vlc软件，依次点击菜单栏中的...
·
原文地址：开发者导航
据网上查证，好像没有一个浏览器不安装插件可以直接播放rtsp流媒体。经站长测试，即使安装了插件，有些浏览器也未必支持，比如QQ浏览器，谷歌浏览器等。
这里我们选用的是360安全浏览器。
第一步：下载插件：vlc-3.0.10-win32.exe
下载地址：Official download of VLC media player, the best Open Source player - VideoLAN
第二步：安装
双击一直下一步。打开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>
技术共进，成长同行——讯飞AI开发者社区
更多推荐
2
0- 0
已为社区贡献7条内容
所有评论(0)