使用 HTML 显示 TCP 流
Show tcp stream using HTML
我想使用 gstreamer 将网络摄像头的视频流式传输到网络。在嵌入式 Linux 环境中,我有 gstreamer 运行 以下命令:
gst-launch mfw_v4lsrc ! vpuenc codec=12 ! multipartmux ! tcpserversink host=127.0.0.1 port=1234 sync=false
我可以使用 tcp://127.0.0.1:1234
通过 VLC 播放器接收此流。这很完美。
现在我想在我的网络浏览器中显示该视频。我发现我不能使用 HTML5 视频标签。这显示了一个黑色图像。
同样使用 http://127.0.0.1:1234
将显示视频控件,但没有视频。
因此我尝试使用 PHP 来接收流并通过网络服务器发布它们。我在 php 网站上实现了这个例子:
<?php
$fp = stream_socket_client("tcp://www.example.com:80", $errno, $errstr, 30);
if (!$fp) {
echo "$errstr ($errno)<br />\n";
} else {
fwrite($fp, "GET / HTTP/1.0\r\nHost: www.example.com\r\nAccept: */*\r\n\r\n");
while (!feof($fp)) {
echo fgets($fp, 1024);
}
fclose($fp);
}
?>
这只打印流的接收字节。但我不知道如何编码流来显示视频。如何将流转换为网页上显示的视频?
最符合浏览器的方式是
WebRTC 流
目前,我还在寻找一个好的方法。
- 我对 OpenWebRTC 抱有很大的期望,但还没有成功。
- 有一个webrtcsink GStreamer plugin in Kurento media server, but I didn't figure out if it can be used on itself yet. One can install and try it on Ubuntu 13.10 or 14.04;从源代码构建需要大量的设置和探索。
- 有一个 Janus 服务器。
- 可能,有更多的选择。
或
您可以使用流媒体服务器来:
- 代理 RTMP 流(最初由 Adobe 开发,现已开源);
- 分发 HTTP 实时流媒体 (hls);
- 分发 MPEG-DASH HTTP 流。
我个人使用nginx RTMP module。还有其他选项,例如 Wowza。
RTMP
GStreamer 中有 flvmux ! rtmpsink
个。
在页面上,您将需要一个 Flash 播放器。 JWPlayer 为我工作。
HLS
流式传输 with nginx-rtmp-module
或者您可以玩这个 http-launch 小程序。
HLS 将在 iOS 和 Android 上原生运行,但不能在桌面上运行(如果没有 Javascript 客户端)。
DASH
使用 nginx-rtmp-module
流式传输。
某些浏览器 HTML5 支持 DASH 流 - 根据使用的编解码器,情况非常糟糕 - 另外你需要一个 dash.js 播放器。
HLS 和 DASH 都需要在桌面浏览器(现在在 Chrome、Safari 和 Opera)中支持 Source Media Extensions,并且需要 Javascript 播放器才能使用。
浏览器对一些关键技术和编解码器的支持:https://html5test.com/compare/feature/webrtc-webrtc/video-mediasource/video-h264/video-webmvp8.html
我想使用 gstreamer 将网络摄像头的视频流式传输到网络。在嵌入式 Linux 环境中,我有 gstreamer 运行 以下命令:
gst-launch mfw_v4lsrc ! vpuenc codec=12 ! multipartmux ! tcpserversink host=127.0.0.1 port=1234 sync=false
我可以使用 tcp://127.0.0.1:1234
通过 VLC 播放器接收此流。这很完美。
现在我想在我的网络浏览器中显示该视频。我发现我不能使用 HTML5 视频标签。这显示了一个黑色图像。
同样使用 http://127.0.0.1:1234
将显示视频控件,但没有视频。
因此我尝试使用 PHP 来接收流并通过网络服务器发布它们。我在 php 网站上实现了这个例子:
<?php
$fp = stream_socket_client("tcp://www.example.com:80", $errno, $errstr, 30);
if (!$fp) {
echo "$errstr ($errno)<br />\n";
} else {
fwrite($fp, "GET / HTTP/1.0\r\nHost: www.example.com\r\nAccept: */*\r\n\r\n");
while (!feof($fp)) {
echo fgets($fp, 1024);
}
fclose($fp);
}
?>
这只打印流的接收字节。但我不知道如何编码流来显示视频。如何将流转换为网页上显示的视频?
最符合浏览器的方式是
WebRTC 流
目前,我还在寻找一个好的方法。
- 我对 OpenWebRTC 抱有很大的期望,但还没有成功。
- 有一个webrtcsink GStreamer plugin in Kurento media server, but I didn't figure out if it can be used on itself yet. One can install and try it on Ubuntu 13.10 or 14.04;从源代码构建需要大量的设置和探索。
- 有一个 Janus 服务器。
- 可能,有更多的选择。
或
您可以使用流媒体服务器来:
- 代理 RTMP 流(最初由 Adobe 开发,现已开源);
- 分发 HTTP 实时流媒体 (hls);
- 分发 MPEG-DASH HTTP 流。
我个人使用nginx RTMP module。还有其他选项,例如 Wowza。
RTMP
GStreamer 中有 flvmux ! rtmpsink
个。
在页面上,您将需要一个 Flash 播放器。 JWPlayer 为我工作。
HLS
流式传输 with nginx-rtmp-module
或者您可以玩这个 http-launch 小程序。
HLS 将在 iOS 和 Android 上原生运行,但不能在桌面上运行(如果没有 Javascript 客户端)。
DASH
使用 nginx-rtmp-module
流式传输。
某些浏览器 HTML5 支持 DASH 流 - 根据使用的编解码器,情况非常糟糕 - 另外你需要一个 dash.js 播放器。
HLS 和 DASH 都需要在桌面浏览器(现在在 Chrome、Safari 和 Opera)中支持 Source Media Extensions,并且需要 Javascript 播放器才能使用。
浏览器对一些关键技术和编解码器的支持:https://html5test.com/compare/feature/webrtc-webrtc/video-mediasource/video-h264/video-webmvp8.html