Web下无插件播放rtsp视频流的方案总结

折腾了一下午,稍微搞明白了几种可行的方案,罗列如下:

方案一:服务器端用 websocket 接受 rtsp ,然后,推送至客户端

此方案,客户端因为直接转成了mp4,所以H5的video标签直接可以显示。

参考地址:https://github.com/Streamedian/html5_rtsp_player

方案二:主流浏览器不再支持 ActiveX插件,改用 NPAPI 或者 PPAPI 来开发浏览器播放插件,这种方案,NPAPI 由于安全问题,已经不被Chrome支持了,PPAPI 是可行,但涉及到C++编程,难度稍大。

方案三:此方案应该是最主流的。

用 ffmpeg 把 rtsp 转成 rtmp 通过 nginx代理出去,其中核心处用到了 nginx 的 nginx-rtmp-module 模块,在客户端则使用著名的网页播放器 jwplayer 来播放 rtmp 流即可,但是 jwplayer 播放器好像是付费的,此方案也是搭建流媒体服务器的通用方案之一。

方案四:与方案三类似,只是这里使用 ffmpeg + nginx 把 rtsp 转成了 hls 协议,客户端使用 videojs 播放

参考地址:https://videojs.com/getting-started/ 

方案五:使用 WebRTC,WebRTC 是支持网页浏览器进行实时音视频的一套API,例如:HTML5 通过 webRTC 直接调用摄像头,但是如果要实现远程视频流的显示,则需要将 RTSP 转换为 WebRTC 流,供 web 端显示

参考地址:https://github.com/lulop-k/kurento-rtsp2webrtc

方案六:此方案比较高大上,但是性能与 Native 比还有明显差距。视频数据用 websocket 传到前端,在前端进行软解码,解码器是通过 Emscripten 把C语言的解码库编译成 .js 或者 .wasm 给前端调用,解码后的 YUV 数据转换为 RGB 推到 HTML5 的 Canvas 播放。

参考地址:http://taobaofed.org/blog/2019/03/18/web-player-h265/

  • 18
    点赞
  • 162
    收藏
    觉得还不错? 一键收藏
  • 37
    评论
要在Java后台中获取RTSP视频流,可以使用JavaCV这个开源库。它提供了一个名为FFmpeg的Java接口,可以让你直接在Java中使用FFmpeg的功能。 以下是获取RTSP视频流的示例代码: ```java import org.bytedeco.javacv.*; import javax.swing.*; public class RTSPTest { public static void main(String[] args) throws Exception { String rtspUrl = "rtsp://example.com/stream.mp4"; // RTSP流地址 FFmpegFrameGrabber grabber = new FFmpegFrameGrabber(rtspUrl); grabber.start(); CanvasFrame canvas = new CanvasFrame("RTSP Stream"); // 创建一个窗口用于显示视频流 canvas.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); while (true) { Frame frame = grabber.grab(); if (frame == null) { break; } canvas.showImage(frame); } grabber.stop(); canvas.dispose(); } } ``` 这个代码片段使用JavaCV的FFmpegFrameGrabber类从RTSP地址获取视频流,并将每一帧显示到一个Swing窗口上。 如果你想在浏览器中无插件播放RTSP视频流,可以使用WebRTC技术。WebRTC是一种基于Web的实时通信技术,它可以让你在浏览器中直接播放RTSP视频流,而不需要使用任何插件。 以下是使用WebRTC播放RTSP视频流的示例代码: ```html <!DOCTYPE html> <html> <head> <title>RTSP Stream</title> </head> <body> <video id="video" autoplay></video> <script> const video = document.getElementById('video'); const stream = new MediaStream(); // RTSP地址 const rtspUrl = 'rtsp://example.com/stream.mp4'; // 创建RTSP客户端 const client = new rtsp.RTSPClient(); client.connect(rtspUrl); client.onMedia = ({ track, type }) => { // 将RTSP流添加到MediaStream中 stream.addTrack(track); // 如果是视频流,则将其绑定到video元素 if (type === 'video') { video.srcObject = stream; } }; client.start(); </script> </body> </html> ``` 这个代码片段使用了一个名为rtsp.js的开源库来实现WebRTC播放RTSP流。它创建了一个RTSP客户端,并将获取到的视频流添加到一个MediaStream中,最终将视频流绑定到一个video元素上,从而在浏览器中无插件播放RTSP视频流

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 37
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值