Recherche avancée

Sur d’autres sites (6581)

• Error loading FFmpeg : ReferenceError : SharedArrayBuffer is not defined - Angular 18.2.3

  9 septembre 2024, par Memariya Chirag

  Question :

  


  I am working on an Angular project (version 18.2.3) where I use ffmpeg.wasm to trim videos and extract frames. However, when trying to load FFmpeg, I am encountering the following error in the console :

  


  Error loading FFmpeg: ReferenceError: SharedArrayBuffer is not definedenter image description here


  


  Below is the code that initializes FFmpeg and attempts to load it: 


  


  export class VideoEditorComponent implements OnInit {&#xA;  ffmpeg = createFFmpeg({ log: true });&#xA;  isPlaying = false;&#xA;  frameDataArray: Uint8Array[] = [];&#xA;  frameIndex = 0;&#xA;&#xA;  async trimAndExtractFrames(): Promise<void> {&#xA;    try {&#xA;      // Load FFmpeg&#xA;      await this.ffmpeg.load();&#xA;      console.log("FFmpeg loaded successfully");&#xA;    } catch (error) {&#xA;      console.error("Error loading FFmpeg:", error);&#xA;    }&#xA;  }&#xA;}&#xA;</void>

  


  I have tried to troubleshoot the issue but am unsure how to proceed.

  


  The error seems related to SharedArrayBuffer, which I understand is required for performance improvements in multi-threading for web applications.

  


  I have checked my ffmpeg.wasm setup, and it works fine in a plain JavaScript application.

  


  Ensured that my Angular application is correctly serving the WebAssembly files.

  


  Looked into setting up the appropriate HTTP headers for Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy, but I am unsure if I have done it correctly.

  


  My questions :

  


  

  • How do I resolve the SharedArrayBuffer is not defined error in Angular ?

  


  • Is there a specific setup required for using SharedArrayBuffer in Angular with WebAssembly applications like FFmpeg ?

  


  • How can I ensure that the necessary HTTP headers are configured correctly in my Angular project to support this ?

  


  


  Additional information :

  


  

  • Angular version : 18.2.3

  


  • ffmpeg.wasm version : Latest (installed via npm)

  


  • Browser : Chrome 100+

  


  


• given a list of mp4, generate fmp4 and concatenate

  6 août 2021, par onion

  my input is a list of mp4 (for example each one is 10s), each mp4 will have correct timestamp, for example the second mp4 represents from 10s - 20s data.

  


  To simulate my input, I generate a list of mp4 this way

  


  ffmpeg -i ../origin-long-video.mp4 -map 0 -c copy -f segment -segment_time 10 -force_key_frames "expr:gte(t,n_forced*2)" -reset_timestamps 0 videos/output_%03d.mp4


  


  Note I use reset_timestamps 0 so that the timestamp is preserved.

  


  Then I convert each mp4 to fragment mp4 by using

  


  ffmpeg -y   -i videos/output_001.mp4   -force_key_frames "expr:gte(t,n_forced*2)"   -sc_threshold 0   -s 1280x720   -c:v libx264 -b:v 1500k   -c:a copy   -hls_time 100   -hls_playlist_type vod   -hls_segment_type fmp4   -hls_segment_filename "hls1/file%d.m4s"  -copyts hls1/index.m3u8


  


  The above cmd is for the first mp4 file, i did same operation for other mp4 in the list.
Note I used a large hls_time so that each mp4 will result in one fmp4, and also I use copyts to preserve the timestamp.

  


  Then I want to concatenate for example the 2nd and the 3rd fmp4 to generate one mp4, I used

  


  cat init.mp4 > rs.mp4
cat 2nd fmp4 >> rs.mp4
cat 3rd fmp4 >> rs.mp4


  


  However when trying to play the generated rs.mp4, it is 20s black screen then 10s video (corresponding to the 3rd mp4).

  


  I tried another approach which just generated a list of fmp4 directly like this :

  


  ffmpeg -y   -i ../origin-long-video.mp4   -force_key_frames "expr:gte(t,n_forced*2)"   -sc_threshold 0   -s 1280x720   -c:v libx264 -b:v 1500k   -c:a copy   -hls_time 10   -hls_playlist_type vod   -hls_segment_type fmp4   -hls_segment_filename "videos/file%d.m4s"   videos/index.m3u8


  


  And then if I concatenate the 2nd and 3rd generated fmp4 use the same way above, the result mp4 plays well.

  


  I wonder what is the difference between the generated fragment mp4 of the two approach so that they leads to different behavior when concatenation. Thank you !

  


• Pausing ffmpeg : "slow motion" after resume

  15 février 2019, par macmac

  I’m trying to pause/resume ffmpeg process during encoding. The OS is Windows.

  I pause ffmpeg.exe and resume it after a while. The problem is, that during replaying of created movie, it looks like played in "slow-motion" for some time since the moment of pausing. After a while replay speed catches up with actual frame rate.

  The "slow-motion time" seems similar to pause-time, but it is rather not 1:1 relation.

  I use Win32 process/thead API to pause and resume ffmpeg process. But it behaves exactly same when paused/resumed using Windows resource monitor, or using keyboard Pause key.

  Interestingly, same problem occurs when you enter ’c’ key at ffmpeg input and wait a while instead of entering command. Looks like the process blocks at I/O function and then has a problem with frame timestamps.

  I’m neither ffmpeg nor multimedia expert, but it looks to me like problem with some kind of time-stamps and the gap between the moment ffmpeg is paused and resumed.

  Is there maybe some ffmpeg commands or filters that could fix it ? Or a better way to pause/resume it during recording ?