web 直播推流思路

2023-09-14 09:54:12 +08:00
 yocoso

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

3224 次点击
所在节点    React
14 条回复
Masoud2023
2023-09-14 10:02:12 +08:00
webrtc?
YYYMagic
2023-09-14 10:07:30 +08:00
前端采集麦克风声音和摄像头画面,编码之后通过 RTMP 协议建立长连接,将音视频数据实时传输给服务器
服务器可以自己搭建,也可以用云厂商的直播 CDN 服务
服务端会做把直播流切成小文件,拉流客户端用 HLS 协议拉流;或者服务端转封装 FLV ,拉流客户端通过 HTTP 长连接拉流
NessajCN
2023-09-14 10:16:55 +08:00
前端用 navigator.mediaDevices.getUserMedia() 采集好了推给 mediamtx

https://github.com/bluenviron/mediamtx/blob/main/internal/core/webrtc_publish_index.html
56rhcrivs55TVKdX
2023-09-14 10:19:25 +08:00
webrtc, 好几个直播平台早就支持网页推流了
israinbow
2023-09-14 11:05:45 +08:00
同楼上用 webrtc, 可以参考 livekit.io
darkengine
2023-09-14 11:08:28 +08:00
不考虑第三方的推拉流服务? 这整套从 0 开始工作量太大了
mightybruce
2023-09-14 11:25:35 +08:00
这个项目还是建议用靠谱的音视频厂家服务,你自己做不现实,没有 CDN, 也不懂音视频编码(最起码 ffmpeg 编程要会),况且你还是个做前端的。
推荐直接购买阿里云,腾讯云的直播或点播云服务
或者从声网买专门的音视频服务
RTMP flv 现在已经属于落后的技术, 了解一下 HLS 配合 FMP4 (flv 压缩率太低)
DASH 协议吧
不推荐 webrtc, 这个技术虽然先进,但是对你编程要求很高, 谷歌对这个客户端更新慢得很,你还要自己搞定信令服务器
webrtc 更好的用途是视频会议 和通话 的双向通信。
xiuxian
2023-09-14 11:31:32 +08:00
webrtc 你值得拥有。说 rtmp 的都不靠谱,你浏览器怎么连 tcp socket ? flash 插件早就被禁用了。
suke119
2023-09-14 11:41:46 +08:00
webrtc 直接推流到 SRS 或者 ZLM ,SRS 部署一键 docker 直接运行,前端代码就十几行搞定
flyqie
2023-09-14 17:52:00 +08:00
webrtc 是你需求最优的方案。

上面发 rtmp 的。。确定干过 web ? web 能连 rtmp ??
flyqie
2023-09-14 17:54:28 +08:00
@mightybruce #7

webrtc 技术门槛不高,楼主这个 web 端推流需求只能 webrtc 做,你给个其他的靠谱方案看看?
chnwillliu
2023-09-15 05:06:08 +08:00
狭义地讲,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
2023-09-15 07:41:09 +08:00
这些人各个装着对 webrtc 很了解,估计都是些前端。
“WebRTC 是通信的能力,从技术上看是两个或多个客户端,让用户具备互动的能力。 人对于延迟的感知是 400ms ,也就是一般的对话能顺利进行,这是 RTC 的核心指标。 由于端和端之间有关联,导致系统复杂度比直播高了多个数量级,这是很多问题的根源。"( https://ossrs.net/lts/zh-cn/docs/v4/doc/webrtc
web 又不是直接连 rtmp, 那个方案没有大问题,
rtmp 转 HLS ,HLS 就是 http 的。
mightybruce
2023-09-15 07:50:46 +08:00
另外 webrtc 中每个节点是对等的,直播不需要对等的,也不需要信令服务器 和 NAT 打洞。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/973625

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX