rtsp流-视频播放

操作系统：Win10
vue版本：vue2

一. 方法

必须将rtsp通过播放器插件/服务器/… 转换为 flv/webrtc/…
最新在线可用rtsp码流地址（可用flv播放器测试）：rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4
rtmp地址
rtmp://ns8.indexforce.com/home/mystream
https地址：
MP4： https://baikevideo.cdn.bcebos.com/media/mda-OgKIAVGwqTr85ead/6010f8507988556ac6e536ffb7f74031.mp4
m3u8：https://1500005692.vod2.myqcloud.com/43843706vodtranscq1500005692/62656d94387702300542496289/v.f100240.m3u8
http地址
mp4：http://1308239071.vod2.myqcloud.com/19d9adbcvodbj1308239071/d550d3ea243791577158966399/f0.mp4

二. 调研播放器

腾讯云TCPlayer
（1）支持：WebRTC、FLV、HLS的直播流地址，以及HLS、FLV、MP4等格式的点播播放地址
（2）不支持：RTSP、RTMP流地址
（3）demo：https://tcplayer.vcube.tencent.com/
（4）步骤：https://cloud.tencent.com/document/product/881/30818，如下通过npm
flv.js + video.js
（1）原理：RTSP转FLV
（2）支持：FLV格式的点播播放地址
（3）不支持：非FLV格式的地址
（4）步骤：参考链接，点我跳转
vue-video-player+video.js：只支持flash插件的浏览器
海康威视：需要申请accessKey、ip、port等，有专门的管理平台（太麻烦，没有研究，简单了解了下）。支持rtsp流。
（1）下载WEB端视频播放插件：https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10

（2）可执行文件

（3）使用说明

三. 最终确定播放器

webrtc
（1）原理：利用webbrct将rtsp转为WebRTC流播放
（2）支持：仅rtsp流地址
（3）下载链接：https://github.com/mpromonet/webrtc-streamer/releases
（4）步骤：
① 下载：根据所需下载 Linux或Windows 安装包

② 以Windows为例，双击webrtc-streamer.exe

③ 打开窗口

④ vue中使用
打开解压的文件夹，找到webrtcsteamer.js。将其复制到vue项目中static下即可（自定义路径）

新建vue文件，如下代码可直接使用

<template><div class="home"><video:id="currentPlayer":style="{width: canvasWidth + 'px',height: canvasHeight + 'px',margin: margin}"autoplaycontrols></video></div>
</template><script>
import "../../../../static/js/webrtcstreamer";
export default {data() {return {webRtcServer: null,currentPlayer:'video',canvasWidth:900,canvasHeight:900,margin:2% auto};},mounted() {// webrtc-streamer：启动的服务器IP，8000是默认端口号，可在服务端启动时更改this.webRtcServer = new WebRtcStreamer(this.currentPlayer,location.protocol + "//127.0.0.1:8000");//需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用this.webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4");},beforeDestroy() {this.webRtcServer.disconnect();this.webRtcServer = null;}
};
</script>

⑤ 播放rtsp流结果如下

四. 未调研

Nginx+ffmpeg+nginx-http-flv-module
Streamedian
（1）参考链接：点我跳转

五. 参考链接

node + ffmpeg + websocket + flv.js： https://www.qiyuandi.com/zhanzhang/zonghe/9520.html
几种视频流播放方法分析：点我跳转
video + webrtc：http://www.kuazhi.com/post/321222.html

【rtsp流在Web端实时播放】使用 VUE + webrtc-steamer相关推荐

网络摄像头RTSP视频流WEB端实时播放实现方案
IPC视频流怎么实时在WEB浏览器播放,视频流格式是RTSP. 下面我整理了自己实现的方案以及网上看到的一些方案一.FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览 ...
采集rtsp流摄像头到浏览器实时播放方案
本文旨在实现使用摄像头采集视频,并且可以在网页实时显示,主要参考的两篇博文为: 1. 视频实时显示的三种方案 2. 使用WebSockets进行HTML5视频直播我们使用博文1介绍的第 ...
如何在VUE框架的WEB端实时播放海康威视、大华RTSP视频流？
背景如果你问一个前端技术人员,近几年最火的前端框架技术是什么,肯定会有人说VUE,确实VUE凭借其简单特性赢得了大家的喜爱,而近期公司有个项目,需要在VUE框架网页上播放RTSP实时视频. 小编对目 ...
大华摄像头实现web端实时播放以及录像回放
文章目录前言一.在乐橙云平台上注册账号并添加设备创建应用二.利用云平台的api获取到前端展示需要的相关信息三.前端页面展示内容总结前言前段时间对接了大华摄像头,在此做一次总结,总体思路是 ...
Web端直接播放 .ts 视频及mux.js播放ts视频没有声音
最近项目中需要前端播放 .ts 格式视频,捣鼓了几天学习到很多知识,也发掘了一种优秀的解决方案,分享给有同样需求的同学. 常见方案在网上查找的大部分解决方案都是用诸如videojs等网页播放器,接收 ...
rtsp推流综合解决方案：一键将本地视频文件推起rtsp流，web界面方便管理视频
rtsp推流综合解决方案:一键将本地视频文件推起rtsp流,web界面方便管理视频演示环境 system: ubuntu16.04.12 docker version:20.10.7 cpu:12核 ...
即时通讯开发之网页端实时音视频技术WebRTC
WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音通话或视频聊天的技术,是谷歌2010年以6820万美元收购Globa ...
如何实现监控视频RTSP流在网页中低延时播放
1.行业痛点随着平安城市.平安社区.雪亮工程等应用在全国范围的开展,安防视频监控系统得到了大面积使用. 传统的安防应用场景中,监控终端和平台管理端都通过C/S模式实现监控画面的实时查看,电脑端有相应 ...
ffmpeg 找不到bin_FFmpeg开发笔记（九）：ffmpeg解码rtsp流并使用SDL同步播放
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/109603499 各位读者,知识无穷而人力有穷 ...

【rtsp流在Web端实时播放】使用 VUE + webrtc-steamer

rtsp流-视频播放

一. 方法

二. 调研播放器

三. 最终确定播放器

四. 未调研

五. 参考链接

【rtsp流在Web端实时播放】使用 VUE + webrtc-steamer相关推荐

最新文章

热门文章