キャプチャー機能実装

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/js/language_en.js

@@ -94,5 +94,6 @@ $.lang.en = {
     "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.",
-    "request_capture" : " request Screen capture.(if you confirm this request, capture the screen and change the host)"
+    "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

@@ -94,5 +94,6 @@ $.lang.ja = {
     "notify_not_released" : "今後リリース予定です。",
     "error_empty_room_name" : "ルーム名を入力してください。",
     "inform_exit_host_collaboration" : "ホストが協業を終了しました。",
-    "request_capture" : "様がキャプチャーをリクエストしました。（確認時画面をキャプチャーし、ホストを変更します。）"
-}
+    "request_capture" : "様がキャプチャーをリクエストしました。（確認時画面をキャプチャーし、ホストを変更します。）",
+    "host_change_notify" : "ホストが%@様に変更されました。"
+}
\ No newline at end of file

public_new/js/language_ko.js

@@ -94,5 +94,6 @@ $.lang.ko = {
     "notify_not_released" : "추후 공개예정입니다.",
     "error_empty_room_name" : "룸명을 입력해주세요.",
     "inform_exit_host_collaboration" : "호스트가 협업을 종료하였습니다.",
-    "request_capture" : "님이 화면캡처를 요청하셨습니다.(확인시 화면을캡처하고 호스트를 변경합니다.)"
+    "request_capture" : "님이 화면캡처를 요청하셨습니다.(확인시 화면을캡처하고 호스트를 변경합니다.)",
+    "host_change_notify" : "호스트가 %@님으로 변경되었습니다."
 }

public_new/js/share.js

@@ -138,25 +138,59 @@ $(function () {
           }
           joinMeetingId = data.payload.newMeetingId;
         }
-      }
-      if (data.type ==="SHARE_FILE") {
+      } 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});
         }
-      }
-      if (data.type ==="SHARE_FILE_HOST") {
+      } else if (data.type ==="SHARE_FILE_HOST") {
         if (joinCollaborationType != collaborationType.CAMERA && g_isMainMan) {
           initCollaborationUI(collaborationType.CAMERA);
           joinCollaborationType = collaborationType.CAMERA;
         }
-      }
-
-      if (data.type === "CAPTURE_REQUEST" && g_isMainMan) {
+      } else if (data.type === "CAPTURE_REQUEST" && g_isMainMan) {
         if (confirm(data.payload.name + getLocalizedString("request_capture"))) {
-          coview_api.Capture(CMS_SERVER_URL + '/chatapi/file/uploadArchive');
+          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;
+		  //g_agentID = 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");
       }
     });
   });
@@ -559,4 +593,85 @@ function hostSearchInterval() {
     }
   }
   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/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>