Merge pull request #1437 from pierotofy/potrec

Record Movie with Potree

app/static/app/js/vendor/potree/build/potree/potree.js

@@ -71454,7 +71454,7 @@ void main() {
 		};
 
 		removeCameraAnimation(animation){
-			let index = this.cameraAnimations.indexOf(volume);
+			let index = this.cameraAnimations.indexOf(animation);
 			if (index > -1) {
 				this.cameraAnimations.splice(index, 1);
 
@@ -75386,6 +75386,7 @@ ENDSEC
 					<span>Time: </span><span id="lblTime"></span> <div id="sldTime"></div>
 
 					<input name="play" type="button" value="play"/>
+					<input name="record" type="button" value="record movie"/>
 				</span>
 			</div>
 		`);
@@ -75395,6 +75396,52 @@ ENDSEC
 				animation.play();
 			});
 
+			function record(canvas, time) {
+				var recordedChunks = [];
+				return new Promise(function (res, rej) {
+					var stream = canvas.captureStream(29.97 /*fps*/);
+					let mediaRecorder = new MediaRecorder(stream, {
+						mimeType: "video/webm; codecs=vp8"
+					});
+					
+					//ondataavailable will fire in interval of `time || 4000 ms`
+					mediaRecorder.start(time || 4000);
+			
+					mediaRecorder.ondataavailable = function (event) {
+						recordedChunks.push(event.data);
+						 // after stop `dataavilable` event run one more time
+						if (mediaRecorder.state === 'recording') {
+							mediaRecorder.stop();
+						}
+			
+					}
+			
+					mediaRecorder.onstop = function (event) {
+						var blob = new Blob(recordedChunks, {type: "video/webm" });
+						var url = URL.createObjectURL(blob);
+						res(url);
+					}
+				})
+			}
+
+			const elRecord = this.elContent.find("input[name=record]");
+			elRecord.click( () => {
+				const t = parseFloat(elDuration.val()) * 1000 + 1000;
+				this.viewer.toggleSidebar();
+				animation.setVisible(false);
+				setTimeout(() => {
+					animation.play();
+					record(this.viewer.renderer.domElement, t).then(url => {
+						let link = document.createElement('a');
+						link.setAttribute('href', url);
+						link.setAttribute('download', 'recording.webm');
+						link.click();
+						this.viewer.toggleSidebar();
+						animation.setVisible(true);
+					});
+				}, 1000);
+			});
+
 			const elSlider = this.elContent.find('#sldTime');
 			elSlider.slider({
 				value: 0,
@@ -79722,10 +79769,18 @@ ENDSEC
 				tree.jstree("delete_node", jsonNode.id);
 			};
 
+			let oCameraAnimationRemoved = (e) => {
+				let otherRoot = $("#jstree_scene").jstree().get_json("other");
+				let jsonNode = otherRoot.children.find(child => child.data.uuid === e.animation.uuid);
+				
+				tree.jstree("delete_node", jsonNode.id);
+			};
+
 			this.viewer.scene.addEventListener("measurement_removed", onMeasurementRemoved);
 			this.viewer.scene.addEventListener("volume_removed", onVolumeRemoved);
 			this.viewer.scene.addEventListener("polygon_clip_volume_removed", onPolygonClipVolumeRemoved);
 			this.viewer.scene.addEventListener("profile_removed", onProfileRemoved);
+			this.viewer.scene.addEventListener("camera_animation_removed", oCameraAnimationRemoved);
 
 			{
 				let annotationIcon = `${Potree.resourcePath}/icons/annotation.svg`;
@@ -80447,6 +80502,17 @@ ENDSEC
 				}
 			));
 
+			elNavigation.append(this.createToolIcon(
+				Potree.resourcePath + '/icons/reset_tools.svg',
+				'[title]tt.remove_last_camera_animation',
+				() => {
+					if (viewer.scene.cameraAnimations.length > 0){
+						let a = viewer.scene.cameraAnimations[viewer.scene.cameraAnimations.length - 1];
+						viewer.scene.removeCameraAnimation(a);
+						a.setVisible(false);
+					}
+				}
+			));
 
 			elNavigation.append("<br>");
 

app/static/app/js/vendor/potree/build/potree/resources/lang/en/translation.json

@@ -46,7 +46,8 @@
 		"navigation_cube_control": "Navigation cube",
 		"remove_all_clipping_volumes": "Remove all clipping volumes",
 		"compass": "Compass",
-		"camera_animation": "Camera Animation"
+		"camera_animation": "Camera Animation",
+		"remove_last_camera_animation": "Remove last camera animation"
 	},
 	"appearance": {
 		"nb_max_pts": "Point budget",