RTSP视频流到HTML5

时间:2018-01-31 12:05:29

标签: javascript video-streaming html5-video rtsp rtsp-client

我需要将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;
&#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;
&#13;
&#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)?谢谢

0 个答案:

没有答案