首页 > 其他分享 >web js 播放rtsp视频流方案

web js 播放rtsp视频流方案

时间:2023-07-05 11:23:22浏览次数:72  
标签:web 视频流 rtsp webRtcServer streamer webrtc

场景

需要在web端预览海康无线摄像头视频流,所以采用海康自身提供的web sdk无法使用

方案1

rtsp流推送到应用服务器,应用服务器再通过ffmpeg 推送到nginx, js再去拉流
缺点: 多了一层转发,造成了一定的延迟

方案2

通过webRTC方案,使用现有开源插件 webrtc-streamer
https://github.com/mpromonet/webrtc-streamer

实施

  • 采用docker安装
    docker run --net=host -itd --name webrtc-streamer mpromonet/webrtc-streamer:v0.6.5
    -- 注意
        0.6.5 之后的版本会导致api/getIceServers 无法访问,问题还没找到
    
  • 代码示例
    • 去github上下载前端包 https://github.com/mpromonet/webrtc-streamer/releases
    • 解压后,将html文件夹拷贝到项目里面
      • image
    • 具体代码
      <html>
      <head>
      	<script src="html/libs/adapter.min.js" ></script>
      	<script src="html/webrtcstreamer.js" ></script>
      	<script>
      		var webRtcServer      = null;
      		window.onload         = function() {
      			webRtcServer      = new WebRtcStreamer("video", "http://192.168.31.160:8000");
      			webRtcServer.connect("rtsp://192.168.31.199:554/openUrl/Tsca7jq");
      		}
      		window.onbeforeunload = function() { webRtcServer.disconnect(); }
      	</script>
      </head>
      <body>
      <video id="video"></video>
      </body>
      </html>
      
      
  • 注意

    视频流一定要设置成h264格式的,可以在海康摄像头管理界面去设置

  • 效果
    image

标签:web,视频流,rtsp,webRtcServer,streamer,webrtc
From: https://www.cnblogs.com/nanxhs/p/17528041.html

相关文章

  • RunnerGo 新增对WebSocket、dubbo、TCP/IP三种协议的API测试
    大家好,RunnerGo作为一款一站式测试平台不断为用户提供更好的使用体验,最近得知RunnerGo新增对,WebSocket、Dubbo、TCP/IP,三种协议API的测试支持,本篇文章跟大家分享一下使用方法。WebSocket协议WebSocket是一种在单个TCP连接上进行全双工通信的API技术。相比于传统的HTTP......
  • SpringBoot3.0从入门到项目实战:解决Web应用痛点的最新解决方案
    SpringBoot3.0从入门到项目实战:解决Web应用痛点的最新解决方案SpringBoot是当前Java领域中应用最广的框架之一,而随着SpringBoot3.0的发布,它迎来了更加全面和强大的一次升级。本文将深入浅出地介绍SpringBoot3.0的新特性,同时结合实际项目经验,分享Web应用的痛点以及解决方案,帮......
  • FreeWheel基于Go的实践经验漫谈——GC是大坑(关键业务场景不用),web框架尚未统一,和c++性
    Go语言是FreeWheel公司目前主要力推的一个方向,在其看来,面向服务的架构的大环境中,Go非常适合做一些功能相对独立、功能比较明确的微服务的语言。在结合已有的各种编程语言,计算框架(如Hadoop、Java、Ruby、C++)的基础上,FreeWheel把Go语言定位成用来实现轻量级服务或API的缺省编程语言,将......
  • geoserver(内置GeoWebcache)+arcgis瓦片(完整)
    环境:geoserver-2.18.0-bin、geowebcache-1.18.3-war里的gwc-arcgiscache-1.18-SNAPSHOT.jargeoserver下载地址:https://sourceforge.net/projects/geoserver/files/latest/downloadGeoWebcache:https://sourceforge.net/projects/geowebcache/files/geowebcache/1.18.3/geowebcache......
  • webapi中用Quartz(定时任务)的步骤
         文件---新建---项目---ASP.NETWEB应用程序---程序命名---webapiNuget---Quartz(/v2.5)创建要在定时任务中执行的工作内容publicclassRJJob:Ijob创建调度任务(确定执行时间)Global.asax中,加入启动代码:JobScheduler.Start();......
  • GeoWebCache+arcgis紧凑型瓦片
     利用网上下载geowebcache-1.18.3-war+apache-tomcat-9.0.35进行部署并运行GeoWebcache:https://sourceforge.net/projects/geowebcache/files/geowebcache/1.18.3/geowebcache-1.18.3-war.zip/download 1、修改Geowebcache.war中的配置文件,打开geowebcache\WEB-INF\geowe......
  • MQTTnet 创建基于 WebSocket 的 Mqtt 服务器
    MQTTnet.Exceptions.MqttProtocolViolationException:Expectedatleast21540bytesbutthereareonly71bytes使用了错误的协议,mqtt有tcp和ws两种连接协议ws://使用1883端口就能正常连接 ......
  • web开发基础笔录(5)-Javascript(1)
    目录概述概述JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。......
  • 开发软件 --- java web 容器
    JavaWeb容器是一种运行JavaWeb应用程序的环境,提供对Servlet和JSP等技术的类库支持。以下是一些常见的JavaWeb容器:轻量级 ApacheTomca流行的开源轻量部分支持的javaweb容器。支持Servlet、JSP和WebSocket等技术。Jetty高性能的开源轻量部分支持的java......
  • 通过Spring Boot三分钟创建Spring Web项目
    SpringBoot简介接下来我们所有的Spring代码实例将会基于SpringBoot,因此我们先来了解一下SpringBoot这个大杀器。Spring早期使用XML配置的方式来配置SpringBeans之间的关系,比如AOP和依赖注入的配置。随着功能以及业务逻辑的日益复杂,应用便会伴随大量的XML配置文件以及复杂的Bean......