hls预览页面
This commit is contained in:
wangliwen
parent
e8254b293c
commit
6edc669e6a
BIN
hisense_dh.db
BIN
hisense_dh.db
Binary file not shown.
|
|
@ -105,7 +105,47 @@ class DeviceChannelController(
|
|||
* hls预览页面
|
||||
*/
|
||||
fun hls(requestHandler: RoutingContext) {
|
||||
val userId = requestHandler.get<Int>("userId") // 用户id
|
||||
val queryParams = requestHandler.queryParams()
|
||||
val channelId = queryParams.get("channelId")
|
||||
val subType = queryParams.get("subType")
|
||||
val scheme = MonitorScheme.HLS.scheme
|
||||
val data =
|
||||
JsonObject().put("hls", "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8")
|
||||
templateEngine!!.render(
|
||||
data, "templates/device_channel/hls.html"
|
||||
).onSuccess { success: Buffer? ->
|
||||
requestHandler.response().putHeader("Content-Type", "text/html").end(success)
|
||||
}.onFailure { fail: Throwable ->
|
||||
requestHandler.fail(fail)
|
||||
}
|
||||
// event!!.request<JsonArray>(EventBusAddress.SYS_MONITOR_USER_ALLMONITORUSER_TOKEN.address, JsonObject()) {
|
||||
// if (it.succeeded()) {
|
||||
// val token = it.result().body().stream().filter { index ->
|
||||
// index as JsonObject
|
||||
// index.getInteger("id") == userId
|
||||
// }.findFirst()
|
||||
// token.ifPresent { tokenInfo ->
|
||||
// tokenInfo as JsonObject
|
||||
// tokenInfo.put("channelId", channelId)
|
||||
// tokenInfo.put("subType", subType)
|
||||
// tokenInfo.put("scheme", MonitorScheme.values()[scheme.toInt()].scheme)
|
||||
// event!!.request<JsonObject>(EventBusAddress.SYS_DEVICE_CHANNEL_PREVIEW_URL.address, tokenInfo) { previewUrl ->
|
||||
// if (previewUrl.succeeded()) {
|
||||
// requestHandler
|
||||
// .response()
|
||||
// .putHeader("content-type", "application/json")
|
||||
// .end(previewUrl.result().body().encode())
|
||||
// } else {
|
||||
// requestHandler
|
||||
// .response()
|
||||
// .putHeader("content-type", "application/json")
|
||||
// .end(JsonObject().encode())
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -94,5 +94,7 @@ class WebAPIVerticle : CoroutineVerticle() {
|
|||
|
||||
router.route(HttpMethod.GET, "/admin/channel/index").handler(deviceChannelController::index) // 通道首页
|
||||
router.route(HttpMethod.POST, "/admin/channel/page").handler(deviceChannelController::deviceChannelPage) // 通道分页
|
||||
router.route(HttpMethod.GET, "/admin/channel/flv").handler(deviceChannelController::flv) // flv预览播放页面
|
||||
router.route(HttpMethod.GET, "/admin/channel/hls").handler(deviceChannelController::hls) // flv预览播放页面
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>flv预览页面</title>
|
||||
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>hls预览页面</title>
|
||||
<link th:href="@{/layui/css/layui.css}" rel="stylesheet">
|
||||
<link th:href="@{/video-js/video-js.min.css}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<video id="rtmpVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="true">
|
||||
<source th:src="${hls}" type="application/x-mpegURL">
|
||||
</source>
|
||||
</video>
|
||||
</div>
|
||||
<script th:src="@{/video-js/video.min.js}"></script>
|
||||
<script th:src="@{/video-js/videojs-http-streaming.min.js}"></script>
|
||||
<script th:src="@{/video-js/lang/zh-CN.js}"></script>
|
||||
<script th:src="@{/layui/layui.js}"></script>
|
||||
<script language='javascript' th:inline="javascript">
|
||||
var hls = [[${ hls }]]
|
||||
videojs.options.autoplay = true;
|
||||
var width = window.innerWidth;
|
||||
var height = window.innerHeight;
|
||||
window.onload = function () {
|
||||
var player = videojs('rtmpVideo', {
|
||||
autoplay: true,
|
||||
width: width,
|
||||
height: height,
|
||||
language: 'zh-CN',
|
||||
controlBar: {
|
||||
liveDisplay: true
|
||||
},
|
||||
muted: true,
|
||||
preload: 'metadata',
|
||||
sources: [{
|
||||
src: hls,
|
||||
type: 'application/x-mpegURL'
|
||||
}]
|
||||
}, function () {
|
||||
console.log('videojs播放器初始化成功');
|
||||
});
|
||||
player.on('loadedalldata', function (e) {
|
||||
console.log('数据加载完成!');
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@
|
|||
</div>
|
||||
<script type="text/html" id="barDemo">
|
||||
<a href="#" title="通道信息" style="font-size: 18px"><i class="layui-icon layui-icon-template-1"
|
||||
style="font-size: 18px; color: #5FB878;"
|
||||
lay-event="info"></i></a>
|
||||
style="font-size: 18px; color: #5FB878;"
|
||||
lay-event="info"></i></a>
|
||||
<a href="#" title="预览flv" style="font-size: 18px"><i class="layui-icon layui-icon-play"
|
||||
style="font-size: 18px; color: #5FB878;"
|
||||
lay-event="flv"></i></a>
|
||||
|
|
@ -104,18 +104,31 @@ layui.use('table', function(){
|
|||
var data = obj.data;
|
||||
var layEvent = obj.event;
|
||||
var tr = obj.tr;
|
||||
if (layEvent === 'flv') { // flv 预览
|
||||
|
||||
if (layEvent === 'flv') { // flv 预览
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: false,
|
||||
area: ['1280px', '720px'],
|
||||
shade: 0.8,
|
||||
closeBtn: 0,
|
||||
closeBtn: 1,
|
||||
scrollbar: false,
|
||||
shadeClose: true,
|
||||
content: '/vod?stream=' + data.stream + '&clientId=' + data.clientId + '&liveApp=' + data.liveApp
|
||||
content: '/admin/channel/flv?channelId=' + data.channelId
|
||||
});
|
||||
}
|
||||
if (layEvent === 'hls') { // hls 预览
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: false,
|
||||
area: ['1280px', '720px'],
|
||||
shade: 0.8,
|
||||
closeBtn: 1,
|
||||
scrollbar: false,
|
||||
shadeClose: true,
|
||||
content: '/admin/channel/hls?channelId=' + data.channelId
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
var $ = layui.$, active = {
|
||||
|
|
@ -140,6 +153,8 @@ layui.use('table', function(){
|
|||
})
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -97,12 +97,5 @@ layui.use(['element', 'layer', 'util'], function(){
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue