本文将介绍 RTSP H264/HEVC 裸流如何于网页前端播放。波及 WebSocket 代理发送流数据,Wasm 前端解码等。
- 代码: https://github.com/ikuokuo/rt…
相干模块:
# 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 1920×1080 25fps, 前端解码转码耗时 80~120 ms,来不及解决,引起卡顿
- H264 1280×720 25fps, 前端解码转码耗时 10~30 ms,可能及时处理及显示
所以于高分辨率的场景,思考 MediaSource, WebCodecs 等硬解更好。
此外 RTSP 倡议用 TCP。UDP 时,后端服务报丢包正告,前端解码则报 P 帧正告,容易花屏、OOM。
结语
除了 RTSP 流,也反对了 WebCam/File,所以能够直播 WebCam 摄像头或轮播某 MP4 文件。
目前想理论体验的话,须要按照代码 README 本人编译。当前可能会打包公布,可能疾速体验。
GoCoding 集体实际的教训分享,可关注公众号!