How does the front end compress the video file before uploading?
has recently done a vue project-video upload function.
requirements goes like this: when the user opens the page, there will be a button to turn on the camera. When the user clicks the button, the mobile camera will be turned on to take pictures of the user.
question : after the camera is taken, there is no problem with uploading iOS. Android has been spinning in circles and cannot be uploaded successfully.
after checking, it was found that the Android front camera recorded more than 20 megabytes of files in 10 seconds. While iOS only has a few megabytes
want to know if the front end can compress the audio file. Is there any way to compress the video file before uploading it?
A lot of searching methods on the Internet didn"t work.
Video upload method:
<a href="javascript：;" class="a-upload">
<input type="file" class="videoBtn" id="video" @change="onUpload" accept="video/*" capture="user">
</a>
onUpload(event){
var _this = this;
let orderid = this.$route.query.orderid;
console.log(event)
var reader = new FileReader();
var video = event.target.files[0];
reader.readAsDataURL(video);
reader.onloadend = function () {
console.log(reader.result);
_this.upLoadVideo(reader.result, orderid)
}
},
Video compression should be impossible, or multipart upload instead?
this problem has been solved and I have been forgetting to submit the answer.
queried a lot of information and found that it is impossible for the front end to compress the video at present.
there are two solutions I know to transfer large memory video to the server on the mobile side:
1, upload the video in parts at the front end,
2, upload the video after transcoding at the front end (not recommended).
in the end, I chose to use Qiniu Cloud storage, and the front end uploaded the video to Qiniu Cloud.
Qiniuyun's practice is to upload the video parts of the front end to the server to save
When
is greater than 4m, you can upload it in parts. If it is less than 4m, you can upload it directly
when uploading parts
refer to Qiniuyun link
Qiniuyun JavaScript SDK
.
I laughed when
said it was impossible. Draw the video in proportion to canvas and record it with canvas's captureStream api, depending on whether you are willing to wait. How long the video will take
the same problem as the landlord, has the landlord solved
front-end compression is mostly not possible, only the server-side program can process the video? Video multipart upload is a solution
picture compression you can see https://zhuanlan.zhihu.com/p/. video compression or it is recommended to do it through the backend service API. After uploading, you can do it through ffmpeg.
mention that do not use readAsDataURL and use readAsBinaryString. DataURL is base64 code, after coding, it will soar 1max 3! Or use formData to directly append the file.
I would like to ask you that adding a watermark to a video cannot be achieved at the front end.
there is a js library, jszip, which can be compressed, but the result is not satisfactory. The original video is 12 megabytes and 11 megabytes after compression.
later I used 7zip to compress it on my computer, and it was also compressed from 12 megabytes to 11 megabytes, which seemed to be the same size.
it is estimated that it is very difficult to compress the video without changing the video quality
