本文将介绍 RTSP H264/HEVC 裸流如何于网页前端播放。涉及 WebSocket 代理发送流数据, Wasm 前端解码等。

相关模块:

# RTSP WebSocket Proxy
RTSP/Webcam/File > FFmpeg open > Packets > WebSocket
# WS Wasm Player
WebSocket > Packets > Wasm FFmpeg decode to YUV > WebGL display
> Wasm OpenGL display
# WS Local Player
WebSocket > Packets > FFmpeg decode to YUV > OpenGL display
  • RTSP WebSocket Proxy: 流代理服务器(C++)。HTTP 请求流信息(支持了跨域),WebSocket 传输流数据。
  • WS Wasm Player: 前端播放实现(ES6)。WebSocket, Wasm, WebGL 等封装,提供了 WsClient 接口。
  • WS Local Player: 本地播放实现(C++)。与前端流程一样,向流代理服务器请求数据,解码后 OpenGL 显示。

前端效果:

后端流代理服务

主流程:

# RTSP WebSocket Proxy
RTSP/Webcam/File > FFmpeg open > Packets > WebSocket
  • FFmpeg 打开 RTSP/Webcam/File ,获取 packets (common/media/stream.cc)
  • FFmpeg bsf (bitstream filter) 获取 h264/hevc 裸流 packets (rtsp-ws-proxy/stream_handler.cc)
  • Boost.Beast 实现 WebSocket 服务,发送裸流 packets 给订阅的客户端 (rtsp-ws-proxy/ws_*)

前端 FFMpeg Wasm 解码,需要的两个结构体为:

  • AVCodecParameters: 编码参数。序列化为 JSON, HTTP Get 请求获取 (common/net/json.h)
  • AVPacket: 流数据包。序列化为 binary , WebSocket 进行传输 (common/net/packet.h)

服务支持了 HTTP 静态服务器,可直接部署 WS Wasm Player 页面。但前后端分离部署时,就要求服务允许跨域了 (common/net/cors.h)。

最终,可配置项有:

log:
# true: stderr, false: logfiles
logtostderr: true
alsologtostderr: false
colorlogtostderr: true
# LOG(), 0: INFO, 1: WARNING, 2: ERROR, 3: FATAL
minloglevel: 0
# VLOG(N)
v: 0
log_prefix: true
log_dir: "."
max_log_size: 8
stop_logging_if_full_disk: true server:
addr: "0.0.0.0"
port: 8080
threads: 3 http:
enable: true
doc_root: "../ws-wasm-player/" cors:
enabled: true
allowed_origins: "*"
allowed_methods: [ GET ]
allowed_headers:
- Content-Type
allowed_credentials: false
exposed_headers:
- Content-Type
debug: false stream:
http_target: "/streams"
ws_target_prefix: "/stream/" streams:
-
id: "a"
method: "file"
input_url: "../data/test.mp4"
-
id: "b"
method: "network"
input_url: "rtsp://127.0.0.1:8554/test" max_delay: 1000000
rtsp_transport: "tcp"
stimeout: 5000000
-
id: "c"
method: "webcam"
input_url: "/dev/video0" input_format: "v4l2"
width: 640
height: 480
framerate: 20
pixel_format: "yuyv422" # 25 = 1000 / 40 fps
stream_get_frequency: 25 # test only: multithreading glfw not coding stable now
stream_ui_enable: false

将想要代理的 RTSP 流配置进 streams,运行服务即可。

前端解码与播放

主流程:

# WS Wasm Player
WebSocket > Packets > Wasm FFmpeg decode to YUV > WebGL display
> Wasm OpenGL display
  • 前端页面填写服务地址,刷新并选择某流,再打开 (ws-wasm-player/index.html)
  • WebSocket 获取流数据,给到 Wasm FFmpeg 解码,再转码为 YUV420p (ws-wasm-player/src/decoder.h)
  • WebGL 显示 YUV420p ,或给到 Wasm OpenGL 进行显示 (ws-wasm-player/src/player.h)

简单实测:

  • H264 1920x1080 25fps, 前端解码转码耗时 80~120 ms,来不及处理,引起卡顿
  • H264 1280x720 25fps, 前端解码转码耗时 10~30 ms,能够及时处理及显示

所以于高分辨率的场景,考虑 MediaSource, WebCodecs 等硬解更好。

此外 RTSP 建议用 TCP 。UDP 时,后端服务报丢包警告,前端解码则报 P 帧警告,容易花屏、OOM。

结语

除了 RTSP 流,也支持了 WebCam/File ,所以可以直播 WebCam 摄像头或轮播某 MP4 文件。

目前想实际体验的话,需要依照代码 README 自己编译。以后可能会打包发布,能够快速体验。

GoCoding 个人实践的经验分享,可关注公众号!

RTSP H264/HEVC 流 Wasm 播放的更多相关文章

  1. cuda+ffmpeg+opengl解码rtsp h264码流多路

    Cuda 解码 全尺寸 解码 .全尺寸窗口绘制测试( 分别 测试 视频 文件和 IP 相机 实时视频 ) 1080 p 视屏 文件 全尺寸 解码 全尺寸 显示 72 0p IP 相机 全尺寸 解码 全 ...

  2. ffmpeg学习(二) 通过rtsp获取H264裸流并保存到mp4文件

    本篇将使用上节http://www.cnblogs.com/wenjingu/p/3977015.html中编译好的库文件通过rtsp获取网络上的h264裸流并保存到mp4文件中. 1.VS2010建 ...

  3. 利用FFmpeg 将 rtsp 获取H264裸流并保存到文件中

    既然已经可以通过 RTSP 获取h264 裸流了.那么通过 FFmpeg 将其保存到文件中怎么做呢? 一.首先RTSP获取 h264 裸流 我们上面两篇文章主要讲的是通过 rtsp://Your ip ...

  4. H264码流解析及NALU

    ffmpeg 从mp4上提取H264的nalu http://blog.csdn.net/gavinr/article/details/7183499 639     /* bitstream fil ...

  5. javaCV开发详解之8:转封装在rtsp转rtmp流中的应用(无须转码,更低的资源消耗)

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  6. 实现输出h264直播流的rtmp服务器 flash直播服务器【转】

    实现输出h264直播流的rtmp服务器 RTMP(Real Time Messaging Protocol)是常见的流媒体协议,用来传输音视频数据,结合flash,广泛用于直播.点播.聊天等应用,以及 ...

  7. H264码流打包分析(精华)

    H264码流打包分析 SODB 数据比特串-->最原始的编码数据 RBSP 原始字节序列载荷-->在SODB的后面填加了结尾比特(RBSP trailing bits 一个bit“1”)若 ...

  8. 实现输出h264直播流的rtmp服务器 flash直播服务器

    http://www.cnblogs.com/haibindev/archive/2012/04/16/2450989.html 实现输出h264直播流的rtmp服务器 RTMP(Real Time ...

  9. (转)MP4文件两种格式AVC1和H264的区别及利用FFMPEG demux为h264码流事项

    出自:http://www.mworkbox.com/wp/work/314.html 2013-05-04 MP4的视频H264封装有2种格式:h264和avc1,对于这个细节,很容易被忽略.笔者也 ...

随机推荐

  1. Spring in Action学习笔记(1)

    Spring基础 IoC 控制反转, 也称为DI-依赖注入 一.装配bean 推荐顺序:自动装配 -> JavaConfig装配 -> XML装配 1. 自动装配 @Component 注 ...

  2. 月薪20k+的Android面试都问些什么?(含答案)

    金九银十跳槽季接近尾声了,可是今年由于疫情的影响仍然不太好找工作,相信大家肯定急需一套Android面试宝典,下面就分享给大家我珍藏已久的Android高阶面试宝典,供大家学习 ! 1.自定义Hand ...

  3. tomcat启动时启动窗口出现乱码一招搞定

    先来看看问题(图示),在tomcat的启动窗口打印的启动信息中包含了大量的中文乱码,虽然这些对tomcat本身的使用没有任何影响,但却非常碍眼,影响视觉效果! tomcat启动时启动窗口出现乱码的解决 ...

  4. markdown的摘要测试

    123456789 1 123456789 2 123456789 3 123456789 4 123456789 5 123456789 6 粗体 123456 划线 123456 斜体 12345 ...

  5. 百度地图API开发的快速使用和大量坐标点操作【点聚合,海量点,mapv】

    快速上手 注意:本篇文章代码是基于 百度地图 JavaScript API v3.0 的条件下编写,GL版本可能稍有变化. 地图嘛,很重要的一部分就是坐标经纬度了: 经度: 英文 longitude ...

  6. CircuitBreaker断路器Fallback如何获取异常

    在Spring Cloud 2020新版里, 可以使用新版的 CircuitBreaker 断路器, 可以配置Fallback, 可以是内部的, 也可以是外部的Fallback. 内部 Fallbac ...

  7. Vue系列-03-vue-cli自动化工具

    使用Vue-CLI创建项目 安装vue-cli脚手架 Mac安装vue-cli脚手架 lichengguo@lichengguodeMacBook-Pro ~ % sudo npm install - ...

  8. 轻松上手SpringBoot+SpringSecurity+JWT实RESTfulAPI权限控制实战

    前言 我们知道在项目开发中,后台开发权限认证是非常重要的,springboot 中常用熟悉的权限认证框架有,shiro,还有就是springboot 全家桶的 security当然他们各有各的好处,但 ...

  9. centos上安装zookeeper

    下载zookeeper # 创建zookeeper文件夹 cd /usr/local/ mkdir zookeeper cd zookeeper # 下载 解压 wget https://mirror ...

  10. SpringBoot-AOP记录操作日志

    package com.meeno.inner.oa.extend.operaterecord.aop; import com.alibaba.fastjson.JSONArray; import c ...