Vue3+Node中使用webrtc推流至mediamtx

前言

项目的 Web 端是 Vue3 框架，后端是 GO 框架。需要实现将客户端的本地摄像头媒体流推送至服务端，而我自己从未有媒体流相关经验，最初 leader 让我尝试通过 RTSP 协议推拉流，我的思路就局限在了 RTSP 方向。

最初使用的服务端流媒体处理服务器是RTSPToWeb

GitHub - deepch/RTSPtoWeb：RTSP 流到 WebBrowser

RTSPtoWeb 可以将RTSP 流转换为可在 Web 浏览器中使用的格式，如 MSE（媒体源扩展）、WebRTC 或 HLS。

我打算在 Web 端将本地摄像头数据流以RTSP协议发送至服务端，通过RTSPtoWeb处理为Web可以使用的格式。客户端的推流软件我选择FFmpeg，我找到了可以在Vue中使用FFmpeg的方法：

FFmpeg——在Vue项目中使用FFmpeg（安装、配置、使用、SharedArrayBuffer、跨域隔离、避坑…）_vue ffmpeg-CSDN博客

在浏览器中我们是无法直接使用 FFmpeg 软件的，但好在有个东西叫FFmpeg.wasm，它可以让 FFmpeg 的功能在浏览器中使用。我们在 Vue 项目中使用 FFmpeg.wasm来代替手动输入命令行操作的 FFmpeg 软件。FFmpeg.wasm 是 FFmpeg 的纯 WebAssembly 接口，可以在浏览器内录制音频和视频，并进行转换和流式传输。但后面实际操作我发现，现在FFmpeg.wasm在0.12.0版本之后不再支持 NodeJS

FAQ | ffmpeg.wasm (ffmpegwasm.netlify.app)

但使用 FFmpeg.wasm 旧版本时我遇到好多报错。。。我第一次写前端能力属实不足，最后选择放弃了这条思路。。。有能力或者使用的不是 NodeJS 的小伙伴可以用 FFmpeg.wasm 在 Web 推流，很方便好用。

后面我又有一个歪点子，用 GO 编写从命令行端操作 FFmpeg 推拉流 API ，再打包为 exe 可执行文件，运行在客户端。但在小组开会后，这个方案被毙了。。。因为没有考虑客户需求，首先客户在 PC 端访问我们的 Web ，不仅需要下载 FFmpeg ，现在还得多下载一个 exe 文件；其次是考虑客户要在移动端使用。第一次实习，第一次做客户项目，考虑的没有很全面。

后面我发现为什么不直接用WebRTC呢？这可是专门用来解决Web媒体流的好东西！！！

于是我更改了方案，将mediamtx作为新的服务器，

GitHub - bluenviron/mediamtx: Ready-to-use SRT / WebRTC / RTSP / RTMP / LL-HLS media server and media proxy that allows to read, publish, proxy, record and playback video and audio streams.

mediamtx支持多种协议，可以解决很多需求，强推！！！

WebRTC简介

搞懂WebRTC ，看这一篇就够了-CSDN博客

WebRTC提供了基础的前端功能实现，仅仅通过JavaScript，Web端即可实现点对点的视频流、音频流或者其他数据的传输，所用到的知识点如下：

WHIP /WHEP 协议

WTN普及（一）WHIP/WHEP标准信令 - 知乎 (zhihu.com)

WebRTC（WebRTC-HTTP Ingestion Protocol）通过 WHIP 协议将音视频流从客户端传输到服务器。WHEP（WebRTC-HTTPEgressProtocol）允许基于浏览器的流媒体内容的低延迟观看。

WHIP /WHEP 不仅仅可以用作流媒体的传输。在未建立 WebRTC 之前，通讯双方需要商议彼此的媒体协议，也可能无法访问彼此的 IP，故我们需要信令服务器传递双方的 SDP 和 candidates 信息，而俩个协议在 WebRTC 之上增加了一个简单的信令层解决了这个问题，我们可以通过 WebStock 或者 http 向信令层发送信息。

SDP 协议

WebRTC通话原理（SDP、STUN、 TURN、 信令