Html5 <video>实现摄像头监控问题:html5并不支持rtsp协议,所以使用vlc进行转码,将rtsp转http流,这样<video>才可以直接播放

今天在写html5中播放旷视C2摄像头视频监控的功能,查了很多资料,才发现Html5 <video>并不支持rtsp协议。后来查到使用第三方转码才得以实现。

这里把方法写下来分享给大家。

首先要获取摄像机品牌的RTSP地址:

如大华的是

rtsp://user:[email protected]:port/cam/ realmonitor?channel=1&subtype=0

海康的是

rtsp://user:[email protected]:port/MPEG-4/ch1/main/av_stream

旷视 C2

  rtsp://192.168.1.10/user=admin&password=&channel=1&stream=0.sdp?

一,通过VLC转码
1.媒体->打开网络串流,输入IPCamera的视频流地址,这个地址可以问卖摄像头的人要,或直接问厂家要,如C2的是

rtsp://192.168.1.10/user=admin&password=&channel=1&stream=0.sdp?

输完地址之后在右下角选择串流

2.点击底下的下一步->Http,选中HTTP

然后点击右边的添加->在路径处写上/stream,转换出来的视频流地址为,你本机服务器的IP地址+/stream,如http://192.168.1.4:8080/stream

3.点击下一步->选择要转换成的编码格式:Video-Theora+Vorbis(OGG)

4.点击next下一步

5.点击 Stream 流 即可,这时VLC标题栏显示 流 ,说明已经在转码

原文地址:https://www.cnblogs.com/chuanyueinlife/p/8965011.html

时间: 2024-10-11 05:58:25

Html5 <video>实现摄像头监控问题:html5并不支持rtsp协议,所以使用vlc进行转码,将rtsp转http流,这样<video>才可以直接播放的相关文章

利用html5调用本地摄像头拍照上传图片[转]

利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要配合js就可以轻松获取.. 目前支持html5

HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5调用手机摄像头,仅仅支持OPPOHD浏览器</title> 6 <style> 7 #video { border: 1px solid #ccc; display:inline-block; } 8 #canvas

html5调用手机摄像头,实现拍照上传功能

今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在火的不行的html5,html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源.实现拍照功能的html5代码: <article> <style scoped> video { transform: scaleX(-1); } p { text-alig

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5 学习总结(一)——HTML5概要与新增标签

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

HTML5 学习总结(一)——HTML5概要与新增标签(转载)

目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明 二.废弃的标签 三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3

使用WebGL 自定义 3D 摄像头监控模型

前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问题:海量视频分散.孤立.视角不完整.位置不明确等问题,始终围绕着使用者.因此,如何更直观.更明确的管理摄像机和掌控视频动态,已成为提升视频应用价值的重要话题.所以当前项目正是从解决此现状问题的角度,应运而生.围绕如何提高.管理和有效利用前端设备采集的海量信息为公共安全服务,特别是在技术融合大趋势下,

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H