sysadmin
File diff suppressed because one or more lines are too long
@@ -0,0 +1,530 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="hcap.js"></script>
|
||||
<script type="text/javascript">
|
||||
var _stateMedia = null;
|
||||
var _media = null;
|
||||
var _media_status = 0; //stop
|
||||
var current_pipeline = 0;
|
||||
|
||||
function log(msg) {
|
||||
|
||||
var dateNow = new Date();
|
||||
|
||||
var hours = dateNow.getHours();
|
||||
var minutes = dateNow.getMinutes();
|
||||
var seconds = dateNow.getSeconds();
|
||||
|
||||
if (hours < 10) {
|
||||
hours = "0" + hours;
|
||||
}
|
||||
if (minutes < 10) {
|
||||
minutes = "0" + minutes;
|
||||
}
|
||||
if (seconds < 10) {
|
||||
seconds = "0" + seconds;
|
||||
}
|
||||
|
||||
var content = hours + ":" + minutes + ":" + seconds + "->" + msg + "<br>" + document.getElementById("logMessage").innerHTML;
|
||||
|
||||
document.getElementById("logMessage").innerHTML = content;
|
||||
}
|
||||
|
||||
//Do each demo item on the app.
|
||||
function select(option) {
|
||||
switch (option) {
|
||||
case 1:
|
||||
if (current_pipeline) //Media playing previously
|
||||
{
|
||||
current_pipeline = 0;
|
||||
shutDown();
|
||||
setTimeout(playIPChannel, 500, "239.19.30.20", 50004); //It needs some time to play next video after hcap.Media.shutDown
|
||||
} else {
|
||||
playIPChannel("239.19.30.20", 50004);
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (current_pipeline) {
|
||||
current_pipeline = 0;
|
||||
shutDown();
|
||||
setTimeout(playIPChannel, 500, "239.19.30.19", 50004);
|
||||
} else {
|
||||
playIPChannel("239.19.30.19", 50004);
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (current_pipeline) {
|
||||
playMedia("http://10.16.19.200/attachments/contents/ba8054da-9036-11eb-9d36-000c29c0495e.mp4", 'video/mp4'); //playMedia() doesn't have hcap.Media.startUp.
|
||||
} else {
|
||||
current_pipeline = 1;
|
||||
playVOD("http://10.16.19.200/attachments/contents/ba8054da-9036-11eb-9d36-000c29c0495e.mp4", 'video/mp4'); //playVOD() havs hcap.Media.startUp.
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
if (current_pipeline) {
|
||||
playMedia("http://10.16.19.200/attachments/contents/ce21d5d6-9036-11eb-b16d-000c29c0495e.mp4");
|
||||
} else {
|
||||
current_pipeline = 1;
|
||||
playVOD("http://10.16.19.200/attachments/contents/ce21d5d6-9036-11eb-b16d-000c29c0495e.mp4");
|
||||
}
|
||||
break;
|
||||
case 5:
|
||||
if (current_pipeline) {
|
||||
playMedia("https://anyHLS_url_available_ontheinternet.m3u8",
|
||||
'application/x-mpegURL');
|
||||
} else {
|
||||
current_pipeline = 1;
|
||||
playVOD("https://anyHLS_url_available_ontheinternet.m3u8",
|
||||
'application/x-mpegURL');
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener("keydown",
|
||||
function(e) {
|
||||
|
||||
log("log: key_code = " + e.keyCode);
|
||||
switch (e.keyCode) {
|
||||
case 49: // Remote controller 1
|
||||
select(1);
|
||||
break;
|
||||
case 50: // Remote controller 2
|
||||
select(2);
|
||||
break;
|
||||
case 51: // Remote controller 3
|
||||
select(3);
|
||||
break;
|
||||
case 52: // Remote controller 4
|
||||
select(4);
|
||||
break;
|
||||
case 53: // Remote controller 5
|
||||
select(5);
|
||||
break;
|
||||
case 413: // Remote controller Stop
|
||||
stopMedia();
|
||||
break;
|
||||
case 404: // Remote controller green
|
||||
document.location.reload(true);
|
||||
break;
|
||||
case 403: // Remote controller Red
|
||||
reboot();
|
||||
break;
|
||||
case 602: // Remote controller Portail
|
||||
document.location.reload(true);
|
||||
break;
|
||||
case hcap.key.Code.EXIT: // Remote controller EXIT
|
||||
location.href = '../../index.html';
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
false);
|
||||
|
||||
//1._media.stop , 2._media.destroy , 3.hcap.Media.shutDown
|
||||
function shutDown() {
|
||||
if (_media != null) {
|
||||
_media.stop({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
_media.destroy({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
hcap.Media.shutDown({
|
||||
"onSuccess": function() {
|
||||
log("shutDown onSuccess");
|
||||
_media_status = 0; //stop
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
log("log: _media is null");
|
||||
}
|
||||
}
|
||||
|
||||
//1._media.stop , 2._media.destroy
|
||||
function stopMedia() {
|
||||
_media.stop({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
_media.destroy({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//1._media.stop , 2._media.destroy , 3.hcap.Media.createMedia, 4._media.play
|
||||
function playMedia(srcVideo, mimeType) {
|
||||
if (!mimeType) mimeType = "video/mp4";
|
||||
_media.stop({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
_media.destroy({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
_media = hcap.Media.createMedia({
|
||||
"url": srcVideo,
|
||||
"mimeType": mimeType
|
||||
});
|
||||
|
||||
log("Media.createMedia = " + _media);
|
||||
|
||||
_media.play({
|
||||
"repeatCount": 0,
|
||||
"onSuccess": function() {
|
||||
log("onSuccess : playVOD -> " + srcVideo);
|
||||
_media_status = 1; //play
|
||||
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function stopChannel() {
|
||||
hcap.channel.stopCurrentChannel({
|
||||
"onSuccess": function() {
|
||||
log("onSuccess : stopCurrentChannel");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//1.hcap.Media.startUp , 2.hcap.Media.createMedia , 3._media.play
|
||||
function playVOD(srcVideo, mimeType) {
|
||||
if (!mimeType) mimeType = "video/mp4";
|
||||
hcap.Media.startUp({
|
||||
"onSuccess": function() {
|
||||
log("onSuccess : startUp");
|
||||
_media = hcap.Media.createMedia({
|
||||
"url": srcVideo,
|
||||
"mimeType": mimeType
|
||||
});
|
||||
|
||||
log("Media.createMedia = " + _media);
|
||||
|
||||
_media.play({
|
||||
"repeatCount": 300,
|
||||
"onSuccess": function() {
|
||||
log("onSuccess : playVOD -> " + srcVideo);
|
||||
_media_status = 1; //play
|
||||
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function playIPChannel(ip, port) {
|
||||
var param = {
|
||||
"channelType": hcap.channel.ChannelType.IP,
|
||||
|
||||
"ip": ip,
|
||||
"port": parseInt(port),
|
||||
"ipBroadcastType": hcap.channel.IpBroadcastType.RTP,
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
};
|
||||
hcap.channel.requestChangeCurrentChannel(param);
|
||||
}
|
||||
|
||||
function playATSCChannel(major, minor) {
|
||||
|
||||
var param = {
|
||||
"channelType": hcap.channel.ChannelType.RF,
|
||||
"majorNumber": parseInt(major),
|
||||
"minorNumber": parseInt(minor),
|
||||
"rfBroadcastType": hcap.channel.RfBroadcastType.CABLE_STD,
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
};
|
||||
hcap.channel.requestChangeCurrentChannel(param);
|
||||
}
|
||||
|
||||
function dummy_play() {
|
||||
log("log: playATSCChannel");
|
||||
playATSCChannel(37, 1);
|
||||
}
|
||||
|
||||
function playDvbtChannel(frequency, programNumber) {
|
||||
var param = {
|
||||
"channelType": hcap.channel.ChannelType.RF,
|
||||
"frequency": parseInt(frequency * 1000000),
|
||||
"programNumber": programNumber,
|
||||
"rfBroadcastType": hcap.channel.RfBroadcastType.TERRESTRIAL,
|
||||
"onSuccess": function() {
|
||||
log("onSuccess : requestChangeCurrentChannel");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
};
|
||||
hcap.channel.requestChangeCurrentChannel(param);
|
||||
}
|
||||
|
||||
hcap.system.setBrowserDebugMode({
|
||||
"debugMode": true,
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//Set Streaming video size
|
||||
document.addEventListener(
|
||||
"channel_changed",
|
||||
function(param) {
|
||||
if (param.result == true) {
|
||||
hcap.video.setVideoSize({
|
||||
"x": 850,
|
||||
"y": 160,
|
||||
"width": 379,
|
||||
"height": 218,
|
||||
"onSuccess": function() {
|
||||
log("onSuccess : setVideoSize");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
log("channel_changed:[" + param.result + "] Error = " + param.errorMessage);
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
document.addEventListener(
|
||||
"media_event_received",
|
||||
function(param) {
|
||||
log("media_event_received = " + param.eventType);
|
||||
|
||||
_stateMedia = param.eventType;
|
||||
|
||||
if (_stateMedia == "play_start") {
|
||||
hcap.video.setVideoSize({
|
||||
"x": 850,
|
||||
"y": 160,
|
||||
"width": 1280,
|
||||
"height": 720,
|
||||
"onSuccess": function() {
|
||||
log("onSuccess : setVideoSize");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
function reload() {
|
||||
document.location.reload(true);
|
||||
}
|
||||
|
||||
//Pause-Resume of Media played
|
||||
var pr = 1;
|
||||
|
||||
function pause_resume() {
|
||||
if (pr) {
|
||||
pr = 0;
|
||||
_media.pause({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
pr = 1;
|
||||
_media.resume({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//Rewind of Media played
|
||||
function Rewind() {
|
||||
_media.getPlayPosition({
|
||||
"onSuccess": function(s) {
|
||||
log("onSuccess position : " + s.positionInMs);
|
||||
var current = s.positionInMs;
|
||||
_media.getInformation({
|
||||
"onSuccess": function(s) {
|
||||
log("onSuccess" +
|
||||
"\nvideoAvailable = " + s.videoAvailable +
|
||||
"\ntitle = " + s.title +
|
||||
"\ncontentLengthInMs = " + s.contentLengthInMs);
|
||||
_media.setPlayPosition({
|
||||
"positionInMs": current - (s.contentLengthInMs / 10),
|
||||
"onSuccess": function() {
|
||||
log("positionInMs=" + (current - (s.contentLengthInMs / 10)));
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Fast Forward of Media played
|
||||
function FF() {
|
||||
_media.getPlayPosition({
|
||||
"onSuccess": function(s) {
|
||||
log("onSuccess position : " + s.positionInMs);
|
||||
var current = s.positionInMs;
|
||||
_media.getInformation({
|
||||
"onSuccess": function(s) {
|
||||
log("onSuccess" +
|
||||
"\nvideoAvailable = " + s.videoAvailable +
|
||||
"\ntitle = " + s.title +
|
||||
"\ncontentLengthInMs = " + s.contentLengthInMs);
|
||||
_media.setPlayPosition({
|
||||
"positionInMs": current + (s.contentLengthInMs / 10),
|
||||
"onSuccess": function() {
|
||||
log("positionInMs=" + (current + (s.contentLengthInMs / 10)));
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function reboot() {
|
||||
hcap.power.reboot({
|
||||
"onSuccess": function() {
|
||||
consoleMsg("Success to reboot");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
consoleMsg("Fail to reboot : " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<span id='title'>Channel and Media Sample application</span>
|
||||
<hr>
|
||||
<p class="inlineClass logTitle"><b> Press digit button on remote or click a button on screen:</b></p>
|
||||
<button type="button" class="inlineClass reload_btn btn btn-lg" onclick="reload()">Reload</button>
|
||||
<button type="button" class="inlineClass reboot_btn btn btn-lg" onclick="reboot()">Reboot</button>
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onclick="location.href = '../../index.html';">Exit</button>
|
||||
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onclick="Rewind()">Rewind</button>
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onclick="pause_resume()">pause_play</button>
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onclick="FF()">FF</button>
|
||||
|
||||
<ol>
|
||||
<li>Channel request("239.1.1.1", 8208)
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onClick="select(1);">Click</button></li>
|
||||
|
||||
<li>Channel request("239.1.1.2", 8208)
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onClick="select(2);">Click</button></li>
|
||||
|
||||
<li>Media(VOD example 1)
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onClick="select(3);">Click</button></li>
|
||||
|
||||
<li>Media(VOD example 2)
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onClick="select(4);">Click</button></li>
|
||||
|
||||
<li>Media(HLS)
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg" onClick="select(5);">Click</button></li>
|
||||
</ol>
|
||||
|
||||
<div id='logMessage' style='z-index:10000;font-size:10px;background-color:black;text-align:left;color:#fff;line-height:20px;padding-left:40px;padding-top:20px'></div>
|
||||
<div id="videoChannelLG" style="background-image: url(tv:); height: 218px; left: 850px; position: absolute; top: 160px; width: 379px;"></div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
* {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
span#title {
|
||||
font-size:50px;
|
||||
}
|
||||
|
||||
ol {
|
||||
font-size:30px;
|
||||
}
|
||||
|
||||
#logs {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#button {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.menu_btn {
|
||||
font-size: 15px;
|
||||
width: 100px;
|
||||
margin: 3px;
|
||||
padding: 3px;
|
||||
background-color: #d9534f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.function_btn {
|
||||
margin: 3px;
|
||||
padding: 3px;
|
||||
background-color: #d1c7c7;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.clear_btn {
|
||||
font-size: 14px;
|
||||
width: 70px;
|
||||
padding: 2px;
|
||||
background-color: #5B5853;
|
||||
color: white;
|
||||
}
|
||||
.reload_btn {
|
||||
font-size: 14px;
|
||||
width: 70px;
|
||||
padding: 2px;
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
.reboot_btn {
|
||||
font-size: 14px;
|
||||
width: 70px;
|
||||
padding: 2px;
|
||||
background-color:red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logTitle {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-size: 8px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.inlineClass{
|
||||
display: inline-block;
|
||||
margin-left : 7px;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size : 11px;
|
||||
overflow:scroll;
|
||||
width:100%;
|
||||
height:200px;
|
||||
}
|
||||
|
||||
.preCondition{
|
||||
color:green;
|
||||
margin : 0px;
|
||||
padding : 0px;
|
||||
|
||||
}
|
||||
|
||||
#logMsg{
|
||||
font-size : 11px;
|
||||
}
|
||||
|
||||
#video_div{
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
}
|
||||
.loader {
|
||||
border: 16px solid #f3f3f3;
|
||||
border-top: 16px solid #d9534f;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 2s linear infinite;
|
||||
position : absolute;
|
||||
top: 300px;
|
||||
left: 550px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#iot_event_title {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 70%;
|
||||
display : none;
|
||||
}
|
||||
|
||||
#iot_event_div {
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 60%;
|
||||
top: 32%;
|
||||
left: 70%;
|
||||
background-color : #f5f5f5;
|
||||
overflow-y : scroll;
|
||||
display: none;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="./hcap.js"></script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#myVideo {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #f1f1f1;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#myBtn {
|
||||
width: 200px;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#myBtn:hover {
|
||||
background: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#log_area {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
padding: 10px;
|
||||
color: yellow;
|
||||
font-size: 9pt;
|
||||
background-color: rgba(0, 0, 128, 0.8);
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var gAppStartTime = (new Date()).getTime();
|
||||
|
||||
function run() {
|
||||
btn.focus();
|
||||
}
|
||||
|
||||
document.addEventListener("keydown",
|
||||
function(e) {
|
||||
|
||||
log("[dawn7dew] key_code = " + e.keyCode);
|
||||
switch (e.keyCode) {
|
||||
case 406: // Remote controller Blue
|
||||
document.location.reload(true);
|
||||
break;
|
||||
case hcap.key.Code.EXIT:
|
||||
location.href = '../../index.html';
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
false);
|
||||
|
||||
function hcap_mediaStart() {
|
||||
hcap.Media.startUp({
|
||||
"onSuccess": function() {
|
||||
log("startUponSuccess");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
log("startUponFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function hcap_mediaEnd() {
|
||||
hcap.Media.shutDown({
|
||||
"onSuccess": function() {
|
||||
console.log("onSuccess");
|
||||
},
|
||||
"onFailure": function(f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function log(msg) {
|
||||
var logArea = document.getElementById('log_area');
|
||||
var now = new Date();
|
||||
var timeFromStart = new Number((now.getTime() - gAppStartTime) / 1000);
|
||||
|
||||
if (null === logArea) {
|
||||
// Add a DOM element to dump logs
|
||||
document.body.insertAdjacentHTML('beforeEnd', '<div id="log_area"></div>');
|
||||
|
||||
logArea = document.getElementById('log_area');
|
||||
}
|
||||
|
||||
logArea.innerHTML += ('[' + timeFromStart.toFixed(3) + '][' + now.toLocaleTimeString() + '] ' + msg + '<br/>');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="run()">
|
||||
|
||||
<video id="myVideo" src="">
|
||||
Your browser does not support HTML5 video.
|
||||
</video>
|
||||
|
||||
<div class="content">
|
||||
<h1>Video Play or Stop : OK button</h1>
|
||||
<p>Sample App Video tag</p>
|
||||
<button id="myBtn" onclick="myFunction()">Status:Stop</button>
|
||||
<button type="button" onclick="location.href = '../../index.html';">Exit</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var video = document.getElementById("myVideo");
|
||||
var btn = document.getElementById("myBtn");
|
||||
|
||||
//Play-Pause of HTML video tag's video.
|
||||
function myFunction() {
|
||||
log("video.paused: " + video.paused);
|
||||
if (video.paused) {
|
||||
hcap_mediaStart(); //calling hcap.Media.startUp before video.play();
|
||||
videoPlay();
|
||||
} else {
|
||||
videoStop();
|
||||
hcap_mediaEnd(); //calling hcap.Media.shutDown after video.pause();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function videoPlay() {
|
||||
video.src = "http://10.16.19.200/attachments/contents/ba8cd93a-9036-11eb-a944-000c29c0495e.mp4";
|
||||
video.play();
|
||||
btn.innerHTML = "Status:Play";
|
||||
}
|
||||
|
||||
function videoStop() {
|
||||
video.pause();
|
||||
btn.innerHTML = "Status:Stop";
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
9
procentric/application/referece/ptc_lg/Channel_Media/hcap.js
Executable file
9
procentric/application/referece/ptc_lg/Channel_Media/hcap.js
Executable file
File diff suppressed because one or more lines are too long
51
procentric/application/referece/ptc_lg/Channel_Media/index.html
Executable file
51
procentric/application/referece/ptc_lg/Channel_Media/index.html
Executable file
@@ -0,0 +1,51 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pro:Centric Sample application</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||||
<script src='./hcap.js'></script>
|
||||
<script src='./script.js'></script>
|
||||
|
||||
<script>
|
||||
function reload(){
|
||||
document.location.reload(true);
|
||||
}
|
||||
function reboot() {
|
||||
hcap.power.reboot({
|
||||
"onSuccess": function () {
|
||||
console.log("Success to reboot");
|
||||
},
|
||||
"onFailure": function (f) {
|
||||
console.log("Fail to reboot : " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<span id='title'>Pro:Centric Sample application</span>
|
||||
<hr>
|
||||
<p class = "inlineClass logTitle"><b> Press digit button on remote or click a button:</b></p>
|
||||
<button type="button" class="inlineClass reload_btn btn btn-lg" onclick="reload()">Reload</button>
|
||||
<button type="button" class="inlineClass reboot_btn btn btn-lg" onclick="reboot()">Reboot</button>
|
||||
<ol>
|
||||
|
||||
<li>Channel and Media(VOD)
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg"
|
||||
onClick = "location.href = './Apps/player_sample/player_sample.html';">Click</button></li>
|
||||
|
||||
<li>Media(Video tag)
|
||||
<button type="button" class="inlineClass clear_btn btn btn-lg"
|
||||
onClick = "location.href = './Apps/videotag_sample/simpleVideo.html';">Click</button></li>
|
||||
|
||||
</ol>
|
||||
<div id="inputs"></div>
|
||||
<p type="text" id="logMsg"></p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
61
procentric/application/referece/ptc_lg/Channel_Media/script.js
Executable file
61
procentric/application/referece/ptc_lg/Channel_Media/script.js
Executable file
@@ -0,0 +1,61 @@
|
||||
|
||||
window.onload = function () {
|
||||
hcap.system.setBrowserDebugMode({
|
||||
"debugMode": true,
|
||||
"onSuccess": function () {
|
||||
console.log("onSuccess");
|
||||
},
|
||||
"onFailure": function (f) {
|
||||
console.log("onFailure : errorMessage = " + f.errorMessage);
|
||||
}
|
||||
});
|
||||
|
||||
var RCU = {
|
||||
Button: {
|
||||
BTN_LEFT: 37,
|
||||
BTN_UP: 38,
|
||||
BTN_RIGHT: 39,
|
||||
BTN_DOWN: 40,
|
||||
BTN_CLEAR: 12,
|
||||
BTN_OK: 13,
|
||||
BTN_0: 48,
|
||||
BTN_1: 49,
|
||||
BTN_2: 50,
|
||||
BTN_3: 51,
|
||||
BTN_4: 52,
|
||||
BTN_5: 53,
|
||||
BTN_6: 54,
|
||||
BTN_7: 55,
|
||||
BTN_8: 56,
|
||||
BTN_9: 57,
|
||||
BTN_YELLOW: 405,
|
||||
BTN_BLUE: 406,
|
||||
BTN_GREEN: 404,
|
||||
BTN_RED: 403,
|
||||
|
||||
}
|
||||
}
|
||||
document.body.addEventListener('keydown', function (e) {
|
||||
console.log("e.keyCode====" + e.keyCode);
|
||||
switch (e.keyCode) {
|
||||
// Video Layer
|
||||
case RCU.Button.BTN_1:
|
||||
location.href = './Apps/player_sample/player_sample.html';
|
||||
break;
|
||||
|
||||
//
|
||||
case RCU.Button.BTN_2:
|
||||
location.href = './Apps/videotag_sample/simpleVideo.html';
|
||||
break;
|
||||
|
||||
case RCU.Button.BTN_GREEN:
|
||||
reload();
|
||||
break;
|
||||
|
||||
|
||||
case RCU.Button.BTN_RED:
|
||||
reboot();
|
||||
break;
|
||||
}
|
||||
})
|
||||
}
|
||||
135
procentric/application/referece/ptc_lg/Channel_Media/style.css
Executable file
135
procentric/application/referece/ptc_lg/Channel_Media/style.css
Executable file
@@ -0,0 +1,135 @@
|
||||
* {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
span#title {
|
||||
font-size:50px;
|
||||
}
|
||||
|
||||
ol {
|
||||
font-size:30px;
|
||||
}
|
||||
|
||||
#logs {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#button {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.menu_btn {
|
||||
font-size: 15px;
|
||||
width: 100px;
|
||||
margin: 3px;
|
||||
padding: 3px;
|
||||
background-color: #d9534f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.function_btn {
|
||||
margin: 3px;
|
||||
padding: 3px;
|
||||
background-color: #d1c7c7;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.clear_btn {
|
||||
font-size: 14px;
|
||||
width: 70px;
|
||||
padding: 2px;
|
||||
background-color: #5B5853;
|
||||
color: white;
|
||||
}
|
||||
.reload_btn {
|
||||
font-size: 14px;
|
||||
width: 70px;
|
||||
padding: 2px;
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
.reboot_btn {
|
||||
font-size: 14px;
|
||||
width: 70px;
|
||||
padding: 2px;
|
||||
background-color:red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logTitle {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-size: 8px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.inlineClass{
|
||||
display: inline-block;
|
||||
margin-left : 7px;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size : 11px;
|
||||
overflow:scroll;
|
||||
width:100%;
|
||||
height:200px;
|
||||
}
|
||||
|
||||
.preCondition{
|
||||
color:green;
|
||||
margin : 0px;
|
||||
padding : 0px;
|
||||
|
||||
}
|
||||
|
||||
#logMsg{
|
||||
font-size : 11px;
|
||||
}
|
||||
|
||||
#video_div{
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
}
|
||||
.loader {
|
||||
border: 16px solid #f3f3f3;
|
||||
border-top: 16px solid #d9534f;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 2s linear infinite;
|
||||
position : absolute;
|
||||
top: 300px;
|
||||
left: 550px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#iot_event_title {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 70%;
|
||||
display : none;
|
||||
}
|
||||
|
||||
#iot_event_div {
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 60%;
|
||||
top: 32%;
|
||||
left: 70%;
|
||||
background-color : #f5f5f5;
|
||||
overflow-y : scroll;
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user