Question

我需要将RTSP视频流应用到我的angulajs应用程序。就像我们所知道的那样，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>

接下来，我尝试使用视频，但我的流无法正常工作，没有任何反应这是代码

＆＃13;

'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"
				}
			};
		}]
	);

＆＃13;

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;
	}
}

＆＃13;

<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
	<videogular vg-theme="controller.config.theme.url">
		<vg-media vg-src="controller.config.sources" vg-dash></vg-media>

		<vg-controls>
			<vg-play-pause-button></vg-play-pause-button>
			<vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
			<vg-scrub-bar>
				<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
			</vg-scrub-bar>
			<vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
			<vg-volume>
				<vg-mute-button></vg-mute-button>
				<vg-volume-bar></vg-volume-bar>
			</vg-volume>
			<vg-fullscreen-button></vg-fullscreen-button>
		</vg-controls>

		<vg-overlay-play></vg-overlay-play>
		<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
	</videogular>
</div>
</div>

<script src="https://cdn.dashjs.org/v2.0.0/dash.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/videogular/videogular.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/controls/vg-controls.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/overlay-play/vg-overlay-play.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/poster/vg-poster.js"></script>
<script src="https://unpkg.com/videogular@2.1.2/dist/dash/vg-dash.js"></script>

＆＃13;

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

C：\ xampp \ htdocs \ rtsp \ kurento-tutorial-node \ kurento-one2many-call \ node_modules \ kurento-jsonrpc \ node_modules \ bufferutil＆gt; if not defined defined npm_config_node_gyp（node＆＃34; C：\ Users \ Bozo \ AppData \ Roaming \ npm \ node_modules \ npm \ bin \ node-gyp-bin \ .... \ node_modules \ node-gyp \ bin \ node-gyp.js＆＃34; rebuild）else（node＆＃34;＆＃34;重建） gyp ERR！配置错误 gyp ERR！堆栈错误：无法找到Python可执行文件＆＃34; python＆＃34;，您可以设置PYTHON env变量。 gyp ERR！堆栈在Object.failNoPython（C：\ Users \ Bozo \ AppData \ Roaming \ npm \ node_modules \ npm \ node_modules \ node-gyp \ lib \ configure.js：483：19） gyp ERR！堆栈在对象。（C：\用户\博若\应用程序数据\漫游\ NPM \ node_modules \ NPM \ node_modules \节点-GYP \ lib中\ configure.js：508：16） gyp ERR！堆栈在C：\ Users \ Bozo \ AppData \ Roaming \ npm \ node_modules \ npm \ node_modules \ graceful-fs \ polyfills.js：284：29 gyp ERR！堆栈在FSReqWrap.oncomplete（fs.js：123：15） gyp ERR！系统Windows_NT 10.0.16299 gyp ERR！命令＆＃34; C：\ Program Files \ nodejs \ node.exe＆＃34; ＆＃34; C：\用户\博若\应用程序数据\漫游\ NPM \ node_modules \ NPM \ node_modules \节点-GYP \ BIN \节点gyp.js＆＃34; ＆＃34;重建＆＃34; 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！不好错误的ERR！代码ELIFECYCLE 错误的ERR！错误1 错误的ERR！ bufferutil@1.2.1安装：node-gyp rebuild 错误的ERR！退出状态1 错误的ERR！错误的ERR！在bufferutil@1.2.1安装脚本失败。错误的ERR！这可能不是npm的问题。上面可能有额外的日志记录输出。错误的ERR！可以在以下位置找到此运行的完整日志：错误的ERR！ C：\ Users \用户博佐\应用程序数据\漫游\ NPM-cache_logs \ 2018-01- 31T11_41_09_765Z-的debug.log

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

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

如果这不是一个好的解决方案，是否有一些实时视频转换器用于实时转换RTSP到mp4或hsl，但是从前端（javascript）？谢谢

RTSP视频流到HTML5

0 个答案: