【WebRTC】开源项目Webrtc-streamer介绍

WebRTC-Streamer

这是一个用于通过简单的信令机制（参见 api）流式传输 WebRTC 媒体源的实验项目，支持以下媒体源：

捕获设备
屏幕捕获
mkv 文件
RMTP/RTSP 源

同时该项目也兼容 WHEP 接口。

注意 * 在线演示已停止，直到迁移到欧洲的 Web 托管服务。

资源

源码包 https://github.com/mpromonet/webrtc-streamer/releases/latest
docker容器 https://hub.docker.com/r/mpromonet/webrtc-streamer

使用

./webrtc-streamer [-H http port] [-S[embeded stun address]] -[v[v]]  [urls...]
./webrtc-streamer [-H http port] [-s[external stun address]] -[v[v]] [urls...]
./webrtc-streamer -V
主要参数：
-v[v[v]] : 设置详细程度（verbosity）
-V : 打印版本信息
-C config.json : 从JSON配置文件加载urls
-n 名称 -u 视频url -U 音频url : 为视频url和音频url注册名称
[url] : 注册到源列表的url
HTTP服务器配置：
-H [主机名:]端口 : HTTP服务器绑定（默认0.0.0.0:8000）
-w web根目录 : 获取文件的路径
-c ssl密钥证书 : HTTPS的私钥和证书路径
-N 线程数 : HTTP服务器的线程数
-A 密码文件 : HTTP服务器访问的密码文件
-D 认证域 : HTTP服务器访问的认证域（默认:mydomain.com）
STUN/TURN服务器配置：
-S[stun地址] : 启动嵌入式STUN服务器绑定到地址（默认0.0.0.0:3478）
-s[stun地址] : 使用外部STUN服务器（默认:stun.l.google.com:19302，-表示不使用STUN）
-T[用户名:密码@]turn地址 : 启动嵌入式TURN服务器（默认:禁用）
-t[用户名:密码@]turn地址 : 使用外部TURN中继服务器（默认:禁用）
其他配置：
-R [Udp端口范围最小:最大] : 设置webrtc udp端口范围（默认0:65535）
-W webrtc_trials_fields : 设置webrtc trials字段（默认:WebRTC-FrameDropper/Disabled/）
-a[音频层] : 指定要使用的音频捕获层（默认:0）
-q[过滤器] : 指定发布过滤器（默认:.）
-o : 使用空编解码器（保持帧编码）

-H 参数会被转发到 civetweb 的
listening_ports选项
允许使用 civetweb 的语法，例如 -H8000,9000 或 -H8080r,8443s

使用 -o 选项允许使用 webrtc::VideoFrameBuffer::Type::kNative 存储来自后端流的压缩帧数据。这通过重写 webrtc::VideoFrameBuffer 结构，将数据存储在 i420 缓冲区的覆盖中来实现。这允许将 H264 帧从 V4L2 设备或 RTSP 流转发到 WebRTC 流。它使用更少的 CPU，但功能较少（调整大小、编解码器和带宽控制被禁用）。

WebRTC 流名称的选项：

使用 -n 参数定义的别名，然后对应的 -u 参数将用于创建捕获器
“rtsp://” URL，将使用基于 live555 的 RTSP 捕获器打开
“file://” URL，将使用基于 live555 的 MKV 捕获器打开
“rmtp://” URL，将使用基于 librmtp 的 RMTP 捕获器打开
“screen://” URL，将由 webrtc::DesktopCapturer::CreateScreenCapturer 打开
“window://” URL，将由 webrtc::DesktopCapturer::CreateWindowCapturer 打开
“v4l2://” URL，将捕获 H264 帧并使用 webrtc::VideoFrameBuffer::Type::kNative 类型存储（在 Windows 上不支持）
“videocap://” URL，视频捕获设备名称
“audiocap://” URL，音频捕获设备名称

Examples

./webrtc-streamer -C config.json

我们可以通过以下方式访问 WebRTC 流：Live Demo

使用 webrtcstreamer.html 页面。例如：

webrtcstreamer.html?rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov
webrtcstreamer.html?Bunny

使用 layout=<行数>x<列数> 选项可以显示 WebRTC 流的网格布局。例如：Live Demo

使用docker镜像

您可以使用 docker 镜像启动应用程序：

docker run -p 8000:8000 -it mpromonet/webrtc-streamer

您可以通过以下方式从主机暴露 V4L2 设备：

docker run --device=/dev/video0 -p 8000:8000 -it mpromonet/webrtc-streamer

容器入口点是 webrtc-streamer 应用程序，然后您可以：

查看所有命令

docker run -p 8000:8000 -it mpromonet/webrtc-streamer --help

运行容器并注册 RTSP URL：

docker run -p 8000:8000 -it mpromonet/webrtc-streamer -n raspicam -u rtsp://pi2.local:8554/unicast

运行容器并提供 config.json 文件：

docker run -p 8000:8000 -v $PWD/config.json:/usr/local/share/webrtc-streamer/config.json mpromonet/webrtc-streamer

在 NAT 后使用嵌入式 STUN/TURN 服务器

It is possible to start an embeded STUN
and TURN
server and publish its URL:

./webrtc-streamer -S0.0.0.0:3478 -s$(curl -s ifconfig.me):3478
./webrtc-streamer -s- -T0.0.0.0:3478 -tturn:turn@$(curl -s ifconfig.me):3478
./webrtc-streamer -S0.0.0.0:3478 -s$(curl -s ifconfig.me):3478 -T0.0.0.0:3479 -tturn:turn@$(curl -s ifconfig.me):3479

The command curl -s ifconfig.me is getting the public IP, it could also given
as a static parameter.

In order to configure the NAT rules using the upnp feature of the router, it is
possible to use
upnpc like
this:

upnpc -r 8000 tcp 3478 tcp 3478 udp

Adapting with the HTTP port, STUN port, TURN port.

HTML Embedding

不使用内部 HTTP 服务器，也可以很容易地在由其他 HTTP 服务器提供的 HTML 页面中显示 WebRTC 流。在创建 WebRtcStreamer 实例时，需要提供要使用的 WebRTC-streamer 的 URL：WebRtcStreamer
例如：

var webRtcServer = new WebRtcStreamer(<video tag>, <webrtc-streamer url>);

一个简短的示例 HTML 页面，使用在本地 8000 端口运行的 webrtc-streamer：

<html>
<head>
<script src="libs/adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>        var webRtcServer      = null;window.onload         = function() { webRtcServer      = new WebRtcStreamer("video",location.protocol+"//"+location.hostname+":8000");webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");}window.onbeforeunload = function() { webRtcServer.disconnect(); }
</script>
</head>
<body> <video id="video" />
</body>
</html>

使用 WebComponents

WebRTC-streamer 提供了一个 WebComponent 来简化 HTML 页面中的流显示。这个组件可以像这样使用：
Web Components

<html>
<head><script type="module" src="webrtc-streamer-element.js"></script>
</head>
<body><webrtc-streamer url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></webrtc-streamer>
</body>
</html>

这个 WebComponent 提供了以下属性：

url: 要显示的流 URL
options: 包含以下选项的 JSON 字符串：
video: 布尔值，是否显示视频
audio: 布尔值，是否播放音频
autoplay: 布尔值，是否自动播放
muted: 布尔值，是否静音
controls: 布尔值，是否显示控制条
poster: 字符串，视频封面图片 URL

这个组件会自动处理 WebRTC 连接的建立和断开，使得在 HTML 页面中集成 WebRTC 流变得非常简单。Live Demo

可以使用 webcomponent 作为视频流的容器:Live Demo

使用 WHEP

WHEP (WebRTC-HTTP Egress Protocol) 是一种基于 HTTP 的协议，用于从 WebRTC 服务器获取媒体流。WebRTC-streamer 支持 WHEP 接口。WHEP

WebRTC player 可以显示来自 webrtc-streamer 的 WebRTC 流.

一个最简化的例子: Live Demo

<html>
<head><script src="https://unpkg.com/@eyevinn/whep-video-component@latest/dist/whep-video.component.js"></script>
</head>
<body><whep-video id="video" muted autoplay></whep-video><script>video.setAttribute('src', `${location.origin}/api/whep?url=Asahi&options=rtptransport%3dtcp%26timeout%3d60`);</script>
</body>
</html>

使用 tensorflow.js 进行物体检测

Live Demo

连接到 Janus Gateway 视频房间。

Janus Gateway
JanusVideoRoom

var janus = new JanusVideoRoom(<janus url>, <webrtc-streamer url>)

<html>
<head>
<script src="janusvideoroom.js" ></script>
<script>        var janus = new JanusVideoRoom("https://janus.conf.meetecho.com/janus", null);janus.join(1234, "rtsp://pi2.local:8554/unicast","pi2");janus.join(1234, "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov","media");	    
</script>
</head>
</html>

连接到 Jitsi 会议

XMPPVideoRoom

var xmpp = new XMPPVideoRoom(<xmpp server url>, <webrtc-streamer url>)

<html>
<head>
<script src="libs/strophe.min.js" ></script>
<script src="libs/strophe.muc.min.js" ></script>
<script src="libs/strophe.disco.min.js" ></script>
<script src="libs/strophe.jingle.sdp.js"></script>
<script src="libs/jquery-3.5.1.min.js"></script>
<script src="xmppvideoroom.js" ></script>
<script>        var xmpp = new XMPPVideoRoom("meet.jit.si", null);xmpp.join("testroom", "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov","Bunny");	    
</script>
</head>
</html>