h5实现ftps流媒体(视频)的播放
类似于监控的一个系统吧,接到这个要求之后我查阅过很多资料
什么NGINX转录啊,FFmpeg转码呀,websocket事实播放呀....零零散散的,不是这出问题就是那出问题
而且可以一步一步照着来的视频教程可以说是没有!!!
在找了两天的教程后,结合自己的摸索,有了思路
原理:nodejs+websocket实现ftps视频播放
首先找一个能播放的ftps视频流,现在网络上绝大多数的都封了.这里我找了两个可以用的
rtmp://ns8.indexforce.com/home/mystream
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov同时,推荐下载一个检测rtps的软件VLC media player
奉上下载地址:https://pan.baidu.com/s/1UYpH5XlK3jhbqakEM0GOag
提取码：ftps
源码部分
流程
-
安装node (如何安装，自行百度)
-
安装 node-rtsp-stream
命令如下：npm install node-rtsp-stream -
注意：第一次执行改命令后，会在当前路径下产生 node_modules文件夹，里面包含了大量的js相关文件(当然需要联网第一次)，另外会产生package-lock.json文件。
如果有了这个文件后，第二次应该不需要执行 npm install node-rtsp-stream -
编写server.js文件
-
编写test.html文件
-
启动node server.js
//serve.js
var Stream = require('node-rtsp-stream')
var stream = new Stream({
name: 'socket',
streamUrl: 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov',
wsPort: 9990,
ffmpegOptions:{
'-stats': '',
'-r': 20,
'-s': '1920 1080'
}
})//html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="position: absolute;">
<canvas id="canvas_9990" style="width: 240px;height: 160px;" onclick="pauseBtnShow()"></canvas>
<div id="pauseBtn" onclick="startOrPause()" style="z-index: 2; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; max-width: 75px; max-height: 75px; margin: auto; opacity: 0.7; cursor: pointer; display: none;"><svg style="max-width: 75px; max-height: 75px;" viewBox="0 0 200 200" alt="Play video"><circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"></circle><polygon points="70, 55 70, 145 145, 100" fill="#fff"></polygon></svg></div>
</div>
<script src="jsmpeg.min.js"></script>
<script>
var player = new JSMpeg.Player('ws://localhost:9990', {
canvas: document.getElementById('canvas_9990'),
autoplay:false,//是否自动播放
loop:true,
});
function startOrPause(){
if (player.isPlaying) {
player.pause();
}
else {
player.play();
document.getElementById('pauseBtn').style.display = 'none'
}
}
function pauseBtnShow(){
if (player.isPlaying) {
player.pause();
document.getElementById('pauseBtn').style.display = 'block'
}
}
</script>
</body>
</html>
Comments | NOTHING