Skip to content

C
chat_webview
Commit 2db7333a by Lee Munkyeong
Options

動画、音声協業実装

parent 4811d860
Showing with 200 additions and 47 deletions
public_new/collaboration_video.html
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
<link rel="stylesheet" href="./css/collaboration.css"> <link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/share.css">
</head> </head>
<body> <body>
...@@ -35,14 +36,24 @@ ...@@ -35,14 +36,24 @@
</header><!-- header --> </header><!-- header -->
<!-- 拡大縮小機能 --> <!-- 拡大縮小機能 -->
<!--#include virtual="zoom.html" --> <div id="zoom"></div>
<!-- コンテンツ --> <!-- コンテンツ -->
<main id="collabo_main"> <main id="collabo_main" class="none">
<div class="document_wrap"> <div class="document_wrap">
<div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
</div>
</div> </div>
</main> </main>
<div class="coview_share_photo_select_bubble none">
<button id="coviewSharePhotoCamera" class="coview_share_photo_select_bubble_in_button cam">
</button>
<BR>
<button id="coviewSharePhotoGalary" class="coview_share_photo_select_bubble_in_button gal">
</button>
</div>
<!-- ユーザー追加オーバーレイ --> <!-- ユーザー追加オーバーレイ -->
<div id="overlay_add_user_list" class="none"> <div id="overlay_add_user_list" class="none">
<nav> <nav>
...@@ -77,25 +88,21 @@ ...@@ -77,25 +88,21 @@
</div> </div>
<!-- オーバーレイ　メニュー --> <!-- オーバーレイ　メニュー -->
<!--#include virtual="collaboration_video_overlay_menu.html" --> <div id="collaboration_picture_overlay_menu"></div>
<!-- オーバーレイ　ユーザーリスト --> <!-- オーバーレイ　ユーザーリスト -->
<div id="overlay_user_list" class="overlay noscroll"> <div id="overlay_user_list" class="overlay noscroll">
<!--#include virtual="collabotarion_overlay_user_list.html" --> <div id="collabotarion_overlay_user_list"></div>
</div> </div>
<!-- キャプチャ　モーダル --> <!-- キャプチャ　モーダル -->
<!--#include virtual="modal_collabo_capture.html" --> <div id="modal_collabo_capture"></div>
<!-- プロフィールモーダル --> <!-- プロフィールモーダル -->
<!--#include virtual="modal_collabo_profile.html" --> <div id="modal_collabo_profile"></div>
<!--#include virtual="modal_collabo_profile2.html" --> <div id="modal_collabo_profile2"></div>
<!-- ホスト変更モーダル --> <!-- ホスト変更モーダル -->
<!--#include virtual="modal_collabo_change_host.html" --> <div id="modal_collabo_change_host"></div>
<!-- ホストリクエストモーダル --> <!-- ホストリクエストモーダル -->
<!--#include virtual="modal_collabo_host_request.html" --> <div id="modal_collabo_host_request"></div>
<!-- フッター --> <!-- フッター -->
<footer id="collabo_footer_menu" class="active"> <footer id="collabo_footer_menu" class="active">
...@@ -104,7 +111,7 @@ ...@@ -104,7 +111,7 @@
<div class="d-flex align-items-center h-100"> <div class="d-flex align-items-center h-100">
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue"> <div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン"> <img src="icon/icon_collabo_pen_white.png" alt="ペン">
</div> </div>
</a> </a>
...@@ -118,7 +125,7 @@ ...@@ -118,7 +125,7 @@
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue"> <div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除"> <img src="icon/icon_collabo_delete_white.png" alt="削除">
</div> </div>
</a> </a>
...@@ -126,8 +133,9 @@ ...@@ -126,8 +133,9 @@
</div> </div>
<div class="d-flex align-items-center h-100"> <div class="d-flex align-items-center h-100">
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#" data-toggle="modal" data-target="#captyaModal"> <!-- <a href="#" data-toggle="modal" data-target="#captyaModal">-->
<div class="img_wrap wide bg_blue"> <a href="#">
<div class="img_wrap wide bg_blue" id="captureBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ"> <img src="icon/icon_collabo_capture.png" alt="キャプチャ">
<span>キャプチャ</span> <span>キャプチャ</span>
</div> </div>
...@@ -137,15 +145,72 @@ ...@@ -137,15 +145,72 @@
</div> </div>
</footer> </footer>
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <div id="footer_collabo"></div>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/constant.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
<script src="./js/common.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/chat-websocket.js"></script>
<script src="https://app.coview.co.kr:7443/coview_api.js"></script>
<script src="./js/share.js"></script>
</body> </body>
<script>
$("#footer_collabo").load("./footer_collabo.html");
$("#modal_collabo_host_request").load("./modal_collabo_host_request.html");
$("#modal_collabo_change_host").load("./modal_collabo_change_host.html");
$("#modal_collabo_profile2").load("./modal_collabo_profile2.html");
$("#modal_collabo_profile").load("./modal_collabo_profile.html");
$("#modal_collabo_capture").load("./modal_collabo_capture.html");
$("#collabotarion_overlay_user_list").load("./collabotarion_overlay_user_list.html");
$("#collaboration_picture_overlay_menu").load("./collaboration_picture_overlay_menu.html");
$("#zoom").load("./zoom.html");
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
let collaborationJoinFlg = 0;
if (typeof(android) != "undefined") {
android.getLoginParameter();
android.getGlobalParameter();
} else {
}
async function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
if (CHAT_UTIL.isIOS()) {
} else if (CHAT_UTIL.isAndroid()) {
collaborationJoinFlg = android.getCollaborationJoinFlg();
console.log(collaborationJoinFlg);
}
globalUserInfo.coWorkType = collaborationTypeKey.VIDEO;
CHAT_SOCKET.connectSocket();
socket.emit('join', CHAT.globalLoginParameter, function() {
});
};
</script>
</html> </html>
\ No newline at end of file
public_new/collaboration_voice.html
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
<link rel="stylesheet" href="./css/collaboration.css"> <link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/share.css">
</head> </head>
<body> <body>
...@@ -35,7 +36,11 @@ ...@@ -35,7 +36,11 @@
<!-- コンテンツ --> <!-- コンテンツ -->
<main id="collabo_main"> <main id="collabo_main">
<!--#include virtual="collabotarion_overlay_user_list.html" --> <div class="document_wrap">
<div class="coview_share_body coview_share_area" id="coviewShare" style="z-index: 1;">
</div>
</div>
<!-- <div id="collabotarion_overlay_user_list"></div>-->
</main> </main>
<!-- ユーザー追加オーバーレイ --> <!-- ユーザー追加オーバーレイ -->
...@@ -72,31 +77,90 @@ ...@@ -72,31 +77,90 @@
</div> </div>
<!-- オーバーレイ　メニュー --> <!-- オーバーレイ　メニュー -->
<!--#include virtual="collaboration_voice_overlay_menu.html" --> <div id="collaboration_voice_overlay_menu"></div>
<!-- キャプチャ　モーダル --> <!-- キャプチャ　モーダル -->
<!--#include virtual="modal_collabo_capture.html" --> <div id="modal_collabo_capture"></div>
<!-- プロフィールモーダル --> <!-- プロフィールモーダル -->
<!--#include virtual="modal_collabo_profile.html" --> <div id="modal_collabo_profile"></div>
<!--#include virtual="modal_collabo_profile2.html" --> <div id="modal_collabo_profile2"></div>
<!-- ホスト変更モーダル --> <!-- ホスト変更モーダル -->
<!--#include virtual="modal_collabo_change_host.html" --> <div id="modal_collabo_change_host"></div>
<!-- ホストリクエストモーダル --> <!-- ホストリクエストモーダル -->
<!--#include virtual="modal_collabo_host_request.html" --> <div id="modal_collabo_host_request"></div>
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <div id="footer_collabo"></div>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/constant.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
<script src="./js/common.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/chat-websocket.js"></script>
<script src="https://app.coview.co.kr:7443/coview_api.js"></script>
<script src="./js/share.js"></script>
<script>
$("#footer_collabo").load("./footer_collabo.html");
$("#modal_collabo_host_request").load("./modal_collabo_host_request.html");
$("#modal_collabo_change_host").load("./modal_collabo_change_host.html");
$("#modal_collabo_profile2").load("./modal_collabo_profile2.html");
$("#modal_collabo_profile").load("./modal_collabo_profile.html");
$("#modal_collabo_capture").load("./modal_collabo_capture.html");
$("#collabotarion_overlay_user_list").load("./collabotarion_overlay_user_list.html");
$("#collaboration_picture_overlay_menu").load("./collaboration_picture_overlay_menu.html");
$("#zoom").load("./zoom.html");
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
let collaborationJoinFlg = 0;
if (typeof(android) != "undefined") {
android.getLoginParameter();
android.getGlobalParameter();
} else {
}
async function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
if (CHAT_UTIL.isIOS()) {
} else if (CHAT_UTIL.isAndroid()) {
collaborationJoinFlg = android.getCollaborationJoinFlg();
console.log(collaborationJoinFlg);
}
globalUserInfo.coWorkType = collaborationTypeKey.AUDIO;
CHAT_SOCKET.connectSocket();
socket.emit('join', CHAT.globalLoginParameter, function() {
});
};
</script>
</body> </body>
</html> </html>
\ No newline at end of file
public_new/css/chat.css
...@@ -603,6 +603,7 @@ input[name="tab_item"] { ...@@ -603,6 +603,7 @@ input[name="tab_item"] {
/* 自分の会話 */ /* 自分の会話 */
.room_right { .room_right {
margin-left: 40%;
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 75%; max-width: 75%;
......
public_new/css/share.css
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
.coview_share_area{ .coview_share_area{
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -147,4 +146,11 @@ ...@@ -147,4 +146,11 @@
.coview_on_screen_btn_area { .coview_on_screen_btn_area {
display: none; !important; display: none; !important;
} }
\ No newline at end of file .coview_on_media_btn_back {
top: 70px !important;
}
#localVideo {
top: 0px !important;
}
public_new/footer_collabo.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_gray"> <div class="img_wrap bg_gray" id="recordBtn">
<img src="icon/icon_record.png" alt="録音"> <img src="icon/icon_record.png" alt="録音">
</div> </div>
</a> </a>
......
public_new/js/chat-util.js
...@@ -103,11 +103,10 @@ function msToTime(s) { ...@@ -103,11 +103,10 @@ function msToTime(s) {
function updateDuration() { function updateDuration() {
var now = new Date(); var now = new Date();
console.log('updateDuration'); $('.collaboration_duration').each(function(index, item) {
$('.collaboration_duration').each(function() { console.log(now);
var insertDateString = $(this).data('insertdate'); var insertDateString = $(item).data('insertdate');
insertDateString = insertDateString.toString(); insertDateString = insertDateString.toString();
var insertDateString = "20210414103256";
var year = insertDateString.substring(0,4); var year = insertDateString.substring(0,4);
var month = insertDateString.substring(4,6); var month = insertDateString.substring(4,6);
var day = insertDateString.substring(6,8); var day = insertDateString.substring(6,8);
...@@ -115,7 +114,8 @@ function updateDuration() { ...@@ -115,7 +114,8 @@ function updateDuration() {
var min = insertDateString.substring(10,12); var min = insertDateString.substring(10,12);
var sec = insertDateString.substring(12,14); var sec = insertDateString.substring(12,14);
var insertDate = new Date(year, month-1 , day, hour, min, sec); var insertDate = new Date(year, month-1 , day, hour, min, sec);
$(this).html(msToTime(now - insertDate)); console.log(insertDate);
$(item).html(msToTime(now - insertDate));
}); });
} }
......
public_new/js/collaboration.js
...@@ -111,8 +111,23 @@ $(function () { ...@@ -111,8 +111,23 @@ $(function () {
$('#micBtn').removeClass('bg_red'); $('#micBtn').removeClass('bg_red');
$('#micBtn').addClass('bg_blue'); $('#micBtn').addClass('bg_blue');
} else { } else {
$('#micBtn').addClass('bg_red');
$('#micBtn').removeClass('bg_blue'); $('#micBtn').removeClass('bg_blue');
$('#micBtn').addClass('bg_red');
} }
}) })
$('#captureBtn').click(function () {
$('#coviewCaptureCtrBtn').click();
})
$('#recordBtn').click(function () {
$('#coviewRecCtrBtn').click();
if ($('#recordBtn').hasClass('bg_gray')) {
$('#recordBtn').removeClass('bg_gray');
$('#recordBtn').addClass('bg_red');
} else {
$('#recordBtn').addClass('bg_gray');
$('#recordBtn').removeClass('bg_red');
}
})
}); });
public_new/js/share.js
...@@ -151,14 +151,15 @@ $(function(){ ...@@ -151,14 +151,15 @@ $(function(){
switch (json.api){ switch (json.api){
case "LoginResponse": case "LoginResponse":
if(globalUserInfo.coWorkType = collaborationTypeKey.CAMERA) { console.log('------------------------------');
if (collaborationJoinFlg == '1') { console.log(globalUserInfo.coWorkType);
coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); console.log(collaborationJoinFlg);
} else if (collaborationJoinFlg == '0') { if (collaborationJoinFlg == '1') {
coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType); coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
} } else if (collaborationJoinFlg == '0') {
Coview_moveToVideoShareArea(); coview_api.CreateRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
} }
Coview_moveToVideoShareArea();
break; break;
case "CreateRoomResponse": case "CreateRoomResponse":
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment