@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/media/VCRoomRecorder.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+
+var _VCEventType = require("./VCEventType");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class VCRoomRecorder {
+  constructor() {
+    _defineProperty(this, "init", async (meetingId, meetingTitle) => {
+      this.meetingId = meetingId;
+      this.meetingTitle = meetingTitle;
+    });
+
+    _defineProperty(this, "addTrack", (id, track) => {
+      console.log('ADDING TRACK FOR : ' + id);
+      this.audioTracks.set(id, track);
+
+      if (this.recorder && this.recorder.state === 'recording') {
+        let mediaStream = new MediaStream([track]);
+        const mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(this.audioContext, {
+          mediaStream: mediaStream
+        });
+        mediaStreamAudioSourceNode.connect(this.mediaStreamAudioDestinationNode);
+      }
+    });
+
+    _defineProperty(this, "removeTrack", id => {
+      if (this.audioTracks.has(id)) {
+        this.audioTracks.delete(id);
+      }
+    });
+
+    _defineProperty(this, "handleRecordingDataAvailable", e => {
+      if (e.data.size > 0) {
+        console.log('ADDED CHUNK : ' + this.recordingSequence);
+        const blob = new Blob([e.data], {
+          type: 'video/webm'
+        });
+        const data = {
+          userId: sessionStorage.getItem('username'),
+          meetingId: this.meetingId,
+          name: this.meetingTitle,
+          type: blob.type,
+          size: blob.size,
+          sequenceNumber: this.recordingSequence,
+          sessionId: this.currentRecordingId
+        };
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+
+        let _this = this;
+
+        reader.onload = function (evt) {
+          const result = evt.target.result;
+          _this.recordingType = blob.type;
+          _this.recordingSize += blob.size;
+          data.recordedData = result.replace('data:video/webm;base64,', '');
+          console.log('======== SAVING RECORDING CHUNK =========');
+          console.log(data);
+
+          _SocketManager.default.emitEvent(_VCEventType.VCEventType.SAVE_RECORDING, data).then(data => {
+            console.log('===== SAVE RECORDING SUCCESS ======');
+
+            if (!_this.isRecording) {
+              console.log('======= STOPPING RECORDING =======', _this.meetingTitle);
+              const data = {
+                meetingId: _this.meetingId,
+                userId: sessionStorage.getItem("username"),
+                name: _this.meetingTitle,
+                type: _this.recordingType,
+                size: _this.recordingSize,
+                sequenceNumber: _this.recordingSequence,
+                sessionId: _this.currentRecordingId
+              };
+
+              _SocketManager.default.emitEvent(_VCEventType.VCEventType.STOP_RECORDING, data).catch(error => {});
+            }
+          }).catch(error => {
+            console.log('===== SAVE RECORDING ERROR ======');
+          });
+        };
+
+        _this.recordingSequence++;
+      } else {
+        console.log('no data to push');
+      }
+    });
+
+    _defineProperty(this, "recordMeeting", async () => {
+      this.recorder = null;
+
+      try {
+        this.recorder = await this.createMediaRecorder();
+      } catch (e) {}
+
+      let _this = this;
+
+      if (this.recorder != null) {
+        _SocketManager.default.emitEvent(_VCEventType.VCEventType.TOGGLE_RECORD_MEETING, {
+          roomId: _this.meetingId,
+          isRecording: true
+        }).then(data => {
+          console.log('RECORDING STARTED : ' + data.id);
+          _this.currentRecordingId = data.id;
+          _this.recordingSequence = 0;
+          _this.recordingSize = 0;
+          _this.recordingType = '';
+
+          _this.recorder.start(60000);
+
+          _this.isRecording = true;
+        }).catch(error => {
+          console.log('RECORD START ERROR');
+          console.log(error);
+        });
+      }
+    });
+
+    _defineProperty(this, "stopRecordingMeeting", () => {
+      try {
+        this.isRecording = false;
+
+        _SocketManager.default.emitEvent(_VCEventType.VCEventType.TOGGLE_RECORD_MEETING, {
+          roomId: this.meetingId,
+          isRecording: false
+        }).catch(error => {});
+
+        if (this.recorder && this.recorder.stream) {
+          if (this.recorder.stream.getVideoTracks().length > 0) {
+            this.recorder.stream.getVideoTracks()[0].stop();
+          }
+
+          if (this.recorder.state === 'recording') {
+            this.recorder.stop();
+          }
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    });
+
+    _defineProperty(this, "createMediaRecorder", () => {
+      return new Promise((resolve, reject) => {
+        const videoConstraints = {
+          cursor: true,
+          audio: false,
+          mediaSource: "screen",
+          preferCurrentTab: true,
+          selfBrowserSurface: 'include',
+          systemAudio: 'exclude',
+          surfaceSwitching: 'exclude',
+          monitorTypeSurfaces: 'exclude'
+        };
+
+        let _this = this;
+
+        navigator.mediaDevices.getDisplayMedia(videoConstraints).then(stream => {
+          const options = {
+            mimeType: 'video/webm; codecs=vp9'
+          };
+          let audioContext = new AudioContext();
+          let mediaStreamAudioDestinationNode = new MediaStreamAudioDestinationNode(audioContext);
+          let tracks = [mediaStreamAudioDestinationNode.stream.getAudioTracks()[0], stream.getVideoTracks()[0]];
+
+          if (this.audioTracks.size > 0) {
+            for (const value of this.audioTracks.values()) {
+              tracks.push(value);
+              let mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, {
+                mediaStream: new MediaStream([value])
+              });
+              mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);
+            }
+          } else {
+            let mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, {
+              mediaStream: new MediaStream(tracks)
+            });
+            mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);
+          }
+
+          console.log('INIT WITH TRACKS : ', tracks);
+          let initialMediaStream = new MediaStream(tracks);
+          const recorder = new MediaRecorder(initialMediaStream, options);
+          recorder.ondataavailable = _this.handleRecordingDataAvailable;
+
+          recorder.onstop = e => {
+            _this.isRecording = false;
+          };
+
+          this.audioContext = audioContext;
+          this.mediaStreamAudioDestinationNode = mediaStreamAudioDestinationNode;
+          resolve(recorder);
+        }).catch(e => {
+          console.error(e);
+          reject(new Error(e.message));
+        });
+      });
+    });
+
+    this.meetingId = null;
+    this.meetingTitle = '';
+    this.recordingSequence = 0;
+    this.currentRecordingId = null;
+    this.recordingType = null;
+    this.recordingSize = null;
+    this.isRecording = false;
+    this.recorder = null;
+    this.audioTracks = new Map();
+  }
+
+}
+
+const instance = new VCRoomRecorder();
+var _default = instance;
+exports.default = _default;

package/dist/components/media/VCRoomWorkspace.css

@@ -0,0 +1,86 @@
+.grid,
+.grid .item {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  height: 100%;
+  width: 100%;
+}
+
+.share-screen-video {
+  height: 100%;
+  width: 100%;
+  z-index: 0;
+}
+
+.content-box {
+  height: calc(100% - 232px);
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.grid .item {
+  display: flex;
+}
+
+.grid {
+  height: calc(100% - 16px);
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.grid-side-bar {
+  width: 320px;
+  margin: 4px 12px !important;
+  max-height: 90%;
+  overflow: auto;
+}
+
+.side-grid-item {
+  height: 200px;
+  max-height: 200px;
+  border-bottom: 16px solid #000000;
+}
+
+.grid-side-bar .side-grid-item:last-child {
+  border-bottom: unset;
+}
+
+.horizontal-scrollable > .row {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.horizontal-scrollable > .row > .col-xs-4 {
+  display: inline-block;
+  float: none;
+}
+/* Decorations */
+
+.col-xs-4 {
+  color: white;
+  font-size: 24px;
+  padding-bottom: 20px;
+  padding-top: 18px;
+}
+
+.col-xs-4:nth-child(2n+1) {
+  background: green;
+}
+
+.col-xs-4:nth-child(2n+2) {
+  background: black;
+}
+
+@media (max-device-width: 820px) {
+  .meetingParticipantContainer {
+    min-width: 100% !important;
+  }
+}
+
+@media (max-width: 820px) {
+  .meetingParticipantContainer {
+    min-width: 100% !important;
+  }
+}