要使用这个库需要先安装

我使用了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. Linux服务器数据备份恢复

    转载csdn: https://blog.csdn.net/weixin_33794672/article/details/92894022

  2. CF837G - Functions On The Segments

    我们考虑 \(\sum_{i=l}^r{f_i(x)}\) 是个什么东西.首先这个奇怪的东西很好离线做,所以尽管题目要求强制在线,我们还是离线下来试试. 我们发现,我们可以 \(x\) 坐标从 \(1 ...

  3. Linux安装PHP8 新版笔记

    PHP部分 官网下载地址:https://www.php.net/downloads.php 我下载的是此时的最新稳定版8.2.3 cd /usr/localwget https://www.php. ...

  4. 关于cnpm的卸载与重装

    1.卸载原有旧的版本: npm uninstall -g cnpm --registry=https://registry.npm.taobao.org 2.注册模块镜像: npm set regis ...

  5. Vue 插件介绍

    功能:用于增强Vue 本质:包含install方法的一个对象,install的第一个参数是Vue,第2个以后的参数是插件使用者传递的数据. 1.定义插件: 对象.install = function( ...

  6. mysql查询重复的数据

    ---查询重复的数据 . UUID可以换成其他的需要去重的字段. 点击查看代码 select * FROM t_gzmx_reptile_receive_incre WHERE id NOT IN ( ...

  7. SAP 文档必须包含正确的根元素

    --------------------------- LoadXML Malformed XML Error --------------------------- 文档必须包含正确的根元素. -- ...

  8. 修复gitlab权限(docker方式搭建)

    docker exec -it gitlab update-permissions docker restart gitlab

  9. Visual Studio 2022 不支持 .NET Framework 老版本 项目解决办法

    Visual Studio 2022 不支持 .NET Framework老版本 (4.5) 项目解决办法 新电脑安装的是Visual Studio 2022,打开老项目的时候发现没有.net fra ...

  10. C#辗转相除法输出最大公约数

    void main() { int r, m, n, t; scanf_s("%d\n%d", &m, &n); if (m < n) { t = m; m ...