RTSP H264/HEVC 流 Wasm 播放

GoCoding
• 阅读 1680

本文将介绍 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 H264/HEVC 流 Wasm 播放

后端流代理服务

主流程:

# 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 个人实践的经验分享,可关注公众号!

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
GoCoding GoCoding
3年前
FFmpeg 播放 RTSP/Webcam 流
本文将介绍FFmpeg如何播放RTSP/Webcam/File流。流程如下:bashRTSP/Webcam/FileFFmpegopenanddecodetoBGR/YUVOpenCV/OpenGLdisplay代码:https://github.com/ikuokuo/rtspwasmplayer,子模块rtsploca
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
GoCoding
GoCoding
Lv1
Go coding in my way :)
文章
32
粉丝
5
获赞
10