com.hikky.heliodorlib
Version:
This is the library for Vket Cloud SDK.
237 lines (216 loc) • 6.29 kB
HTML
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no"
/>
<title>UI2024テスト</title>
<!-- dev -->
<!-- <script src="https://heliodor.vketcdn.com/heliport/dev/v3/heliport-latest.js"></script> -->
<!-- prod -->
<script src="https://heliodor.vketcdn.com/heliport/common/v3/heliport-latest.js"></script>
<!-- loading -->
<!-- note: comment out if you use custom loading -->
<!-- <script>
window.heliport = window.heliport || {}
window.heliport.loading = window.heliport.loading || {}
window.heliport.loading.useLocalLoading = true
</script> -->
<script
type="text/javascript"
async
src="https://heliodor.vketcdn.com/heliport/plugins/loading-override/heliport-plugin-loading-override-latest.js"
></script>
</head>
<style>
html {
touch-action: manipulation;
}
body {
margin: 0;
padding: 0;
}
#canvas {
position: absolute;
outline: none;
width: 100%;
height: 100%;
}
#status {
position: absolute;
left: 30vw;
top: 5vh;
width: auto;
height: auto;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.4);
font-size: 0.8rem;
z-index: 4;
display: none;
pointer-events: none;
}
#log {
position: absolute;
left: 30vw;
top: 15vh;
width: auto;
height: auto;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.4);
font-size: 0.8rem;
z-index: 4;
display: none;
pointer-events: none;
}
/*縦画面用デバッグ表示*/
@media (orientation: portrait) {
#status {
left: 40vw;
top: 15vh;
height: auto;
width: 58vw;
font-size: 0.7rem;
display: none;
}
#log {
left: 40vw;
top: 25vh;
height: auto;
width: 58vw;
font-size: 0.7rem;
display: none;
}
}
#video0 {
display: none;
}
.room {
display: grid;
grid-template-columns: 50% 30%;
gap: 8px;
margin: 0 8px;
z-index: 5;
}
.room .remote-streams {
z-index: 6;
visibility: hidden;
}
.inputlist {
z-index: 5;
overflow: hidden;
max-width: 0;
}
.inputlist .msg {
position: absolute;
z-index: 6;
visibility: hidden;
}
.inputlist .username {
position: absolute;
z-index: 6;
visibility: hidden;
}
#username-text {
color: #ffffff;
font-size: 16px;
background: transparent;
border: none;
outline: none;
resize: none;
}
#__ss_modal {
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
}
#__ss_modal-dialog {
background-color: #f2f1f6;
width: 80vmin;
height: 24vmin;
font-size: 3.8vmin;
box-sizing: border-box;
border-radius: 4vmin;
position: relative;
padding: 4vmin;
font-family: sans-seif;
}
#__ss_modal-dialog-text {
font-size: 3.8vmin;
margin: 0;
font-family: sans-serif;
}
#__ss_modal-dialog-btn_open_ss {
font-size: 4vmin;
color: #277ade;
position: absolute;
bottom: 4vmin;
right: 10vmin;
text-decoration: none;
font-weight: bold;
font-family: sans-serif;
}
#__ss_modal-dialog-btn_close {
font-size: 5vmin;
background-color: transparent;
border: none;
outline: none;
padding: 0;
appearance: none;
color: #a9a9a9;
position: absolute;
top: 3.5vmin;
right: 4.5vmin;
}
</style>
<body>
<canvas id="canvas" tabindex="-1"></canvas>
<div id="status"></div>
<div id="log"></div>
<video
id="video0"
autoPictureInPicture="false"
disablePictureInPicture
controlslist="nodownload"
crossorigin="Anonymous"
playsinline
></video>
<div class="room">
<audio id="js-local-stream"></audio>
<div class="remote-streams" id="js-remote-streams"></div>
</div>
<div class="inputlist" id="inputlist">
<div class="msg" id="msg">
<input type="text" id="js-local-text" />
</div>
<div class="username" id="username">
<input type="text" id="username-text" />
</div>
</div>
<div id="__ss_modal">
<div id="__ss_modal-dialog">
<p id="__ss_modal-dialog-text">スクリーンショットを表示しますか？</p>
<a id="__ss_modal-dialog-btn_open_ss" href="ss.html" target="_blank"
>表示</a
>
<button id="__ss_modal-dialog-btn_close">×</button>
</div>
</div>
<script src="//cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script>
<script type="text/javascript" src="https://heliodor.vketcdn.com/heliodor/common/latest/v1/data/heliodor_pre.js"></script>
<script type="text/javascript" src="https://heliodor.vketcdn.com/heliodor/common/latest/v1/data/heliodor_room.js"></script>
<script type="text/javascript" src="https://heliodor.vketcdn.com/heliodor/common/latest/v1/data/heliodor.js"></script>
<script type="text/javascript" src="https://heliodor.vketcdn.com/heliodor/common/latest/v1/data/heliodor_vketaccount.js"></script>
<script type="text/javascript" src="data/heliodor_front.js"></script>
<script type="text/javascript" src="https://heliodor.vketcdn.com/heliodor/common/latest/v1/data/heliodor_chatgpt.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript" src="https://heliodor.vketcdn.com/heliodor/common/latest/v1/data/heliodor_post.js"></script>
</body>
</html>