Record more watch history

[ittipatken]

Currently, the website only allows for saving one video. However, saving multiple videos may cause confusion since each video file is named '1.mp4'.

[keenthekeen]

Idea: capturing the video to create a thumbnail when saving play progress may help with the "1.mp4" issue

https://stackoverflow.com/questions/13760805/how-to-take-a-snapshot-of-html5-javascript-based-video-player

[keenthekeen]

I tried implementing the thumbnail idea, but I ran into a problem. The browser's CORS policy prevents JavaScript code from accessing cross-origin video content.

// Adding this code cause "The operation is insecure" error due to CORS policy.
// Create thumbnail from video
const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
const ctx = canvas.getContext('2d');
ctx?.drawImage(playerEl.value, 0, 0, canvas.width, canvas.height); // draw image to canvas. scale to target dimensions
const thumbnailURI = canvas.toDataURL('image/jpeg');
console.log(thumbnailURI);

The solution is to add a CORS header to the video response. This can be accomplished by proxying the video through our server, such as Docchula server or Cloudflare Worker. However, this would require server bandwidth and performance, as well as manpower for maintenance. Therefore, I am putting this idea on hold for now, unless there is significant user demand.

Other way to address this problem is to fetch the video title (lecture topic) from the AcuStudio page. Looking into that.

[keenthekeen]

Done, use video thumbnail already generated by AcuStudio instead.