要使用这个库需要先安装

我使用了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. Stable Diffusion魔法入门

    写在前面 本文为资料整合,没有原创内容,方便自己查找和学习, 花费了一晚上把sd安装好,又花了大半天了解sd周边的知识,终于体会到为啥这些生成式AI被称为魔法了,魔法使用前要吟唱类比到AI上不就是那些 ...

  2. 2020.11.30【NOIP提高A组】模拟

    总结与反思 很不幸,估分 \(170\),可惜 \(T2\) 暴力 \(50pts\) 全掉了 \(T1\) 结论题,如果想到了,\(O(n)\) 过,只有十几行代码 感觉不好想,不过还是 \(A\) ...

  3. Docker安装部署Mysql8（以作数据持久化）

    1.创建容器并进行持久化处理 #拉取镜像 docker pull mysql:8.0.20 #启动镜像,用于拷贝配置文件到宿主机 docker run -p 3306:3306 --name mysq ...

  4. python中的字符串的常用方法介绍

    a = "alxe Li 金角大王"     #创建一个字符串来演示方法的功能结果.一下都使用这个字符串演示. 首先要了解的常识性的知识点是:字符串是不可变的序列.所有对字符串的内 ...

  5. vue中引入静态图片

    vue+webpack中,可以使用require imageList: [ { url: require('../image/pig.png') } ] vue+vite没有require方法 // ...

  6. 关于Intent Uri页面跳转

    android browser支持支持Intent Scheme URL语法的可以在wrap页面加载或点击时,通过特定的intent uri链接可以打开对应app页面,例如 <a href=&q ...

  7. cmake:macro,function中ARGV,ARGN参数的区别

    cmake中的宏(macro)和函数(function)都支持动态参数 变量ARGC记录传入的参数个数 变量ARGV0,ARGV1,...顺序代表传入的参数 变量ARGV则是一个包含所有传入参数的li ...

  8. 有关谷歌下载PDF文件而不是直接打开预览的问题

    找了很多帖子,都不行, 解决方法把链接处理成blob文件再调用下载. 但是仍然不行,最终原因找到: 缺少了这一部创建,需要把二进制数据重新用 Blob对象申明下 let data = new Blob ...

  9. SAP BW/4HANA 听课笔记

    BW/4HANA听课笔记 1.本地SQL,BW/4HANA对象和HANA VIEW互相访问: 2.高级分析功能数据分析预测: 3.InfoOjbect:Characteristics(维度),Key ...

  10. xxx.app 已损坏，无法打开，你应该将它移到废纸篓/打不开 xxx，因为它来自身份不明的开发者解决方法

    xxx已损坏,无法打开,你应该将它移到废纸篓解决办法 打不开 xxx,因为它来自身份不明的开发者 打不开xxxx,因为 Apple 无法检查其是否包含恶意软件 在安装的时候提示加载失败! 解决: 打开 ...