proctoring 2.0.2

data/app/assets/javascripts/proctoring/stream_channel.js

@@ -0,0 +1,66 @@
+let channelElm = document.getElementById('channel-data');
+navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;
+let connection = new RTCMultiConnection();
+connection.socketURL = channelElm.dataset.mediaServerUrl;
+
+connection.session = {
+  audio: false,
+  video: true
+};
+
+connection.sdpConstraints.mandatory = {
+  OfferToReceiveAudio: false,
+  OfferToReceiveVideo: true
+};
+
+connection.extra = {
+  userType: 'proctor',
+};
+
+connection.onstream = function(event) {
+  const video = event.mediaElement;
+  if(event && event.userid) {
+    if(event.extra && event.extra.userType === 'proctor') {
+      return;
+    }
+    video.id = event.userid;
+    const videoContainer = document.getElementById('video-container');
+    const userVideoElm = document.getElementById(event.userid);
+    if(userVideoElm) {
+      userVideoElm.parentNode.removeChild(userVideoElm);
+    }
+    videoContainer.querySelector(".video-div").prepend(video);
+    const statusElm = videoContainer.querySelector('.video-status');
+    statusElm.innerHTML = `Status: ${event.status}`;
+  }
+};
+connection.onUserStatusChanged = function (event) {
+  const userVideoElm = document.getElementById(event.userid);
+  if (userVideoElm && event && event.status) {
+    userVideoElm.parentElement.style.backgroundColor =
+      event.status === "online" ? "#34A853" : "#EA4335";
+    const status = document.getElementById(`video-status-${event.userid}`);
+    if (status && event.status) status.innerHTML = `Status: ${event.status}`;
+  }
+}
+
+connection.onstreamended = function(event) {
+  let video = document.getElementById(event.userid);
+  if (video && video.parentNode) {
+    video.parentNode.removeChild(video);
+  }
+};
+
+
+let url = new URL(window.location);
+let channel = channelElm.dataset.channel;
+if (channel) {
+  connection.dontCaptureUserMedia = true;
+  navigator.getUserMedia({
+      video: true,
+      audio: false
+  }, function(externalStream) {
+      connection.attachStreams = [externalStream];
+      connection.openOrJoin(channel);
+  }, function(error) {});
+}

data/app/assets/javascripts/proctoring/stream_room.js

@@ -0,0 +1,131 @@
+navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia;
+const channelDiv = document.getElementById("channel-data");
+let connection = new RTCMultiConnection();
+connection.socketURL = `https://${channelDiv.dataset.mediaServerUrl}/`;
+var listOfRecorders = {};
+
+connection.session = {
+  audio: false,
+  video: true
+};
+
+connection.sdpConstraints.mandatory = {
+  OfferToReceiveAudio: false,
+  OfferToReceiveVideo: true
+};
+
+// connection.setUserPreferences = function(userPreferences) {
+//   userPreferences.dontAttachLocalStream = true;
+//   return userPreferences;
+// };
+
+connection.onstream = function(event) {
+  if(event && event.userid) {
+     if (event.extra && event.extra.userType === "proctor") {
+       return;
+     }
+    const userVideoElm = document.getElementById(event.userid);
+    if (userVideoElm) {
+      userVideoElm.parentNode.removeChild(userVideoElm);
+    }
+    const videoContainer = document.getElementById('video-container');
+    let div = document.createElement('div');
+    div.id = event.userid;
+    div.className = 'video-div';
+    div.appendChild(event.mediaElement); // appending VIDOE to DIV
+
+    let h2 = document.createElement('h4');
+    h2.innerHTML = `UserID: ${event.extra.userId}`;
+    div.appendChild(h2);
+
+    let pElm = document.createElement('p');
+    pElm.id = `video-status-${event.userid}`;
+    pElm.innerHTML = `Status: ${event.status}`;
+    div.appendChild(pElm);
+
+    let pElm2 = document.createElement('p');
+    pElm2.id = `video-recording-status-${event.userid}`;
+    pElm2.innerHTML = `Status: Recording...`;
+    div.appendChild(pElm2);
+
+    let button = document.createElement('button');
+    button.id = `video-recording-stop-${event.userid}`;
+    button.dataset = { userid: event.userid };
+    button.style.color = '#000';
+    button.innerHTML = `Stop Recording`;
+    div.appendChild(button);
+
+    div.style.backgroundColor = '#34A853';
+    div.style.textAlign = 'center';
+    div.style.color = '#fff';
+
+    videoContainer.appendChild(div);
+
+
+    /** Recording **/
+    let recorder = RecordRTC(event.stream, {
+      type: 'video',
+      recorderType: MediaStreamRecorder
+    });
+
+    recorder.startRecording();
+
+    listOfRecorders[event.userid] = recorder;
+
+    console.log(button);
+
+    button.addEventListener("click", function(){
+      let streamid = event.userid;
+
+      if(!listOfRecorders[streamid]) throw 'Wrong stream-id';
+
+      let recorder = listOfRecorders[streamid];
+      recorder.stopRecording(function() {
+        let blob = recorder.getBlob();
+        invokeSaveAsDialog(blob);
+        // window.open( URL.createObjectURL(blob) );
+        // or upload to server
+        // var formData = new FormData();
+        // formData.append('file', blob);
+        // $.post('/server-address', formData, serverCallback);
+      });
+    });
+  }
+};
+connection.onUserStatusChanged = function (event) {
+  const userVideoElm = document.getElementById(event.userid);
+  if(userVideoElm && event && event.status) {
+    userVideoElm.style.backgroundColor = event.status === 'online' ? '#34A853' : '#EA4335';
+    const status = document.getElementById(`video-status-${event.userid}`);
+    if(status && event.status) status.innerHTML = `Status: ${event.status}`;
+  }
+}
+
+connection.onstreamended = function(event) {
+  let video = document.getElementById(event.userid);
+  if (video && video.parentNode) {
+    video.parentNode.removeChild(video);
+  }
+};
+
+const connectVideos = () => {
+  setTimeout(function() {
+    if(channels.length) {
+      const channel = channels.shift()
+      navigator.getUserMedia({
+          video: true,
+          audio: false
+      }, function(externalStream) {
+          connection.attachStreams = [externalStream];
+          connection.openOrJoin(channel);
+      }, function(error) {});
+      connectVideos();
+    }
+  }, 3000)
+}
+
+
+let channels = [];
+channels = JSON.parse(channelDiv.dataset.streamChannels);
+connection.dontCaptureUserMedia = true;
+connectVideos()

data/app/assets/javascripts/proctoring/video_recorder.js

@@ -0,0 +1,172 @@
+class VideoRecorder {
+  constructor(eventId, userId) {
+    this.eventId = eventId;
+    this.userId = userId;
+    let videoRecordingInfoElm = document.getElementById('video-recording-info');
+    this.appName = videoRecordingInfoElm.dataset.appName;
+    this.recordEndpoint = videoRecordingInfoElm.dataset.recordEndpoint;
+    this.uploadUrl = videoRecordingInfoElm.dataset.uploadUrl;
+    this.proctorResp = {};
+    this.listOfRecorders = {};
+  }
+
+  connectVideo() {
+    const { eventId, userId } = this;
+    fetch(
+      `/proctoring/video_streamings/user_channel.json?event_id=${eventId}&user_id=${userId}`
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        this.proctorResp = data;
+        this.startWebrtcAndRecord();
+      });
+    
+  }
+
+  startWebrtcAndRecord() {
+    const {
+      eventId,
+      userId,
+      proctorResp,
+      appName,
+      listOfRecorders,
+      recordEndpoint,
+      uploadUrl,
+    } = this;
+    const userConferenceId = `proctoring-video_streaming-${appName}-${eventId}-${userId}`;
+    const connection = new RTCMultiConnection();
+    window.listOfRecorders = listOfRecorders;
+
+    connection.socketURL = proctorResp.socketURL;
+    connection.session = {
+      audio: false,
+      video: true,
+    };
+
+    connection.sdpConstraints.mandatory = {
+      OfferToReceiveAudio: false,
+      OfferToReceiveVideo: true,
+    };
+
+    connection.userid = userConferenceId;
+
+    connection.extra = {
+      eventId,
+      userId,
+    };
+
+    const supports = navigator.mediaDevices.getSupportedConstraints();
+    if (supports.width && supports.height) {
+      connection.applyConstraints({
+        video: {
+          width: 320,
+          height: 240,
+        },
+      });
+    }
+
+    const resolutions = "VGA";
+    let videoConstraints = {};
+
+    if (resolutions === "VGA") {
+      videoConstraints = {
+        width: { min: 320, ideal: 320 },
+        height: { min: 240 },
+        frameRate: 15,
+        facingMode: "user",
+      };
+    }
+
+    connection.mediaConstraints = {
+      video: videoConstraints,
+      audio: true,
+    };
+
+    connection.setUserPreferences = (userPreferences) => {
+      // eslint-disable-next-line no-param-reassign
+      userPreferences.dontGetRemoteStream = true;
+      return userPreferences;
+    };
+
+    const recordAndUploadVideo = (event) => {
+      // eslint-disable-next-line no-undef
+      const recorder = RecordRTC(event.stream, {
+        type: "video",
+        // eslint-disable-next-line no-undef
+        // recorderType: MediaStreamRecorder,
+        timeSlice: 1000 * 60 * 1,
+        canvas: {
+          width: 320,
+          height: 240,
+        },
+        frameRate: 5,
+        mimeType: "video/x-matroska;codecs=avc1",
+        ondataavailable(blob) {
+          const fileOfBlob = new File(
+            [blob],
+            `videorecording-${appName}-${eventId}-${userId}-${+new Date()}.webm`,
+            { type: "video/webm" }
+          );
+          console.log(blob, fileOfBlob);
+          invokeSaveAsDialog(blob);
+          // const upload = new ActiveStorage.DirectUpload(
+          //   fileOfBlob,
+          //   uploadUrl,
+          //   this
+          // );
+          // upload.create((error, blob) => {
+          //   if (error) {
+          //     console.log(error);
+          //   } else {
+          //     console.log(blob);
+
+          //     const csrfElement = document.getElementsByName("csrf-token")[0];
+          //     const csrfToken = csrfElement ? csrfElement.content : "";
+
+          //     const submitData = {
+          //       video_streaming: {
+          //         videos: [blob.signed_id],
+          //         user_id: userId,
+          //       },
+          //     };
+
+          //     console.log(submitData);
+
+          //     // fetch(`${recordEndpoint}/${proctorResp.id}/upload_video`, {
+          //     //   method: "POST",
+          //     //   headers: {
+          //     //     "Content-Type": "application/json",
+          //     //     "X-Requested-With": "XMLHttpRequest",
+          //     //     "X-CSRF-TOKEN": csrfToken,
+          //     //     Accept: "application/json",
+          //     //   },
+          //     //   body: JSON.stringify(submitData),
+          //     //   credentials: "include",
+          //     // })
+          //     //   .then((res) => res.json())
+          //     //   .then((res) => console.log(res));
+          //   }
+          // });
+        },
+      });
+
+      recorder.startRecording();
+
+      listOfRecorders[event.userid] = recorder;
+    };
+
+    connection.onstream = (event) => {
+      recordAndUploadVideo(event);
+    };
+
+    if (proctorResp && proctorResp.channel) {
+      console.log(proctorResp);
+      connection.openOrJoin(proctorResp.channel, () => {
+        setTimeout(() => {
+          const localStream = connection.attachStreams[0];
+          localStream.mute("audio");
+        }, 500);
+      });
+    }
+  }
+}