Skip to content

C
chat_webview
Commit 1a3ed19e by Lee Munkyeong
Options

Merge branch 'feature/develop_capture_photo_in_video_collaboration' into 'develop' 

Feature/develop capture photo in video collaboration

See merge request !134
parents 0d218888 6f3fe281
Showing with 191 additions and 13 deletions
public_new/collaboration.html
......@@ -125,7 +125,7 @@
</a>
</div>
</div>
<div class="d-flex align-items-center h-100 collaboration_contents video_contents">
<div class="d-flex align-items-center h-100 collaboration_contents video_contents_host">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap wide bg_blue" id="captureBtn">
......@@ -135,6 +135,16 @@
</a>
</div>
</div>
<div class="d-flex align-items-center h-100 collaboration_contents video_contents_user">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap wide bg_blue" id="captureRequestBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ">
<span>キャプチャリクエスト</span>
</div>
</a>
</div>
</div>
</div>
</footer>
<!-- フッター -->
......
public_new/css/collaboration.css
......@@ -397,6 +397,13 @@
text-align: center;
margin: 0 5px;
}
#captureRequestBtn {
width: fit-content !important;
padding-left: 10px;
padding-right: 10px;
}
#collabo_footer_menu .footer_menu_item .img_wrap.wide {
width: 140px;
height: 48px;
......
public_new/css/share.css
......@@ -28,6 +28,9 @@
width: 100%;
height: 100%;
}
.coview_on_media_btn_back {
display: none !important;
}
.coview_share_dropdown_bar{
display: none;
......
public_new/js/collaboration.js
......@@ -115,7 +115,11 @@ $(function () {
})
$('#captureBtn').click(function () {
$('#coviewCaptureCtrBtn').click();
coview_api.Capture(CMS_SERVER_URL + '/chatapi/file/uploadArchive');
})
$('#captureRequestBtn').click(function () {
fw.sendToMsg('others', 'CAPTURE_REQUEST', {"name": CHAT.globalLoginParameter.loginId});
})
$('#recordBtn').click(function () {
......
public_new/js/language_en.js
......@@ -93,5 +93,7 @@ $.lang.en = {
"collaboration_end":"collaboration end",
"notify_not_released" : "It will be released later.",
"error_empty_room_name" : "Please input room name.",
"inform_exit_host_collaboration" : "The host has terminated the collaboration."
"inform_exit_host_collaboration" : "The host has terminated the collaboration.",
"request_capture" : " request Screen capture.(if you confirm this request, capture the screen and change the host)",
"host_change_notify" : "host changed to %@"
}
public_new/js/language_ja.js
......@@ -93,5 +93,7 @@ $.lang.ja = {
"collaboration_end":"協業終了",
"notify_not_released" : "今後リリース予定です。",
"error_empty_room_name" : "ルーム名を入力してください。",
"inform_exit_host_collaboration" : "ホストが協業を終了しました。"
}
"inform_exit_host_collaboration" : "ホストが協業を終了しました。",
"request_capture" : "様がキャプチャーをリクエストしました。（確認時画面をキャプチャーし、ホストを変更します。）",
"host_change_notify" : "ホストが%@様に変更されました。"
}
\ No newline at end of file
public_new/js/language_ko.js
......@@ -93,5 +93,7 @@ $.lang.ko = {
"collaboration_end":"협업종료",
"notify_not_released" : "추후 공개예정입니다.",
"error_empty_room_name" : "룸명을 입력해주세요.",
"inform_exit_host_collaboration" : "호스트가 협업을 종료하였습니다."
"inform_exit_host_collaboration" : "호스트가 협업을 종료하였습니다.",
"request_capture" : "님이 화면캡처를 요청하셨습니다.(확인시 화면을캡처하고 호스트를 변경합니다.)",
"host_change_notify" : "호스트가 %@님으로 변경되었습니다."
}
public_new/js/share.js
......@@ -118,11 +118,6 @@ $(function () {
console.log("=============> READY : ready for coview api");
Coview_addLoginId(globalUserInfo.loginId);
coview_api.Login(globalUserInfo.loginId);
});
coview_api.addEventListener("start", function () {
console.log("=============> START : share start");
$("#loadingIndicator").removeClass("full_active");
fw.socket.on('message', async function(data) {
console.log('====> message::data: ', data);
if (data.type ==="CHANGE_COLLABORATION") {
......@@ -143,10 +138,67 @@ $(function () {
}
joinMeetingId = data.payload.newMeetingId;
}
} else if (data.type ==="SHARE_FILE") {
if (joinCollaborationType != collaborationType.CAMERA) {
initCollaborationUI(collaborationType.CAMERA);
joinCollaborationType = collaborationType.CAMERA;
fw.sendToMsg('others', 'SHARE_FILE_HOST', {"collaborationType": collaborationType.CAMERA});
}
} else if (data.type ==="SHARE_FILE_HOST") {
if (joinCollaborationType != collaborationType.CAMERA && g_isMainMan) {
initCollaborationUI(collaborationType.CAMERA);
joinCollaborationType = collaborationType.CAMERA;
}
} else if (data.type === "CAPTURE_REQUEST" && g_isMainMan) {
if (confirm(data.payload.name + getLocalizedString("request_capture"))) {
captureAndShareImage(CMS_SERVER_URL + '/chatapi/file/uploadArchive', data.payload.name);
}
} else if (data.type === "SEND_HOST_CHANGE_SIGNAL") {
if (g_username == data.payload.name) {
fw.sendToMsg('others', 'SEND_HOST_CHANGE_DONE_SIGNAL', {host: g_username});
$(".coview_on_media_image_crown").show();
$(".coview_on_screen_btn.owner").show();
$("#coviewShareMoreButton").show();
$(".coview_share_title_right_area").show();
g_isMainMan = true;
g_isMainManUsername = g_username;
options.constraints = { audio: true, video: true };
g_localStream = await createLocalVideo (options.constraints);
ChangeAgentStream(g_localStream);
$('[id^="video-"]').css('display','none');
SwitchMainVideoPosition("agent");
$("#localVideo").show();
$("#remotes").css("z-index", "0");
alert(getLocalizedString('host_change_notify', data.payload.name));
}
} else if (data.type === "SEND_HOST_CHANGE_DONE_SIGNAL") {
alert(getLocalizedString('host_change_notify', data.payload.host));
$(".coview_on_media_image_crown").hide();
$(".coview_on_screen_btn.owner").hide();
$(".coview_share_title_right_area").hide();
$("#localVideo").hide();
g_isMainMan = false;
g_isMainManUsername = data.payload.host;
var remoteVideoElID = "video-" + g_isMainManUsername;
$('[id^="video-"]').css('display','none');
$("#" + remoteVideoElID).removeAttr( 'style' );
$("#" + remoteVideoElID).css("width", "100%");
$("#" + remoteVideoElID).css("height", "100%");
$("#" + remoteVideoElID).css("position", "absolute");
$("#" + remoteVideoElID).css("bottom", "0px");
$("#" + remoteVideoElID).css("left", "0px");
$("#" + remoteVideoElID).css("display","");
$(".coview_memberList").removeClass("on");
$(".overlay").removeClass("active");
}
});
});
coview_api.addEventListener("start", function () {
console.log("=============> START : share start");
$("#loadingIndicator").removeClass("full_active");
});
coview_api.addEventListener("allbye", function () {
console.log("=============> ALL BYE : share allbye");
$("#loadingIndicator").removeClass("full_active");
......@@ -506,11 +558,19 @@ function hostSearchInterval() {
if (joinCollaborationType == collaborationType.CAMERA) {
$('.photo_select_button').removeClass('none');
}
if (joinCollaborationType == collaborationType.VIDEO) {
$('.video_contents_host').removeClass('none');
$('.video_contents_user').addClass('none');
}
} else {
$('.host_contents').addClass('none');
if (joinCollaborationType == collaborationType.CAMERA) {
$('.photo_select_button').addClass('none');
}
if (joinCollaborationType == collaborationType.VIDEO) {
$('.video_contents_user').removeClass('none');
$('.video_contents_host').addClass('none');
}
}
if (hostName != g_isMainManUsername) {
if (hostName != "") {
......@@ -531,5 +591,86 @@ function hostSearchInterval() {
}
}
}
timeInterval = setInterval(hostSearch, 3000);
timeInterval = setInterval(hostSearch, 2000);
}
function captureAndShareImage(urls, changeHostName) {
addCaptureEffect();
$(this).removeClass("on");
var w,h;
var video = document.getElementById("localVideo");
var canvas = document.createElement('canvas');
if (clientOrientaionState == 1) {
canvas.width = w = 680;
canvas.height = h = 515;
} else {
canvas.width = w = 386;
canvas.height = h = 515;
}
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
ctx.drawImage(document.getElementById("canvasRemote"), 0, 0, w, h);
}
canvas.toBlob(function(blob) {
var newImg = document.createElement('img')
var url = URL.createObjectURL(blob);
canvasRemote.style.backgroundImage = "url('"+ URL.createObjectURL(blob) + "')";
canvasRemote.style.backgroundSize = "contain";
$(canvasRemote).attr("height", $(snapshots[cpatureViewIndex]).attr("height"));
$(canvasRemote).attr("width", $(snapshots[cpatureViewIndex]).attr("width"));
console.log ('url', URL.createObjectURL(blob));
if ($(".canvas_wrap").css("width").replace("px","") / $(".canvas_wrap").css("height").replace("px","") < $(canvas).attr("width") / $(canvas).attr("height")) {
var h = $(".canvas_wrap").css("width").replace("px","") * ($(canvas).attr("height") / $(canvas).attr("width"));
var w = $(".canvas_wrap").css("width").replace("px","");
$(canvasRemote).css("height", h);
$(canvasRemote).css("width", w);
$(canvasRemote).css("margin-top", (-h/2));
$(canvasRemote).css("margin-left", (-w/2));
} else {
var h = $(".canvas_wrap").css("height").replace("px","");
var w = $(".canvas_wrap").css("height").replace("px","") / ($(canvas).attr("height") / $(canvas).attr("width"));
$(canvasRemote).css("height", h);
$(canvasRemote).css("width", w);
$(canvasRemote).css("margin-top", (-h/2));
$(canvasRemote).css("margin-left", (-w/2));
}
$(".canvas_wrap").css("background-color", "#000");
$(".clear_img").show();
SetShareMenuState("on");
WithImageShareBtnState("on");
//Fermi側にイメージ保存。
var formData = new FormData();
var uploadFileName = "capture_share_" + g_webroom + "_" + g_shareCount + ".png"
g_shareCount++;
formData.append("imgFile", blob, uploadFileName);
var uploadUrl = location.protocol + "//" + location.hostname + ":" + location.port + "/upload/create";
if (!location.port) {
uploadUrl = location.protocol + "//" + location.hostname + "/upload/create";
}
$.ajax({
type: 'post',
url: g_coviewapiserverADDR + "/upload/create",
data: formData,
processData: false,
contentType: false,
success: function(res) {
setTimeout(function() {
SendFileShare(uploadFileName);
$("#coviewCaptureCtrBtn").hide();
$("#coviewRecCtrBtn").hide();
$(".coview_share_title_name").text("LIVE(CAPTURE IMAGE)");
$(".coview_on_media_btn_back").show();
//アーカイブ保存。
ArchiveFileManage(blob,uploadFileName,urls);
fw.sendToMsg('others', 'SEND_HOST_CHANGE_SIGNAL', {"name": changeHostName});
}, 1500);
},
error: function(err) {
console.log(err);
}
});
});
}
\ No newline at end of file
public_new/modal_chat_menu.html
......@@ -13,7 +13,7 @@
<li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a>
</li>
<li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li>
<li ><a href="javascript:return false;" onclick="CHAT_UI.roomDisplayOff();"><img src="icon/icon_chat_gray.png" alt="ユーザー招待">部屋非表示</a></li>
<li ><a href="javascript:return false;" onclick="CHAT_UI.roomDisplayOff();"><img src="icon/icon_display_off_chatroom.png" alt="ユーザー招待">部屋非表示</a></li>
</ul>
</div>
</div>
......
public_new/template/template_open_collaboration_message.html
......@@ -29,7 +29,12 @@
<div class="collabo_btn">
<button type="button" name="button" onclick="CHAT_UI.joinCollaboration({{collaborationType}}, {{meetingId}})" {{#isEnded}} disabled {{/isEnded}}>
<img src="icon/icon_profile_phone.png" alt="通話">
{{#isEnded}}
<span>終了しました</span>
{{/isEnded}}
{{^isEnded}}
<span>参加する</span>
{{/isEnded}}
</button>
</div>
</div>
......
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