|
|
@ -1,63 +1,65 @@ |
|
|
|
<!DOCTYPE html> |
|
|
|
|
|
|
|
<head> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<meta name="viewport" content="width=device-width"> |
|
|
|
<title>DEMO node-rtsp-stream-jsmpeg</title> |
|
|
|
<script src="https://jsmpeg.com/jsmpeg.min.js"></script> |
|
|
|
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> |
|
|
|
|
|
|
|
<style type="text/css"> |
|
|
|
html, |
|
|
|
body { |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
input[type='text'] { |
|
|
|
width: 450px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<meta name="viewport" content="width=device-width"> |
|
|
|
<title>DEMO node-rtsp-stream-jsmpeg</title> |
|
|
|
<script src="https://jsmpeg.com/jsmpeg.min.js"></script> |
|
|
|
<!-- <script src="../jsmpeg.min.js"></script> --> |
|
|
|
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> |
|
|
|
|
|
|
|
<style type="text/css"> |
|
|
|
html, |
|
|
|
body { |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
input[type='text'] { |
|
|
|
width: 450px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body> |
|
|
|
<div> |
|
|
|
<!-- <span>rtsp : <input type="text" name="rtsp" id="rtsp" value="rtsp://admin:xcs123456@192.168.3.11:554/h264/ch1/main/av_stream"></span><br /> --> |
|
|
|
<span>rtsp : <input type="text" name="rtsp" id="rtsp" value="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></span><br /> |
|
|
|
|
|
|
|
<span>rtsp : <input type="text" name="size" id="size" value="1024*768"></span><br /> |
|
|
|
<canvas id="video-canvas"> |
|
|
|
</canvas><br /> |
|
|
|
|
|
|
|
<input type="button" value="Start Stream" onclick="start()"> |
|
|
|
<input type="button" value="Close Stream" onclick="closeStream()"> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
var player |
|
|
|
|
|
|
|
function closeStream() { |
|
|
|
$.post("http://127.0.0.1:3000/cameras/close/", { rtspUrl: $('#rtsp').val() }, function (result) { |
|
|
|
player.destroy() |
|
|
|
}) |
|
|
|
<div> |
|
|
|
<!-- <span>rtsp : <input type="text" name="rtsp" id="rtsp" value="rtsp://admin:xcs123456@192.168.3.11:554/h264/ch1/main/av_stream"></span><br /> --> |
|
|
|
<span>rtsp : <input type="text" name="rtsp" id="rtsp" |
|
|
|
value="rtsp://admin:yxk63603325@192.168.99.21:554/1/1"></span><br /> |
|
|
|
|
|
|
|
<span>rtsp : <input type="text" name="size" id="size" value="1024*768"></span><br /> |
|
|
|
<canvas id="video-canvas"> |
|
|
|
</canvas><br /> |
|
|
|
|
|
|
|
<input type="button" value="Start Stream" onclick="start()"> |
|
|
|
<input type="button" value="Close Stream" onclick="closeStream()"> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
var player |
|
|
|
|
|
|
|
function closeStream() { |
|
|
|
$.post("http://127.0.0.1:3000/cameras/close/", { rtspUrl: $('#rtsp').val() }, function(result) { |
|
|
|
player.destroy() |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function start() { |
|
|
|
var rstp = $('#rtsp').val() |
|
|
|
var size = $('#size').val() |
|
|
|
$.post("http://127.0.0.1:3000/cameras/", { rtspUrl: rstp, size: size, port: '3000', videoRoute: '1' }, function(result) { |
|
|
|
var url = "ws://127.0.0.1:" + result.port; |
|
|
|
var canvas = document.getElementById('video-canvas'); |
|
|
|
let opt = { |
|
|
|
canvas: canvas, |
|
|
|
poster: "0.jpg", |
|
|
|
} |
|
|
|
player = new JSMpeg.Player(url, opt); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
function start() { |
|
|
|
var rstp = $('#rtsp').val() |
|
|
|
var size = $('#size').val() |
|
|
|
$.post("http://127.0.0.1:3000/cameras/", { rtspUrl:rstp, size: size }, function (result) { |
|
|
|
var url = "ws://127.0.0.1:" + result.port; |
|
|
|
var canvas = document.getElementById('video-canvas'); |
|
|
|
let opt = { |
|
|
|
canvas: canvas, |
|
|
|
poster: "0.jpg", |
|
|
|
} |
|
|
|
player = new JSMpeg.Player(url, opt); |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -67,7 +69,7 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|