動画エンコード実装

public_new/js/chat-ui.js

@@ -825,49 +825,90 @@ CHAT_UI.deleteButtonAction = function(isInvite) {
     CHAT_UI.showConfirmView(isInvite)
     $('#select_user_list .user_list').find('.userCheckBox').show();
 }
+var GetFileBlobUsingURL = function (url, convertBlob) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", url);
+        xhr.responseType = "blob";
+        xhr.addEventListener('load', function() {
+            console.log(xhr.response);
+            convertBlob(xhr.response);
+        });
+        xhr.send();
+};
+var blobToFile = function (blob, name) {
+        blob.lastModifiedDate = new Date();
+        blob.name = name;
+        return blob;
+};
+var GetFileObjectFromURL = function(filePathOrUrl, convertBlob) {
+       GetFileBlobUsingURL(filePathOrUrl, function (blob) {
+          convertBlob(blobToFile(blob, 'testFile.mp4'));
+       });
+};
 
 CHAT_UI.videoEncodeEnd = function(encodedUri) {
   console.log('encode end');
-  console.log(encodedUri);
-
-  // convert base64 to raw binary data held in a string
-  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
-  var byteString = atob(encodedUri.split(',')[1]);
-
-  // separate out the mime component
-  var mimeString = encodedUri.split(',')[0].split(':')[1].split(';')[0]
-
-  // write the bytes of the string to an ArrayBuffer
-  var ab = new ArrayBuffer(byteString.length);
-
-  // create a view into the buffer
-  var ia = new Uint8Array(ab);
-
-  // set the bytes of the buffer to the correct values
-  for (var i = 0; i < byteString.length; i++) {
-      ia[i] = byteString.charCodeAt(i);
-  }
-
-  // write the ArrayBuffer to a blob, and you're done
-  var blob = new Blob([ab], {type: "video/mp4"});
-  console.log(blob);
-  var formData=new FormData();
-  /*formData.append("fileData",blob,uploadFileName);
-  formData.append('sid', globalUserInfo.sid);
-  formData.append('roomId',  globalUserInfo.roomId);*/
-
-  CHAT_UI.dismissLoadingIndicator();
-   /* var path = CHAT_DB.loadEncodedFile();
-    var file = $('#videoInputTag');
-    file = path;
-    if (file) {
-        var fd = new FormData($('#video-form')[0]);
-//        var requestFile = RequestBody.create(MediaType.parse("video/mp4"), file)
-//        var fd = new FormData($('#video-form')[0]);
-//        console.log("kdh check requestFile = " + requestFile);
-        CHAT.uploadImage(fd);
-        return;
-    }*/
+  console.log('file:'+encodedUri);
+  var fileName = encodedUri.split('/')[encodedUri.split('/').length-1];
+  //var testFile = new File(decodeURI('file://'+encodedUri));
+  var FileURL='file:'+encodedUri;
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", FileURL);
+  xhr.responseType = "blob";
+  xhr.addEventListener('load', function() {
+      console.log(xhr.response);
+      var formData=new FormData();
+      formData.append("image", xhr.response, fileName);
+      formData.append('sid', CHAT.globalLoginParameter.sid);
+      formData.append('roomId',  CHAT.globalLoginParameter.roomId);
+      jQuery.ajax({
+          async: true,
+          url:    CMS_SERVER_URL+"/chatapi/file/upload",
+          type: "post",
+          data: formData,
+          contentType: false,
+          processData: false,
+          error: function () {
+              alert("読み込み失敗");
+              CHAT_UI.dismissLoadingIndicator();
+          }
+      }).done(function(res) {
+          var imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
+          var imageName = res.fileName
+
+          // uploadFileの判断
+          var extension = imageName.substr(imageName.lastIndexOf('.') + 1).toLowerCase();
+
+          if (res.thumbnailPath && res.thumbnailPath.length > 0) {
+              imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
+          }
+          let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.room
+          var videoSrc = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
+          const totalDiv = $('<div/>', {id:"attachedImages"});
+          const videoTag = $('<video/>', {controls:"true", width:'auto', style:'max-width:100%'});
+          const source = $('<source/>', {src:videoSrc});
+          const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName
+          videoTag.append(source);
+          totalDiv.append(videoTag);
+          totalDiv.append(downloadIco
+          let text = totalDiv.prop('outerHTML');
+          let encodedText
+          try {
+              encodedText = encodeURIComponent(text)
+          } catch(e) {
+              encodedText = text;
+          }
+          socket.emit('createMessage', {
+              text: encodedText + messageSeperator + messageType.VIDEO
+          }, 1);
+
+
+          $('.overlay').removeClass('active undismissable');
+          $('.loader').removeClass('active');
+          CHAT_UI.dismissLoadingIndicator();
+      })
+  });
+  xhr.send();
 };