i wanted to write a javascript function that records the screen of the user and saves it onto a server.
It seems to work so far and records the user-selected screen (i printed most variables into the console for testing purpose but here deleted it for clarity, the ids etc are filled), but there is a problem when i am trying to upload it.
Since i am new to JavaScript programming, i seem to be stuck now, i tried to change mimeTypes/types in ajax since i am not sure if they are used right, did not help.
I run the JavaScript frontend on a local XAMPP and the Java backend on a local WildFly.
Would be so glad if anyone got helping ideas.
The code i wrote is integrated into a existing project, i will post the snippets i wrote.
1)
// Create Recorder
var recorder;
var stream;
var chunks = [];
var blob = new Blob;
var start_recording_timestamp ;
this.startIntegratedScreenCapture = async function () {
start_recording_timestamp = new Date(new Date().getTime() + 3600000).toISOString(); //add 1 hour because of Berlin-Timezone
try {
stream = await navigator.mediaDevices.getDisplayMedia({
video: {mediaSource: "screen"},
mimeType: 'video/webm;codecs=h264'
});
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = e => {
let that = this;
blob = new Blob(chunks, { type: chunks[0].type });
window.repositoryService.saveVideoForModel(window.modelId, start_recording_timestamp, blob);
that.videoSaveCallbacks.forEach(callback => callback(blob));
};
recorder.start();
}
catch(e){console.log(e)}
};
//stop Recording
this.stopIntegratedScreenCapture = function () {
if (recorder) {
recorder.stop();
stream.getVideoTracks()[0].stop();
}
};
// Integrated Screen Capture
this.saveVideoForModel = function (modelID, timestamp, video_content) {
var reader = new FileReader();
reader.addEventListener('loadend', (event) => {
var videoAsJSON = event.srcElement.result;
var videoURI = this.videoURI;
var data = new FormData();
data.append("data", new Blob([videoAsJSON], {type: "application/octet-stream"}));
data.append("modelID", modelID);
data.append("startRecTimestamp", timestamp);
this.uploadVideo("POST", videoURI, data, function (response) {
try {
response = JSON.parse(response);
} catch (event) {
}
if (response === null || response === "") {
window.showMessage("Error saving the video", "error", "Error");
return;
}
window.showMessage("Video of model " + modelID + " successfully saved", "success", "Success");
},function (error){console.log(error)});
});
reader.readAsArrayBuffer(video_content);
};
-
//start upload this.uploadVideo = function (method, url, data, success, error) { var errorHandler = (error != null) ? error : this.defaultErrorHandler; var token = this.getToken(); url = method === "DELETE" ? url + "?" + $.param(data) : url; $.ajax({ url: url, type: method, data: data, enctype: 'multipart/form-data', cache: false, async: true, processData: false, contentType: false, beforeSend: function (xhr) { if (token != null) { xhr.setRequestHeader("Authentication", "Bearer" + token); } }, success: success, error: errorHandler } ).done(function(data){console.log(data)});};
The serverside code looks like this, it uses Spring framework:
@CrossOrigin(origins = "*")
@RequestMapping(value = "/integrated/saveVideo", method =
RequestMethod.POST)
public ResponseEntity<VideoDto> saveVideo(@RequestParam("data")
MultipartFile file,
@RequestParam("modelID")
String modelID,
@RequestParam("startRecTimestamp") String startRecTimestamp) {
HttpStatus status = HttpStatus.OK;
startRecTimestamp = startRecTimestamp.replaceAll(":", "_");
String fileName = env.getProperty("screenrecording.directory") +
modelID + "_Model_" + startRecTimestamp;
try (FileOutputStream fosVideo = new FileOutputStream(fileName,
true)){
byte[] bytes = file.getBytes();
fosVideo.write(bytes);
} catch (IOException ioe) {
status = HttpStatus.CONFLICT;
ioe.printStackTrace();
}
return new ResponseEntity<>(new VideoDto(), status);
}
When i use developer mode in firefox, i see that the program seems to fail at the axaj query (the beforeSend in the ajax gets triggered, tried it with console.log to see if token has id)
The FunctionReponse gets not triggered using uploadVideo function in saveVideoForModel since uploadVideo function ends in error.
Status
409
Conflict
VersionHTTP/1.1
Referrer Policystrict-origin-when-cross-origin
XHRPOST../saveVideo
[HTTP/1.1 409 Conflict 610ms]
POST
…/saveVideo
Status
409
Conflict
VersionHTTP/1.1
Übertragen533 B (81 B Größe)
Referrer Policystrict-origin-when-cross-origin
HTTP/1.1 409 Conflict
Expires: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
X-XSS-Protection: 1; mode=block
Pragma: no-cache
X-Frame-Options: DENY
Date: Mon, 29 Nov 2021 23:31:07 GMT
Connection: keep-alive
Access-Control-Allow-Origin: *
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
Transfer-Encoding: chunked
Content-Type: application/json; charset=UTF-8
XHRPOST.../saveVideo
[HTTP/1.1 409 Conflict 610ms]
POST
.../saveVideo
Status
409
Conflict
VersionHTTP/1.1
Übertragen533 B (81 B Größe)
Referrer Policystrict-origin-when-cross-origin
HTTP/1.1 409 Conflict
Expires: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
X-XSS-Protection: 1; mode=block
Pragma: no-cache
X-Frame-Options: DENY
Date: Mon, 29 Nov 2021 23:31:07 GMT
Connection: keep-alive
Access-Control-Allow-Origin: *
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
Transfer-Encoding: chunked
Content-Type: application/json; charset=UTF-8
POST ...saveVideo HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Authentication: BearereyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJwcm9iYW5kIiwiZXhwIjoxNjM4Mjc1ODU0fQ.dy-e-gJtD3R-UlPD9FVnJ5YQmjko7tEqS-l9ocprk9vRpCXUKjelL78mafe9zTKJlDo_c8pElbiQWKdGIbfapw
Content-Type: multipart/form-data; boundary=---------------------------188953772220050190214011980307
Content-Length: 1090343
Origin: http://localhost
Connection: keep-alive
Referer: http://localhost/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site