Articles included :github.com/CatsAndMice…

The company needs to shoot videos and upload them. Due to the large volume of videos, uploading often fails due to timeout. Before uploading this video file, it is necessary to process the file. In practice, FFMPEM is selected for operation. The purpose of this article is to share ffMPEM’s personal experience in stepping pits with everyone

Ffmpeg video compression transcoding

The uploaded video will be stored in [Ali Cloud OSS](object storage OSS_ Cloud Storage Service_Enterprise Data Management _ Storage-Aliyun.com). If the video is compressed into a compressed package and uploaded, the server needs to decompress the uploaded package. The third-party server does not provide a similar solution. In this way, when a client plays a video, it has to download the online compressed package and then decompress it and play it again. It will take time and performance to play the video one by one, and the user experience is not friendly. Therefore, it cannot be compressed into a compressed package and uploaded.

Mobile video is usually shot in MP4 or MOV format. Can you convert the video to other smaller video formats? [FfmPEg. js](Kagami/ FFmPEg. js: Port of FFmPEG with Emscripten (github.com)), FFMPEG pure C,C++ programming language.

Why a non-javascpit language can run in a browser environment is not covered in this article.

You are interested, please read [WebAssembly] (WebAssembly concept – WebAssembly | MDN (mozilla.org))

Ffmpeg compressed video using just a few lines of code, copy and paste it.

However, a few simple lines of code, run but error 😂

SharedArrayBuffer is not defined in Chrome 92 · Issue #231 · ffmpegwasm/ffmpeg.wasm (github.com)) The problem was that the chrome92 release limited SharedArrayBuffer usage

SharedArrayBuffer error resolved

1. SharedArrayBuffer degrades ArrayBuffer
if(! crossOriginIsolated) { SharedArrayBuffer =ArrayBuffer;
}
Copy the code

Disadvantages: Can affect functionality

Ffmpeg. js failed to run

2. Set the response COOP and COEP status
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Copy the code

Disadvantages: Loading cross-domain resources, such as iframe,script tag loading, etc

Add field to server response header:

Successful operation, however the video compression takes a long time

Iframe resources cannot be loaded

conclusion

Ffmpeg transcoding compression takes a long time, and COOP and COEP need to be set, which affects the loading of iframe,script tags and other cross-domain resources. Ffmpeg is not suitable for user-uploaded video scenarios

Ffmpeg is obtained using the detailed code :github.com/CatsAndMice…

reference

SharedArrayBuffer is not defined – Nuggets (juejin. Cn)