要使用这个库需要先安装

我使用了npm来安装

https://www.npmjs.com/package/webrtc-streamer

需要启动webrtc-streamer后端,这里有下载地址

https://github.com/mpromonet/webrtc-streamer/releases/tag/v0.7.1

组件使用方法加载播放组件

dom上给了一个输入框和video

由于需要导入js需要在angular.json中引用

tsconfig.json中需要准许这个js的加载

由于我更新了最新版本nodejs,这里直接运行会有问题,,所以加了一个前缀,如果你是老版本的nodejs记得去掉再运行

给出代码

https://github.com/lu1770/video-site

架构是dotnet3.1+angular+webrtc-streamer+rtsp流

需要一直保持开启webrtc-streamer

测试过程中使用了webrtc这里给出源代码仓库以供查阅https://github.com/mpromonet/webrtc-streamer

之前有试过ffmpeg方案但是延时非常严重,使用webrtc就非常完美,感谢前人写的博客.

感谢.

Angular中播放RTSP的更多相关文章

  1. 使用Gin+WebSocket在HTML中无插件播放RTSP

    在后台的开发中遇到了对接显示摄像头视频流的需求.目前获取海康及大华等主流的摄像头的视频流使用的基本都是RTSP协议.不过HTML页面并不能直接播放RTSP协议的视频流,查询了一番各种网页播放RTSP的 ...

  2. 使用vlc播放器播放rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 web网页中使用vlc插件播放相机rtsp流视频 使用vlc进行二次开发做自己的播放器 首先需要安装vlc播放器,下载及安装步骤略 使用vlc播放器播放rt ...

  3. 【FFmpeg】ffplay播放rtsp视频流花屏问题

    问题描述:ffplay播放rtsp视频流时,播放过程中随机出现花屏现象. 基本流程学习:阅读ffplay源码,熟悉其播放rtsp视频流的基本流程. 在ffplay源码阅读和分析的基础上,画出了其播放r ...

  4. 浏览器播放rtsp流媒体解决方案

    老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧.    说这个之前,还是先说一下什么是rtsp协议吧. RTSP(Real Time Streaming ...

  5. 谷歌浏览器Chrome播放rtsp视频流解决方案

    找半天,HTML5的可以支持RTMP 但是无法播放RTSP,flash也止步于RTMP,最后同事推荐了个开源的好东东 VLC ,请教谷歌大神之后,这货果然可以用来让各浏览器(IE activex方式, ...

  6. [转] web无插件播放RTSP摄像机方案，拒绝插件，拥抱H5！

    需求 问题:有没有flash播放RTSP的播放器?H5能不能支持RTSP播放? 答案:没见过,以后估计也不会有: 问题:可以自己做浏览器插件播放RTSP吗? 答案:可以的,chrome做ppapi插件 ...

  7. 【FFmpeg】ffplay播放rtsp视频流花屏问题　（转）

    问题描述:ffplay播放rtsp视频流时,播放过程中随机出现花屏现象. 基本流程学习:阅读ffplay源码,熟悉其播放rtsp视频流的基本流程. 在ffplay源码阅读和分析的基础上,画出了其播放r ...

  8. VLC播放RTSP视频延迟问题 (转)

    原帖地址:http://blog.chinaunix.net/uid-26611383-id-3755283.html ======================================== ...

  9. web无插件播放RTSP摄像机方案，拒绝插件，拥抱H5！

    本文转自:http://www.cnblogs.com/babosa/p/7355468.html 需求 问题:有没有flash播放RTSP的播放器?H5能不能支持RTSP播放? 答案:没见过,以后估 ...

  10. Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理

    Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理 方案一:服务器端用 websocket 接受 rtsp ,然后,推送至客户端 实现步骤: 方案二:使用 ffmpeg + nginx 把 ...

随机推荐

  1. Android  JetPack~ ViewModel (一)   介绍与使用

      Android数据绑定技术一,企业级开发 Android数据绑定技术二,企业级开发 Android  JetPack~ DataBinding(数据绑定)(一)    集成与使用 Android ...

  2. SPA路由实现的基本原理

    1. SPA路由实现的基本原理 前端单页应用实现路由的策略有两种,分别是 基于hash 和 基于 History API 基于hash 通过将一个 URL path 用 # Hash 符号拆分.- 浏 ...

  3. 【RocketMQ】Dledger日志复制源码分析

    消息存储 在 [RocketMQ]消息的存储一文中提到,Broker收到消息后会调用CommitLog的asyncPutMessage方法写入消息,在DLedger模式下使用的是DLedgerComm ...

  4. OpenLayers多源数据加载

    一.实验内容 栅格瓦片数据加载: 矢量数据加载: 矢量瓦片数据加载. 二.实验步骤 2.1 加载已经封装的在线瓦片地图 <!DOCTYPE html> <html lang=&quo ...

  5. ASP.NET Core - 依赖注入(四)

    4. ASP.NET Core默认服务 之前讲了中间件,实际上一个中间件要正常进行工作,通常需要许多的服务配合进行,而中间件中的服务自然也是通过 Ioc 容器进行注册和注入的.前面也讲到,按照约定中间 ...

  6. Collection集合类（Java）

    Collection集合体系 1,Collection集合分为两大类List集合和Set集合 List系列集合特点: 有序,可重复,有索引 ArrayList:有序,可重复,有索引. LinkedLi ...

  7. Oracle & MSSql 数据库表映射方法（dblink or other）

    一.Oracle 1.在旧库创建公共链接 命名为 bidblink create public database link bidblink connect to c##v26_xxxx IDENTI ...

  8. 手机在线编程软件Anycodes

    下载地址:http://ys-f.ys168.com/608949803/V6gUhjk3V382275HM63/%E6%89%8B%E6%9C%BA%E7%BC%96%E7%A8%8B%E8%BD% ...

  9. Mysql数据库基础第七章：流程控制结构

    Mysql数据库基础系列 软件下载地址 提取码:7v7u 数据下载地址 提取码:e6p9 mysql数据库基础第一章:(一)数据库基本概念 mysql数据库基础第一章:(二)mysql环境搭建 mys ...

  10. 记一次 turbostat 的使用

    场景:为了测试海光cpu的性能,从而使用turbostat 来监测cpu工作时候的相关频率. cpu 型号: 1.Hygon C86 7165 24-core Processor 1.9GHz 384 ...