在RapberryPi 4B上执行v4l2rtspserver和webrtc-streamer


背景

有关使用Rapberry Pi实现将输入视频发送到具有RTSP的特定面部识别引擎的机制的故事。

使用RapberryPi，可以使用v4l2rtspserver进行RTSP分发。
但是，发送时如何在连接到Rapberry Pi的监视器上显示呢？

由于延迟大，VLC使用不便。
我想以Chromium的Kiosk模式显示。

您是否通过浏览器接收并显示了RTSP？
这就是WebRTC的原因。

失败

当v4l2rtspserver在/ dev / video0中发送数据时，WebRTC无法访问/ dev / video0。

改进

v4l2rtspserver的创建者Michel Promenet得到了答案。
使用webrtc-streamer，似乎rtsp可以通过WebRTC机制显示在浏览器中，而无需从/ dev / video0获取它。
对于WebRTC，这是第一个实现，对其工作原理了解甚少。

通过使用先前作者提供的用于armv7的Docker映像，

可以轻松实现此目的。

工作

使用Docker映像构建所有内容。

环境

RaspberryPi 4B 8GB
带有桌面的RaspberryPi OS(32位)
版本：2020年5月
发布日期：2020-05-27
内核版本：4.19

v4l2rtspserver

mpromonet / v4l2rtspserver

1
$ docker pull mpromonet/v4l2rtspserver

使用docker-compose

编写

v4l2rtspserver / docker-compose.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
---
version: '3'
services:
  rtsp:
    image: 'mpromonet/v4l2rtspserver:latest'
    container_name: 'v4l2rtspserver'
    ports:
      - '8554:8554'
    command: '-G 720x480x15 -S'
    devices:
      - '/dev/video0'
    tty: true
    privileged: true

以720x480 15fps传输
如果在命令中编写，它将使用参数

执行

传递URL为rtsp：//主机名：8554 /可以接收单播和单播。
您可以在VLC上看到它。

webrtc-streamer

mpromonet / webrtc-streamer

1
docker pull mpromonet/webrtc-streamer

这也是用docker-compose编写的。

webrtc-streamer / docker-compose.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
---
version: '3'
services:
  webrtc:
    image: 'mpromonet/webrtc-streamer:latest'
    container_name: 'webrtc-streamer'
    ports:
      - '8000:8000'
    volumes:
      - ./webrtc-streamer/app/html/new.html:/app/html/index.html
      - ./webrtc-streamer/app/html/config.json:/app/html/config.json
    tty: true
    privileged: true

http：// [主机名]：8000
当您访问

1
2
3
WebRTC stream name to connect is missing
Usage :
http://[ホスト名]:8000/?video=<WebRTC video stream name>&audio=<WebRTC audio stream name>&options=<WebRTC options>

我认为对话框将显示为

，因此我将添加前面提到的

的RTSP分发URL。

1
http://[ホスト名]:8000/?video=rtsp://[RTSPホスト名]:8554/unicast

应该出现在浏览器中

你想做的事

将3.5英寸显示器连接到Raspberry Pi。
我想在Chromium的信息亭模式下以全屏显示图像。
因此，我将其替换为与先前docker-compose中写入的卷相对应的页面。

内容是这样的。
现在，视频以全屏显示

/app/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<script _src="libs/request.min.js" ></script>
<script _src="libs/adapter.min.js" ></script>
<script _src="config.json"></script>
<script _src="webrtcstreamer.js"></script>
<script>
var params = new URLSearchParams(location.search);
if (params.has("video")) config.video = params.get("video");
if (params.has("audio")) config.audio = params.get("audio");
if (params.has("options")) config.options = params.get("options");

var webRtcServer = null;
window.onload = () => {
    webRtcServer = new WebRtcStreamer('video', config.server);
    webRtcServer.connect(config.video, config.audio, config.options);
}
window.onbeforeunload = () => {
    webRtcServer.disconnect();
}
</script>
<style>
body { margin: 0; padding: 0; overflow: hidden; background-color: black; }
video { text-align: left; width: 100%; }
</style>
</head>
<body>
    <video id="video" muted playsinline />
</body>
</html>

config.json具有设置，但看起来像这样

/app/html/config.json

1
2
3
4
5
6
const config = {
    'server': 'http://192.168.11.120:8000',
    'video': 'rtsp://192.168.11.120:8554/unicast',
    'audio': '',
    'options': 'rtptransport=tcp&timeout=60'
};

使用http：// [主机名]：8000访问时，将显示config.json的设置内容。

这次，RTSP分布在同一主机上，并且IP地址可能会更改，因此我将在查询中将包含分发主机IP地址的URL传递给Chromium并显示

信息亭模式

要在信息亭模式下启动Chromium，请请求以下
[错误请求]()

1
chromium-browser --kiosk [ページのURL] --display=:0

构建以下外壳程序以通过传递主机的IP地址开始

kiosk.sh

1
2
3
#!/bin/sh
ip=$(ifconfig | grep -A 1 'wlan0' | tail -n 1 | cut -b 14-27)
chromium-browser --noerrdialogs --kiosk http://localhost:8000/index.html?video=rtsp://${ip}:8554/unicast --display=:0

如果以此开始，则应全屏显示

结果

使用RTSP发送时，我可以使用WebRTC在监视器上显示它。
由于RTSP在VLC中显示，因此存在延迟，但是在Chromium中显示的WebRTC几乎没有显示延迟。
哦

image