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>
Live Demo
)
![[ctfshow web入門] web30](http://pic.xiahunao.cn/[ctfshow web入門] web30)
)
