要使用这个库需要先安装

我使用了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. 三分钟实战手写Spring Boot Starter

    1 背景 在平时的开发中,开发的同学会把一些通用的方法,写成一个工具类,例如日期转换的,JSON转换的等等,方便业务后续调用,使代码更容易维护. 如果一些更常用的方法,例如鉴权的,加解密的等等,几乎每 ...

  2. 代码随想录算法训练营day13

    基础知识 二叉树基础知识 二叉树多考察完全二叉树.满二叉树,可以分为链式存储和数组存储,父子兄弟访问方式也有所不同,遍历也分为了前中后序遍历和层次遍历 Java定义 public class Tree ...

  3. .Net Core IIS部署以及问题总结

    IIS部署 1.程序内和.NET之前一样发布就行 2.文件考到服务器,正常部署 重点:①程序池选择无托管代码.②模块中看是否有安装这两个模块,没有的话去微软官网下载 下载地址:两个都要装 1.http ...

  4. 使用flex布局（多行，一行三个），换行后最后一行左右对齐问题

    <html> <head> <style> html, body, ul { margin: 0; padding: 0; } ul { width: 100%; ...

  5. 04#Web 实战：Gitee 贡献图

    前言 这次要做的 Web 前端实战是一个 Gitee 个人主页下的贡献图(在线 Demo),偶尔做一两个,熟悉熟悉 JS 以及 jQ.整体来说这个案例并不难,主要是控制第一个节点以及最后一个节点处于星 ...

  6. PostgreSQL性能优化综合案例 - 1

    [测试模型] 设计一个包含INSERT, UPDATE, SELECT语句的业务模型用于本优化案例. [测试表] create table user_info (userid int, engname ...

  7. 第三周作业-N67044-张铭扬

    1. 图文并茂说明raid0,raid1, raid10, raid01, raid5等原理. "RAID"是指独立硬盘冗余阵列(RAID, Redundant Array of ...

  8. RIDE，如何指定report，log，output的存放位置

    创建测试用例,执行后,report.html,log.html,output.txt 会默认存放到 C:\Users\你的用户名\AppData\Local\Temp下, 例如我的存放在 如果要指定存 ...

  9. goland 无法跳转 struct等

    goland 提示: Cannot find declaration to go to 表现为:无法跳转,标红 但实际上对应文件是存在该struct或var 解决办法: ref:https://sta ...

  10. replace 常用积累

    1.替换有,或者.为: obj.keyword.replace(/,|./g,';') 2.替换元素标签类似于<em>文字</em>这种 let name=item.name. ...