要使用这个库需要先安装

我使用了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. MongoDB和Elasticsearch的各使用场景对比

    MongoDB vs Elasticsearch MongoDB ElasticSearch 备注 定位 (文档型)数据库 (文档型)搜索引擎 一个管理数据,一个检索数据 资源占用 一般 高 mong ...

  2. 【必看】RuoYiVuek框架-数据源动态新增、配置如此简单！

    应用场景 系统用户只能访问系统配置的数据源(可动态新增修改的) RuoYi Vue 框架源码 点我跳转 实现方式 1.系统提供 Yml文件配置 + Druid加载数据源 + @DataSource注解 ...

  3. java-tocsv

    1.依赖 <dependencies> <dependency> <groupId>org.apache.poi</groupId> <artif ...

  4. CentOS7.6 添加系统自启脚本

    一.编辑脚本 1.在自定义的脚本中添加 # chkconfig: 235 20 80 # chkconfig: 2345 20 80 其中2345是默认启动级别,全部0-6共有7个级别. 0表示:表示 ...

  5. Eureka服务治理

    Eureka是由Netflix开发的一款服务治理开源框架,Spring-cloud对其进行了集成.Eureka既包含了服务端也包含了客户端,Eureka服务端是一个服务注册中心(Eureka Serv ...

  6. HC-SR501人体红外传感器使用说明

    1. 模块为全自动感应,当人进入其感应范围则输出高电平,人离开感应范围则自动延时关闭高电平,输出低电平. 2. 传感器有两种触发方式(可通过跳线进行选择):第一种不可重复触发方式,即感应输出高电平后, ...

  7. 面向对象程序设计第二次blog

    一.前言 第四次题目集总结-- 题量:较多 难度:较高 知识点: 获取输入字符串的特定字符类型 获取并储存.计算 循环.选择.字符串.数组的使用 继承 类的设计 总结:题目比较难,题量较少,需要用到正 ...

  8. shiyansi

    #include <stdio.h> #include <stdlib.h> #define N 1000 int fun(int n,int m,int bb[N]) { i ...

  9. golang 中使用mysql报错：“ scannable dest type slice with >1 columns (4) in result”

    query := fmt.Sprintf("SELECT .... infos = make([]*struct, 0, 10) err = s.db.GetContext(ctx, &am ...

  10. Clion在一个cmake项目中运行多个main函数

    # 遍历项目根目录下所有的 .cpp 文件 file (GLOB files *.cpp */*.cpp) foreach (file ${files}) string(REGEX REPLACE & ...