proctoring 2.0.2

data/app/assets/javascripts/kurento/LiveVideoUsingSignalingServer.js

@@ -0,0 +1,344 @@
+function liveVideoUsingSignalingServer(props) {
+  // variables
+  let roomName;
+  let userName;
+  let appName;
+  let participants = {};
+  let currentRtcPeer;
+  const iceCandidateQueue = {};
+  const connectedEvent = document.getElementById("connected-event");
+  const assignedUsers = document.getElementById("assigned-candidates");
+  const connectedUsers = document.getElementById("connected-candidates");
+  const connectedAdminUsers = document.getElementById("connected-recruiters");
+  const connectedUsersList = document.getElementById("connected-candidates-list");
+  const updateTimer = 5 * 1000; // 5 seconds
+  const { socket, event, user, assignedUserIds } = props;
+
+  var divMeetingRoom = document.getElementById(
+    props.videoDivId || "proctoringVideos"
+  );
+
+  let proctoringData = document.getElementById("proctoring-data");
+  appName = proctoringData.dataset.appName;
+  roomName = props.event.toString();
+  userName = props.user.toString();
+  adminUserName = userName + '-admin'
+  if (roomName && userName) {
+    let message = {
+      event: "joinRoom",
+      roomName,
+      userName: adminUserName,
+      appName,
+      extraInfo: {},
+    };
+
+    sendMessage(message);
+  }
+
+  function socketListener(message) {
+    console.log("Message arrived", message);
+
+    switch (message.event) {
+      case "newParticipantArrived":
+        onNewParticipant(message.userId, message.userName, message.roomName);
+        break;
+      case "existingParticipants":
+        onExistingParticipants(message.userId, message.existingUsers);
+        break;
+      case "receiveVideoAnswer":
+        onReceiveVideoAnswer(message.senderId, message.sdpAnswer);
+        break;
+      case "participantLeft":
+        setOffline(message.userName);
+        break;
+      case "candidate":
+        addIceCandidate(message.userId, message.candidate);
+        break;
+      case "analytics-data":
+        setUpAnalytics(message.roomInfo);
+        break;
+    }
+  }
+
+  socket.on("signaling-message", socketListener);
+  getLiveVideoProctoringAnalyticsData({ socket, event });
+  setInterval(() => {
+    getLiveVideoProctoringAnalyticsData({ socket, event });
+  }, updateTimer);
+
+  function sendMessage(message) {
+    console.log("sending " + message.event + " message to server");
+    socket.emit("signaling-message", message);
+  }
+
+  function getLiveVideoProctoringAnalyticsData(props) {
+    let roomName = props.event.toString();
+    let message = {
+      event: "analytics-data",
+      roomName,
+    };
+    sendMessage(message);
+  }
+
+  
+  function stopRecordingAndRestart() {
+    let message = {
+      event: "stopRecordingAndRestart",
+      appName,
+    };
+    sendMessage(message);
+    currentRtcPeer.dispose();
+    socket.removeListener("signaling-message", socketListener);
+    liveVideoUsingSignalingServer(props);
+  }
+
+  window.onbeforeunload = function () {
+    currentRtcPeer.dispose();
+    socket.disconnect();
+  };
+
+  function setOffline(userid) {
+    const container = document.getElementById(`participant-video-${userid}`);
+    if(container) {
+      container.classList.remove("border-success");
+      container.classList.add("border-danger");
+      // const callButton = container.querySelector(".connect-candidate");
+      // callButton.disabled = true;
+    }
+  }
+
+  function receiveVideo(userIdWs, userNameWs) {
+    const checkContainer = document.getElementById(
+      `participant-video-${userNameWs}`
+    );
+    let video, div;
+    if (checkContainer) {
+      div = checkContainer; 
+      const videoElm = checkContainer.querySelector('video');
+      video = videoElm;
+    } else {
+      const nodeToCopy = document.getElementById("sample-video-div").querySelector('div');
+      const newDiv = nodeToCopy.cloneNode(true);
+      div = newDiv;
+      video = newDiv.querySelector('video');
+      let name = newDiv.querySelector(".video-user-id");
+      name.innerText = userNameWs;
+      div.id = `participant-video-${userNameWs}`;
+      video.id = `video-elm-${userNameWs}`;
+      video.muted = true;
+      divMeetingRoom.appendChild(div);
+    }
+
+    if(div) {
+      div.classList.remove("border-danger");
+      div.classList.add("border-success");
+      // const callButton = div.querySelector(".connect-candidate");
+      // callButton.disabled = false;
+    }
+
+    const onOffer = (_err, offer, _wp) => {
+      // console.log("On Offer");
+      let message = {
+        event: "receiveVideoFrom",
+        userId: user.id,
+        roomName: roomName,
+        sdpOffer: offer,
+      };
+      sendMessage(message);
+    };
+
+    // send Icecandidate
+    const onIceCandidate = (candidate, wp) => {
+      // console.log("sending ice candidates");
+      var message = {
+        event: "candidate",
+        userId: user.id,
+        roomName: roomName,
+        candidate: candidate,
+      };
+      sendMessage(message);
+    };
+
+    let user = {
+      id: userIdWs,
+      userName: userNameWs,
+      video: video,
+      rtcPeer: null,
+    };
+
+    participants[user.id] = user;
+
+    let options = {
+      remoteVideo: video,
+      onicecandidate: onIceCandidate,
+    };
+
+    // This is for receving candidates
+    user.rtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(
+      options,
+      function (err) {
+        if (err) {
+          return console.error(err);
+        }
+        if (iceCandidateQueue) {
+          while (iceCandidateQueue.length) {
+            const ice = iceCandidateQueue.shift();
+            user.rtcPeer.addIceCandidate(ice.candidate);
+          }
+        }
+        this.generateOffer(onOffer);
+      }
+    );
+  }
+
+  function onNewParticipant(userIdWs, userNameWs, roomNameWs) {
+    if (validCandidate(userNameWs, roomNameWs)) receiveVideo(userIdWs, userNameWs);
+  }
+
+  function onExistingParticipants(userIdWs, existingUsers) {
+    let video = document.createElement("video");
+    video.id = userIdWs;
+    video.autoplay = false;
+
+    let user = {
+      id: userIdWs,
+      userName: userName,
+      video: video,
+      rtcPeer: null,
+    };
+
+    participants[user.id] = user;
+
+    let constraints = {
+      audio: true,
+      video: {
+        width: { min: 320, ideal: 320, max: 640 },
+        height: { min: 240, ideal: 240, max: 480 },
+      },
+    };
+
+    const onOffer = (_err, offer, _wp) => {
+      // console.log("On Offer");
+      let message = {
+        event: "receiveVideoFrom",
+        userId: user.id,
+        roomName: roomName,
+        sdpOffer: offer,
+      };
+      sendMessage(message);
+    };
+
+    // send Icecandidate
+    const onIceCandidate = (candidate, wp) => {
+      // console.log("sending ice candidates");
+      var message = {
+        event: "candidate",
+        userId: user.id,
+        roomName: roomName,
+        candidate: candidate,
+      };
+      sendMessage(message);
+    };
+
+    let options = {
+      // localVideo: video,
+      // mediaConstraints: constraints,
+      onicecandidate: onIceCandidate,
+    };
+
+    // This is for sending candidate
+    user.rtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(
+      options,
+      function (err) {
+        if (err) {
+          return console.error(err);
+        }
+        if (iceCandidateQueue) {
+          while (iceCandidateQueue.length) {
+            const ice = iceCandidateQueue.shift();
+            user.rtcPeer.addIceCandidate(ice.candidate);
+          }
+        }
+        this.generateOffer(onOffer);
+      }
+    );
+
+    existingUsers.forEach(function (element) {
+      if (validCandidate(element.name, element.roomName)) receiveVideo(element.id, element.name);
+    });
+
+    currentRtcPeer = user.rtcPeer;
+
+    setTimeout(() => {
+      stopRecordingAndRestart();
+    }, 5*60*1000);
+  }
+
+  function setUpAnalytics(roomInfo) {
+    connectedEvent.innerText = event;
+    let candidateCount = 0;
+    let adminCount = 0;
+    let assignedCount = 0;
+
+    if (roomInfo) {
+      Object.keys(roomInfo).forEach((key) => {
+        if (checkAdminUser(key)) adminCount += 1;
+        else candidateCount += 1;
+
+        if (validCandidate(key, roomInfo[key].room)) assignedCount += 1;
+      });
+    }
+    assignedUsers.innerText = `${assignedCount}/${JSON.parse(assignedUserIds).length}`;
+    connectedUsers.innerText = candidateCount;
+    connectedAdminUsers.innerText = adminCount;
+    // List update
+    let div = document.createElement("div");
+    div.className = "list-group";
+    listClass = "list-group-item list-group-item-action rounded-0";
+    if (roomInfo) {
+      Object.keys(roomInfo).forEach((key) => {
+        if (validCandidate(key, roomInfo[key].room)) {
+          let link = document.createElement('a');
+          const text = document.createTextNode(key);
+          link.appendChild(text);
+          link.id = `candidate-list-elm-${key}`;
+          link.className = listClass;
+          div.appendChild(link);
+        }
+      })
+    } else {
+      let link = document.createElement("a");
+      const text = document.createTextNode("No users connected!");
+      link.appendChild(text);
+      link.className = listClass;
+      div.appendChild(link);
+    }
+    connectedUsersList.innerHTML = "";
+    connectedUsersList.appendChild(div);
+  }
+
+  function validCandidate(candidateUserId, room) {
+    if (checkAdminUser(candidateUserId)) return false;
+    if (roomName !== room) return false;
+    if (!assignedUserIds.includes(parseInt(candidateUserId))) return false;
+
+    return true;
+  }
+
+  function checkAdminUser(userName) {
+    return userName.split('-').includes('admin');
+  }
+
+  function onReceiveVideoAnswer(senderId, sdpAnswer) {
+    participants[senderId].rtcPeer.processAnswer(sdpAnswer);
+  }
+
+  function addIceCandidate(userId, candidate) {
+    const user = participants[userId]
+    if (user) participants[userId].rtcPeer.addIceCandidate(candidate);
+    else {
+      if (!iceCandidateQueue[userId]) iceCandidateQueue[userId] = [];
+      iceCandidateQueue[userId].push({ candidate });
+    }
+  }
+};

data/app/assets/javascripts/kurento/VideoPlayer.js

@@ -0,0 +1,63 @@
+class VideoPlayer {
+  constructor(elementId='preview-player', playlist) {
+    this.player = videojs(elementId, {
+      fluid: true,
+    });
+    const defaultDataEl = document.getElementById('video-player-proctoring');
+    if(defaultDataEl && defaultDataEl.dataset.defaultThumbnail) {
+      this.thumbnail = defaultDataEl.dataset.defaultThumbnail;
+    }
+  }
+
+  playPlaylist(playlist) {
+    if (this.thumbnail) {
+      this.playlist = playlist.map((list) => {
+        if (!list.thumbnail) {
+          list.thumbnail = [{ src: this.thumbnail }];
+        }
+        return list;
+      });
+    } else {
+      this.playlist = playlist;
+    }
+    this.player.playlist(this.playlist);
+    // playlist structure
+    // [{
+    //   name: "Sintel open movie",
+    //   description: "Explore the depths of our planet's oceans. ",
+    //   duration: 10,
+    //   // src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
+    //   sources: [
+    //     {
+    //       src: "http://media.w3.org/2010/05/sintel/trailer.mp4",
+    //       type: "video/mp4",
+    //     },
+    //   ],
+    //   thumbnail: [{ src: "http://media.w3.org/2010/05/sintel/poster.png" }],
+    // },
+    // {
+    //   name: "Sintel open movie",
+    //   description: "Explore the depths of our planet's oceans. ",
+    //   duration: 10,
+    //   // src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
+    //   sources: [
+    //     {
+    //       src: "http://media.w3.org/2010/05/sintel/trailer.mp4",
+    //       type: "video/mp4",
+    //     },
+    //   ],
+    //   thumbnail: [{ src: "http://media.w3.org/2010/05/sintel/poster.png" }],
+    // }];
+    // populate playlist UI
+    this.player.playlistUi();
+    // Auto advance one video after another
+    this.player.playlist.autoadvance(0);
+  }
+
+  pauseVideo() {
+    if (this.player) {
+      this.player.pause();
+    }
+  }
+
+}

data/app/assets/javascripts/kurento/VideoRecording.js

@@ -0,0 +1,286 @@
+class VideoRecording {
+  constructor({
+    event,
+    user,
+    inputVideoElmId = false,
+    proctoringDataElmId = "proctoring-data",
+    iceServers = undefined,
+  }) {
+    this.webRtcPeer;
+    this.client;
+    this.pipeline;
+    this.recorder;
+    this.mediaServerUrl;
+    this.player;
+    this.eventName = event;
+    this.user = user;
+    this.retryCount = 0;
+    if (this.inputVideoElmId) {
+      this.inputVideoElm = document.getElementById(inputVideoElmId);
+      this.showInputVideo = true;
+    }
+    const proctoringData = document.getElementById(proctoringDataElmId);
+    if (proctoringData) {
+      this.mediaServerUrl = proctoringData.dataset.mediaServerUrl;
+      this.appName = proctoringData.dataset.appName;
+      try {
+        this.iceServers = JSON.parse(proctoringData.dataset.iceServers);
+      } catch(error) {
+        console.log("Ice servers not defined!");
+      }
+    } else {
+      this.mediaServerUrl = window.location.host;
+      this.appName = window.location.host;
+      this.iceServers = undefined;
+    }
+    this.streamConfig = {
+      ws_uri: `ws${location.protocol === "http:" ? "" : "s"}://${
+        this.mediaServerUrl
+      }/kurento`,
+      ice_servers: this.iceServers,
+    };
+    this.onStartOffer = this.onStartOffer.bind(this);
+    this.onPlayOffer = this.onPlayOffer.bind(this);
+  }
+
+  setIceCandidateCallbacks(webRtcPeer, webRtcEp, onerror) {
+    webRtcPeer.on("icecandidate", function (candidate) {
+      // console.log("Local candidate:",candidate);
+
+      candidate = kurentoClient.getComplexType("IceCandidate")(candidate);
+
+      webRtcEp.addIceCandidate(candidate, onerror);
+    });
+
+    webRtcEp.on("OnIceCandidate", function (event) {
+      let candidate = event.candidate;
+
+      // console.log("Remote candidate:",candidate);
+
+      webRtcPeer.addIceCandidate(candidate, onerror);
+    });
+    webRtcEp.on("ConnectionStateChanged", (event) => {
+      if (event.newState === "DISCONNECTED") {
+        this.connectionStatus = null;
+      } else {
+        this.connectionStatus = event.newState;
+      }
+      this.clearTimeDilation();
+    });
+  }
+
+  startRecordingSingleSession() {
+    const { eventName, user, appName } = this;
+    this.streamConfig.file_uri = `file:///recordings/app_data/${appName}/video/${eventName}/${user}/${user}-${+new Date()}.webm`;
+    let constraints = {
+      audio: true,
+      video: {
+        width: 640,
+        framerate: 15,
+      },
+    };
+    let options = {
+      mediaConstraints: constraints,
+    };
+    if (this.showInputVideo) {
+      options.localVideo = this.inputVideoElm;
+      this.inputVideoElm.muted = true;
+    }
+
+    if (this.streamConfig.ice_servers) {
+      // console.log("Use ICE servers: ", this.streamConfig.ice_servers);
+      options.configuration = {
+        iceServers: this.streamConfig.ice_servers,
+      };
+    } else {
+      console.log("Use freeice");
+    }
+    const self = this;
+    self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendrecv(
+      options,
+      function (error) {
+        if (error) return self.onError(error);
+
+        this.generateOffer(self.onStartOffer);
+      }
+    );
+  }
+
+  onStartOffer(error, sdpOffer) {
+    const self = this;
+    if (error) return self.onError(error);
+
+    co(function* () {
+      try {
+        if (!self.client)
+          self.client = yield kurentoClient(self.streamConfig.ws_uri);
+
+        self.pipeline = yield self.client.create("MediaPipeline");
+
+        let webRtc = yield self.pipeline.create("WebRtcEndpoint");
+        self.setIceCandidateCallbacks(self.webRtcPeer, webRtc, self.onError);
+
+        self.recorder = yield self.pipeline.create("RecorderEndpoint", {
+          uri: self.streamConfig.file_uri,
+        });
+
+        yield webRtc.connect(self.recorder);
+        yield webRtc.connect(self.webRtc);
+
+        yield self.recorder.record();
+
+        let sdpAnswer = yield webRtc.processOffer(sdpOffer);
+        webRtc.gatherCandidates(self.onError);
+        self.webRtcPeer.processAnswer(sdpAnswer);
+
+        // setStatus(CALLING);
+      } catch (e) {
+        self.onError(e);
+      }
+    })();
+  }
+
+  playVideo(elm = "videoOutput") {
+    const videoOutput = document.getElementById(elm);
+    let options = {
+      remoteVideo: videoOutput,
+    };
+
+    if (this.streamConfig.ice_servers) {
+      console.log("Use ICE servers: " + this.streamConfig.ice_servers);
+      options.configuration = {
+        iceServers: this.streamConfig.ice_servers,
+      };
+    } else {
+      console.log("Use freeice");
+    }
+    const self = this;
+    self.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly(
+      options,
+      function (error) {
+        if (error) return onError(error);
+
+        this.generateOffer(self.onPlayOffer);
+      }
+    );
+  }
+
+  stopAndPlayVideo(elm = "videoOutput") {
+    this.stopRecording();
+    this.playVideo(elm);
+  }
+
+  onPlayOffer(error, sdpOffer) {
+    const self = this;
+    if (error) return self.onError(error);
+
+    co(function* () {
+      try {
+        if (!self.client)
+          self.client = yield kurentoClient(self.streamConfig.ws_uri);
+
+        self.pipeline = yield self.client.create("MediaPipeline");
+
+        let webRtc = yield self.pipeline.create("WebRtcEndpoint");
+        self.setIceCandidateCallbacks(self.webRtcPeer, webRtc, self.onError);
+
+        self.player = yield self.pipeline.create("PlayerEndpoint", {
+          uri: self.streamConfig.file_uri,
+        });
+
+        self.player.on("EndOfStream", self.stopRecording);
+
+        yield self.player.connect(webRtc);
+
+        let sdpAnswer = yield webRtc.processOffer(sdpOffer);
+        webRtc.gatherCandidates(self.onError);
+        self.webRtcPeer.processAnswer(sdpAnswer);
+
+        yield self.player.play();
+      } catch (e) {
+        self.onError(e);
+      }
+    })();
+  }
+
+  onError(error) {
+    if (error) {
+      console.error(error);
+      this.stopRecording();
+      this.retryCount += 1;
+      if (this.retryCount < 5) {
+        setTimeout(() => {
+          if (this.interval) {
+            this.startRecordingSingleSessionWithInterval(this.interval);
+          }
+        }, 1000 * this.retryCount);
+      } else {
+        throw "Something went wrong with video recording.";
+      }
+    }
+  }
+
+  stopRecording() {
+    if (this.recorder) {
+      this.recorder.stop();
+      this.recorder = null;
+    }
+    if (this.webRtcPeer) {
+      this.webRtcPeer.dispose();
+      this.webRtcPeer = null;
+    }
+    if (this.pipeline) {
+      this.pipeline.release();
+      this.pipeline = null;
+    }
+  }
+
+  startRecordingSingleSessionWithInterval(interval = 30000) {
+    if (typeof interval !== "number" || interval < 30000) {
+      // In ms
+      throw "Interval for single session must be more than or equal to 30sec.";
+    }
+    this.interval = interval;
+    this.startRecordingSingleSession();
+    const self = this;
+    setInterval(() => {
+      console.log("retry");
+      if (self.recorder || self.pipeline || self.webRtcPeer) {
+        self.stopRecording();
+      }
+      setTimeout(() => {
+        self.startRecordingSingleSession();
+      }, 300);
+    }, interval + 300);
+  }
+
+  recordAndPlaySessionWithTimeout(timeout = 10000, videInput, videoOutput) {
+    if (typeof timeout !== "number" || timeout < 10000) {
+      throw "Timeout for single session must be more than or equal to 10sec.";
+    }
+    if (videInput) {
+      this.inputVideoElm = document.getElementById(videInput);
+      this.showInputVideo = true;
+    }
+    this.startRecordingSingleSession();
+    this.setupTimeDilation();
+    setTimeout(() => {
+      this.stopAndPlayVideoAfterTimeAddition(videoOutput);
+    }, timeout); // extra buffer of 300ms
+  }
+
+  stopAndPlayVideoAfterTimeAddition(videoOutput) {
+    setTimeout(() => this.stopAndPlayVideo(videoOutput), this.timeDilation);
+  }
+
+  setupTimeDilation() {
+    this.timeDilation = 0;
+    this.timeDilationInterval = setInterval(() => {
+      this.timeDilation += 1000;
+    }, 1000);
+  }
+
+  clearTimeDilation() {
+    if (this.timeDilationInterval) clearInterval(this.timeDilationInterval);
+  }
+}