web 直播推流思路

[yocoso]

最近做一个基于 react 的直播类型项目， 已经完成了拉流部分，本地使用 node media server 推流，再在前端用 react-flv-player 加载直播流地址播放就行。 现在要实现前端采集音频数据并推流的功能，不知道是该如何完成？ 应该是要前端启动麦克风进行录音，并将采集到的实时片段数据传给后端的收流服务器吧， 但是如何进行录音的切割？ 怎样传输给后端？应该和普通的文件上传很不一样吧？ 请教大家！

[Masoud2023]

webrtc?

[YYYMagic]

前端采集麦克风声音和摄像头画面，编码之后通过 RTMP 协议建立长连接，将音视频数据实时传输给服务器
服务器可以自己搭建，也可以用云厂商的直播 CDN 服务
服务端会做把直播流切成小文件，拉流客户端用 HLS 协议拉流；或者服务端转封装 FLV ，拉流客户端通过 HTTP 长连接拉流

[NessajCN]

前端用 navigator.mediaDevices.getUserMedia() 采集好了推给 mediamtx

https://github.com/bluenviron/mediamtx/blob/main/internal/core/webrtc_publish_index.html

[jfv]

webrtc, 好几个直播平台早就支持网页推流了

[israinbow]

同楼上用 webrtc, 可以参考 livekit.io

[darkengine]

不考虑第三方的推拉流服务? 这整套从 0 开始工作量太大了

[mightybruce]

这个项目还是建议用靠谱的音视频厂家服务，你自己做不现实，没有 CDN, 也不懂音视频编码（最起码 ffmpeg 编程要会），况且你还是个做前端的。
推荐直接购买阿里云，腾讯云的直播或点播云服务
或者从声网买专门的音视频服务
RTMP flv 现在已经属于落后的技术， 了解一下 HLS 配合 FMP4 (flv 压缩率太低）
DASH 协议吧
不推荐 webrtc, 这个技术虽然先进，但是对你编程要求很高， 谷歌对这个客户端更新慢得很，你还要自己搞定信令服务器
webrtc 更好的用途是视频会议 和通话 的双向通信。

[xiuxian]

webrtc 你值得拥有。说 rtmp 的都不靠谱，你浏览器怎么连 tcp socket ？ flash 插件早就被禁用了。

[suke119]

webrtc 直接推流到 SRS 或者 ZLM ，SRS 部署一键 docker 直接运行，前端代码就十几行搞定

[flyqie]

webrtc 是你需求最优的方案。

上面发 rtmp 的。。确定干过 web ？ web 能连 rtmp ？？

[flyqie]

@mightybruce #7

webrtc 技术门槛不高，楼主这个 web 端推流需求只能 webrtc 做，你给个其他的靠谱方案看看？

[chnwillliu]

狭义地讲，Media Capture and Streams API 是独立于 WebRTC 的，往往 WebRTC 都会用到 getUserMedia 。

其实要获取媒体流话，用得到 Media Capture 的 getUserMedia API ，编解码方面可以用 WebCodecs API ，不一定要用 WebRTC 传数据，WebRTC 的核心是多端双向通信，略复杂。

做推流，有个比较新的东西是 WebSocket 的升级版， 叫 WebTransport , 基于 HTTP3 的，JS 侧的 API 都是基于 Stream 的，可以进行可靠传输和类似 UDP 一样的不可靠传输。API 还比较新，不一定能在生产环境用。

这里有一个用 getUserMedia + WebCodecs+ WebTransport 做的 video echo 的 demo

https://webrtc.internaut.com/wc/wtSender4/

[mightybruce]

这些人各个装着对 webrtc 很了解，估计都是些前端。
“WebRTC 是通信的能力，从技术上看是两个或多个客户端，让用户具备互动的能力。 人对于延迟的感知是 400ms ，也就是一般的对话能顺利进行，这是 RTC 的核心指标。 由于端和端之间有关联，导致系统复杂度比直播高了多个数量级，这是很多问题的根源。"（ https://ossrs.net/lts/zh-cn/docs/v4/doc/webrtc ）
web 又不是直接连 rtmp, 那个方案没有大问题，
rtmp 转 HLS ，HLS 就是 http 的。

[mightybruce]

另外 webrtc 中每个节点是对等的，直播不需要对等的，也不需要信令服务器 和 NAT 打洞。