ui: Add canvas recording functionality

Signed-off-by: Tobias Falkenstein <[email protected]>

Author: Patrick Schuster

ui/src/App.js

@@ -18,7 +18,7 @@ import { withCookies } from "react-cookie";
 import axios from "axios";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
 import { Spin, Progress } from "antd";
-
+import RecordService from "./services/recordService";
 import Sidebar from "./components/sidebar";
 import ErrorBoundary from "./components/errorBoundary";
 import NavBar from "./components/navbar";
@@ -63,6 +63,7 @@ class App extends Component {
       replayIndex: 0,
       replayState: REPLAYSTATES.PAUSED,
       showErrorMessage: false,
+      isRecoding: false
     };
 
     // Helper variable to declare if Cloe-UI should perform one-time fetches,
@@ -87,6 +88,7 @@ class App extends Component {
     this.componentsOnLeftSide = cookies.get("firstColumn") || [0];
     this.componentsOnRightSide = cookies.get("secondColumn") || [1, 2, 3, 4, 5];
     this.componentOrder = ["left"];
+    this.recordService = null;
 
     this.stepWidth = null;
     this.replaySpeed = 1;
@@ -142,9 +144,11 @@ class App extends Component {
             sensors={cloeDataLive.sensors}
             replayState={this.state.replayState}
             streamingType={this.state.streamingType}
+            isRecording={this.state.isRecoding}
             toggleReplay={this.toggleReplay}
             fastForward={this.fastForward}
             rewind={this.rewind}
+            recordCanvas={this.recordCanvas}
           />
         )
       },
@@ -606,6 +610,37 @@ class App extends Component {
     this.setState({ sideBarOpen: !this.state.sideBarOpen });
   };
 
+  recordCanvas = () => {
+    let canvas = document.getElementById("scene").getElementsByTagName("canvas")[0];
+    this.setState({ isRecoding: !this.state.isRecoding }, () => {
+      const recordSettings = {
+        timeslice: 100,
+        mimeType: "video/webm",
+        canvas: canvas
+      };
+      if (this.recordService === null) {
+        this.recordService = new RecordService(recordSettings);
+      }
+      if (this.state.isRecoding) {
+        this.recordService.startRecording();
+      } else {
+        this.recordService.stopRecording();
+        let videoData = this.recordService.getData();
+        let a = document.createElement("a");
+        videoData.then((data) => {
+          const url = URL.createObjectURL(data);
+          //temporary creating an element for automatic download
+          a.setAttribute("href", url);
+          a.setAttribute("download", "cloe-replay-" + this.uuid);
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          this.recordService = null;
+        });
+      }
+    });
+  };
+
   rewind = () => {
     let currentIndex = this.state.replayIndex;
     this.setState({ replayState: REPLAYSTATES.PAUSED }, () => {

ui/src/components/rendering.jsx

@@ -106,7 +106,7 @@ class Rendering extends Component {
 
   render() {
     // Make sensors available for input fields.
-    const { sensors, replayState, streamingType } = this.props;
+    const { sensors, replayState, streamingType, isRecording } = this.props;
     const selectObjSensors = this.getAvailSensors(sensors, this.sensorType.Object);
     const selectLaneSensors = this.getAvailSensors(sensors, this.sensorType.Lane);
 
@@ -186,6 +186,7 @@ class Rendering extends Component {
             toggleReplay={this.toggleReplay}
             fastForward={this.fastForward}
             rewind={this.rewind}
+            recordCanvas={this.recordCanvas}
           ></ReplayControlls>
           <div
             className="m-0 mt-2 text-light"
@@ -958,6 +959,10 @@ class Rendering extends Component {
     this.props.rewind();
   };
 
+  recordCanvas = () => {
+    this.props.recordCanvas();
+  };
+
   resetRenderOptions = () => {
     if (this.state.helperAxesVisible) {
       this.scene.remove(this.axes);

ui/src/css/icon.scss

@@ -28,6 +28,23 @@
   cursor: pointer;
 }
 
+.rec-icon-pending {
+  width:10px;
+  height:10px;
+  border-radius:50px;
+  line-height:100px;
+  background:#e05048;
+
+  @keyframes glowing {
+    50% {
+      opacity: 0%;
+      box-shadow: 0 0 20px #e05048;
+    }
+  }
+
+  animation: glowing 1500ms infinite;
+}
+
 .icon-clickable {
   color: #6c757d;
   cursor: pointer;

ui/src/services/recordService.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2021 Robert Bosch GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default class RecordService {
+  recorder = null;
+  stream = null;
+  blobs = [];
+  constructor(recordSettings) {
+    // Read the data in chunks.
+    this.timeslice = recordSettings.timeslice;
+    this.mimeType = recordSettings.mimeType === void 0 ? "video/webm" : recordSettings.mimeType;
+    // Default value is 2.5mbps.
+    this.videoBitsPerSecond = 2500000;
+    this.canvas = recordSettings.canvas;
+  }
+  // Start the recording by capturing the canvas stream and collecting the data in the blobs[] array.
+  startRecording() {
+    this.stream = this.canvas.captureStream();
+    this.recorder = new MediaRecorder(this.stream, {
+      mimeType: this.mimeType,
+      videoBitsPerSecond: this.videoBitsPerSecond
+    });
+    let self = this;
+    this.recorder.ondataavailable = function(event) {
+      if (event.data && event.data.size > 0) {
+        self.blobs.push(event.data);
+      }
+    };
+    this.recorder.start(this.timeslice);
+  }
+  // Stop the recording.
+  stopRecording() {
+    // if recording multiple times, consider choosing right track - getTracks()[?].
+    this.stream.getTracks()[0].stop();
+    this.recorder.stop();
+  }
+
+  // return the blobs[] array.
+  getData() {
+    let self = this;
+    return new Promise((resolve) => {
+      resolve(
+        new Blob(self.blobs, {
+          type: self.mimeType
+        })
+      );
+    });
+  }
+}