我需要将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>
接下来,我尝试使用视频,但我的流无法正常工作,没有任何反应 这是代码
'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)?谢谢