RTSP 视频流转 HTML5

Question

我需要在我的 angulajs 应用程序中实现 RTSP 视频流。正如我们所知，RTSP 与 HTML 一起工作并不容易，我们需要使用一些插件。

我尝试使用html5_rtsp_player，这只是对我有用的解决方案，但我找不到如何制作四个流视图 (div) 的方法，而且因为这是第三方服务器，如果服务器有时关闭或更改，我很害怕诸如此类，我会遇到麻烦，并且使用此html5_rtsp_player我丢失了太多带宽，因为我需要先将视频流带到浏览器并发送到流媒体服务器进行转换，然后再取回显示预览（如果我错了，请解释一下，因为这是我第一次用视频流做一些事情）代码如下。

<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-rtsp">
</video>
<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-
rtsp">
</video>
<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-
beta.2/polyfill.min.js"></script>
<script src="streamedian.min.js"></script>
<script>
var p = Streamedian.player('test_video', {socket:  
"wss://specforge.com/ws/"});
</script>

接下来，我尝试使用videogular，但我的流不起作用，这里没有发生任何事情是代码。

<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-rtsp">
</video>
<video id="test_video" controls autoplay>
<source src="rtsp://xx.xx.xx.xx?real_stream" type="application/x-
rtsp">
</video>
<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-
beta.2/polyfill.min.js"></script>
<script src="streamedian.min.js"></script>
<script>
var p = Streamedian.player('test_video', {socket:  
"wss://specforge.com/ws/"});
</script>

'use strict';
angular.module('myApp',
		[
			"ngSanitize",
			"com.2fdevs.videogular",
			"com.2fdevs.videogular.plugins.controls",
			"com.2fdevs.videogular.plugins.overlayplay",
			"com.2fdevs.videogular.plugins.poster",
			"com.2fdevs.videogular.plugins.dash"
		]
	)
	.controller('HomeCtrl',
		["$sce", function ($sce) {
			this.config = {
				sources: [
					{src: "rtsp://xx.xx.xx.xx:xxxx/user=xx_password=xxxx_channel=1_stream=0.sdp?real_stream"}
				],
				theme: {
					url: "https://unpkg.com/videogular@2.1.2/dist/themes/default/videogular.css"
				},
				plugins: {
					poster: "http://www.videogular.com/assets/images/videogular.png"
				}
			};
		}]
	);

html, body {
	margin: 0;
	padding: 0;
}

.videogular-container {
	width: 100%;
	height: 320px;
	margin: auto;
	overflow: hidden;
}

@media (min-width: 1200px) {
	.videogular-container {
		width: 1170px;
		height: 658.125px;
	}

	.videogular-container.audio {
		width: 1170px;
		height: 50px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.videogular-container {
		width: 940px;
		height: 528.75px;
	}

	.videogular-container.audio {
		width: 940px;
		height: 50px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.videogular-container {
		width: 728px;
		height: 409.5px;
	}

	.videogular-container.audio {
		width: 728px;
		height: 50px;
	}
}

我尝试使用的第三部分插件是kurento-one2many-call 当我尝试安装npm依赖项时，我得到

> C:\xampp\htdocs\rtsp\kurento-tutorial-node\kurento-one2many-call\node_modules\kurento-jsonrpc\node_modules\bufferutil>if not defined npm_config_node_gyp (node "C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at Object.failNoPython (C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at Object.<anonymous> (C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Users\Bozo\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:123:15)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Bozo\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\xampp\htdocs\rtsp\kurento-tutorial-node\kurento-one2many-call\node_modules\kurento-jsonrpc\node_modules\bufferutil
gyp ERR! node -v v6.10.3
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bufferutil@1.2.1 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bufferutil@1.2.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Bozo\AppData\Roaming\npm-cache\_logs\2018-01-
31T11_41_09_765Z-debug.log

VLC 不再像 vlc web 插件那样在 chrome 和 firefox 中工作。

我的问题是，有人可以帮助我，在 HTML 中获取 RTSP 流的最佳方法是什么？有这样的例子吗？我不需要任何控件，只需要流式视频预览。

如果这不是一个好的解决方案，是否有一些实时视频转换器可以将 RTSP 实时转换为 mp4 或 hls，但来自前端（javascript）？谢谢