README.md
1# 视频下载保存及剪辑压缩上传
2
3### 介绍
4
5本示例主要介绍从网上下载视频到相册，以及从相册中选择视频进行剪辑、压缩、以及上传到服务器进行保存。从相册中选择一个视频保存到沙箱中，再使用FFmpeg命令对沙箱中的视频进行压缩、剪辑。最后使用request.agent将剪辑后的视频上传到服务器进行保存。
6
7### 效果图预览
8
9<img src="./video_trimmer.gif" width="300" >
10
11**使用说明**
12
131. 点击视频列表的背景图片，进入到该视频播放界面。
142. 在视频播放界面，点击右上角的图片按钮，进入到视频分享弹窗。
153. 在视频分享弹窗点击“下载”按钮，将视频下载到相册。
164. 在首页点击右上角的“添加”按钮，从相册中选择要剪辑的视频。
175. 视频选择后，点击界面上视频首页的图片，进入到视频剪辑界面。
186. 在视频剪辑界面，选择要剪辑的时间范围后，点击“完成”按钮，进行视频剪辑。
197. 视频剪辑成功后自动返回到上一页，点击右上角的“保存”按钮，将视频保存到服务器。
20
21### 实现步骤
22
23**下载视频：**
24点击视频列表中某个视频，进入视频播放界面。点击播放界面右上角的图片按钮，进行视频分享界面。点击视频分享界面中的下载按钮，将视频下载到相册保存。
251. 定义下载配置参数 request.agent.Config。源码参考[RequestDownload.ets](./entry/src/main/ets/uploadanddownload/RequestDownload.ets)。
26 ```typescript
27 let downloadConfig: request.agent.Config = {
28 action: request.agent.Action.DOWNLOAD, // 下载
29 url: url, // 下载地址
30 method: 'GET',
31 title: 'download',
32 mode: request.agent.Mode.BACKGROUND, // 下载模式（前台或后台）
33 retry: true, // 是否支持重试
34 network: request.agent.Network.ANY, // 支持的网络类型
35 saveas: `./${localPath}`, // 保存路径
36 overwrite: true // 是否覆盖已存在文件
37 }
38 ```
392. 通过配置创建下载任务，并监听下载进度。当下载完成后通过callback进行回调通知，并删除下载任务。源码参考[RequestDownload.ets](./entry/src/main/ets/uploadanddownload/RequestDownload.ets)。
40
41 ```typescript
42 try {
43 // 创建下载任务
44 this.downloadTask = await request.agent.create(context, downloadConfig);
45 // 监听下载进度
46 this.downloadTask.on('progress', this.progressCallback = (progress: request.agent.Progress) => {
47 logger.info(TAG, `progress = ${progress.processed} ,state = ${progress.state}`);
48 let processed = Number(progress.processed.toString()).valueOf();
49 let size = progress.sizes[0];
50 let process: number = Math.floor(processed / size * CommonConstants.PROGRESS_MAX);
51 if (process < CommonConstants.PROGRESS_MAX) {
52 callback(process, false, '');
53 }
54 })
55 // 通过‘completed’监听下载完成
56 this.downloadTask.on('completed', this.completedCallback = (progress: request.agent.Progress) => {
57 logger.info(TAG, `download complete, file= ${url}, progress = ${progress.processed}, localPath=${localPath}`);
58 // 通过回调函数传递下载进度和下载保存的地址
59 callback(CommonConstants.PROGRESS_MAX, true, localPath);
60 // 删除任务
61 this.deleteTask();
62 })
63 // 启动下载任务
64 await this.downloadTask.start();
65 } catch (error) {
66 const err: BusinessError = error as BusinessError;
67 logger.error(TAG, `task err, Code is ${err.code}, message is ${err.message}`);
68 callback(CommonConstants.PROGRESS_MAX, false, '');
69 }
70 }
71
72 ```
733. 界面收到下载成功的消息后，通过showAssetsCreationDialog拉起权限弹窗，将下载到沙箱中的视频文件通过写数据的方式保存到相册。源码参考[CustomShareDlg.ets](./entry/src/main/ets/customcomponents/CustomShareDlg.ets)。
74
75 ```typescript
76 let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(this.context);
77 try {
78 let photoCreationConfigs: Array<photoAccessHelper.PhotoCreationConfig> = [
79 {
80 title: 'videoDoanload',
81 fileNameExtension: 'mp4',
82 photoType: photoAccessHelper.PhotoType.VIDEO,
83 subtype: photoAccessHelper.PhotoSubtype.DEFAULT,
84 }
85 ];
86 // TODO: 知识点: 拉起授予权限的弹窗，获取将视频保存到图库的权限
87 let desFileUris: Array<string> = await phAccessHelper.showAssetsCreationDialog(srcFileUris, photoCreationConfigs);
88 logger.info(TAG, 'saveVideo des is：' + desFileUris[0]);
89 // 转换为uri
90 let uri: string = fileUri.getUriFromPath(srcFileUris[0]);
91 // 打开沙箱路径下视频
92 const file: fs.File = fs.openSync(uri, fs.OpenMode.READ_WRITE);
93 // 将沙箱视频内容写入buffer
94 const videoSize: number = fs.statSync(file.fd).size;
95 let arrayBuffer: ArrayBuffer = new ArrayBuffer(videoSize);
96 let readLength: number = fs.readSync(file.fd, arrayBuffer);
97 let videoBuffer: ArrayBuffer = buffer.from(arrayBuffer, 0, readLength).buffer;
98 try {
99 // 打开图库视频保存的路径
100 let fileInAlbum = fs.openSync(desFileUris[0], fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
101 // 写入图库
102 await fs.write(fileInAlbum.fd, videoBuffer);
103 // 关闭文件
104 await fs.close(file.fd);
105 await fs.close(fileInAlbum.fd);
106 logger.info(TAG, 'saveVideo success');
107 // 视频保存成功后，删掉沙箱路径下视频
108 fs.unlinkSync(srcFileUris[0]);
109 promptAction.showToast({
110 message: $r("app.string.video_trimmer_save_success"),
111 duration: DURATION
112 });
113 this.controller.close();
114 } catch (error) {
115 logger.error(TAG, `saveVideo failed, code is: ${error.code}, message is: ${error.message}`);
116 }
117 } catch (err) {
118 logger.error(TAG, `showAssetsCreationDialog failed, errCode is: ${err.code}, message is: ${err.message}`);
119 }
120 ```
121
122**视频剪辑：**
123点击首页右上角的"添加"按钮，从相册中选择一个视频存入沙箱。通过MP4Parser.getFrameAtTimeRang接口，传入起始时间，获取视频的第一张图片进行展示。点击该图片进入视频剪辑界面，视频剪辑完成后自动回到本界面，点击右上角的保存按钮，将剪辑后的视频上传到配置好的服务器。
124
1251. 通过photoViewPicker从相册中选择一个视频。源码参考[VideoTrimmer.ets](./entry/src/main/ets/pages/VideoTrimmer.ets)。
126 ```typescript
127 // 创建图库选项实例
128 const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
129 // 设置选择的媒体文件类型
130 photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;
131 // 设置选择媒体文件的最大数目
132 photoSelectOptions.maxSelectNumber = 1;
133 // 创建图库选择器实例
134 const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
135 // 调用photoViewPicker.select()接口拉起图库界面进行图片选择，图片选择成功后，返回photoSelectResult结果集。
136 photoViewPicker.select(photoSelectOptions).then((photoSelectResult) => {
137 if (photoSelectResult !== null && photoSelectResult !== undefined) {
138 // 将视频保存到沙箱中
139 this.saveFileToSandbox(photoSelectResult.photoUris[0]);
140 }
141 }).catch((err: BusinessError) => {
142 logger.error(TAG,
143 `selectPhotoFromAlbum PhotoViewPicker.select failed :, error code: ${err.code}, message: ${err.message}.`);
144 })
145 ```
1462. 将选择的视频写入到沙箱中,写入成功后跳转到视频上传展示界面。源码参考[VideoTrimmer.ets](./entry/src/main/ets/pages/VideoTrimmer.ets)。
147
148 ```typescript
149 /**
150 * 将图库中的视频保存到沙箱中
151 */
152 async saveFileToSandbox(filePathString: string): Promise<void> {
153 this.localSelectVideoUrl[0] = filePathString;
154 try {
155 // 打开图库中视频的文件
156 let resFile = fs.openSync(filePathString, fs.OpenMode.READ_ONLY);
157
158 const dateStr = (new Date().getTime()).toString()
159 let newPath = getContext().cacheDir + "/" + `${dateStr + resFile.name}`;
160 // 将图库中的视频保存到沙箱中
161 fs.copyFileSync(resFile.fd, newPath);
162 // 新的路径
163 this.localSelectVideoUrl[0] = newPath;
164 logger.info(TAG,
165 `selectPhotoFromAlbum, VideoUpload url:${this.localSelectVideoUrl[0].toString()}`);
166 if (this.localSelectVideoUrl[0] !== undefined && this.localSelectVideoUrl[0] !== '') {
167 // 进入到视频上传展示页面
168 DynamicsRouter.pushUri("videotrimmer/VideoUpload", this.localSelectVideoUrl[0]);
169 }
170 } catch (err) {
171 logger.error(TAG, `selectPhotoFromAlbum.select failed :, error code: ${err.code}, message: ${err.message}.`);
172 }
173 }
174 ```
1753. 视频上传展示界面初始时，通过MP4Parser.getFrameAtTimeRang接口获取沙箱中视频的首页图片进行展示。源码参考[VideoUpload.ets](./entry/src/main/ets/pages/VideoUpload.ets)。
176 ```typescript
177 let callBack: ICallBack = {
178 // 回调函数
179 callBackResult: (code: number) => {
180 if (code == 0) {
181 let frameCallBack: IFrameCallBack = {
182 callBackResult: async (data: ArrayBuffer, timeUs: number) => {
183 const imageSource: image.ImageSource = image.createImageSource(data);
184
185 let decodingOptions: image.DecodingOptions = {
186 sampleSize: 1,
187 editable: true,
188 desiredSize: { width: CommonConstants.firstImageWidth, height: CommonConstants.firstImageHeight },
189 desiredPixelFormat: image.PixelMapFormat.RGBA_8888
190 };
191 await imageSource.createPixelMap(decodingOptions).then(async (px: image.PixelMap) => {
192 this.workItem.firstImage = px;
193 imageSource.release();
194 })
195 }
196 }
197 let startTimeUs = CommonConstants.FIRST_IMAGE_START_TIME + '';
198 let endTimeUs = CommonConstants.FIRST_IMAGE_END_TIME + '';
199 // TODO: 知识点：传入起始时间，通过MP4Parser的getFrameAtTimeRang接口获取视频的首页图片
200 MP4Parser.getFrameAtTimeRang(startTimeUs, endTimeUs, MP4Parser.OPTION_CLOSEST, frameCallBack);
201 }
202 }
203 }
204 // TODO: 知识点：设置MP4Parser视频源地址及回调函数
205 MP4Parser.setDataSource(this.workItem.videoSrc, callBack);
206 ```
2074. 视频上传展示界面初始时，配置视频剪辑参数mVideoTrimmerOption。源码参考[VideoUpload.ets](./entry/src/main/ets/pages/VideoUpload.ets)和[视频剪辑参数](./entry/src/main/ets/videotrimmer/VideoTrimmerOption.ets)。
208
209 ```typescript
210 // 视频剪辑参数类
211 export class VideoTrimmerOption {
212 constructor() {
213 this.scaleNum = 100;
214 this.videoMaxTime = 8;
215 this.videoMinTime = 3;
216 this.maxCountRange = 8;
217 this.thumbWidth = 30;
218 this.paddingLineHeight = 10;
219 }
220
221 // 源文件路径
222 @Track srcFilePath: string = '';
223 // 视频剪辑回调接口
224 @Track listener: VideoTrimListener = {
225 onStartTrim() {
226 },
227 onFinishTrim(outputFile: string) {
228 },
229 onCancel() {
230 }
231 };
232 // 视频帧加载回调接口
233 @Track loadFrameListener: VideoLoadFramesListener = {
234 onStartLoad() {
235 },
236 onFinishLoad() {
237 }
238 }
239 // 裁剪事件长度 默认值8秒
240 @Track videoMaxTime?: number = 8;
241 // 最小剪辑时间
242 @Track videoMinTime?: number = 3;
243 // seekBar的区域内一共有多少张图片
244 @Track maxCountRange?: number = 8;
245 // 裁剪视频预览长方形条状左右边缘宽度
246 @Track thumbWidth?: number = 30;
247 // 裁剪视频预览长方形条状上下边缘高度
248 @Track paddingLineHeight?: number = 10;
249 // 当加载帧没有完成，默认的占位图
250 @Track framePlaceholder?: PixelMap;
251 // 裁剪视频预览长方形条状区域背景颜色
252 @Track frameBackground?: string;
253 @Track context?: common.UIAbilityContext;
254 // 裁剪时压缩比率，100 为1：1，即不压缩
255 @Track scaleNum?: number = 100;
256 }
257 ```
258 ```typescript
259 // 视频剪辑参数选项
260 let tempOption = new VideoTrimmerOption();
261 tempOption.listener = this.initListener;
262 tempOption.loadFrameListener = this.initLoadFrameListener;
263 tempOption.srcFilePath = this.workItem.videoSrc;
264 this.mVideoTrimmerOption = tempOption;
265 ```
266
2675. 点击视频图片进入到视频剪辑模块，剪辑成功后自动回到本模块。源码参考[VideoUpload.ets](./entry/src/main/ets/pages/VideoUpload.ets)。
268
269 ```typescript
270 @State isTrimmer: boolean = false; // 是否处于剪辑状态
271
272 if (!this.isTrimmer) {
273 this.VideoUpdateInfo();
274 } else {
275 // TODO: 知识点: 视频剪辑组件VideoTrimmerView。 videoTrimmerOption：视频剪辑相关参数
276 VideoTrimmerView({ videoTrimmerOption: this.mVideoTrimmerOption!! })
277 }
278 ```
279
2806. 视频剪辑模块初始化时，根据参数中小图的个数，通过MP4Parser.getFrameAtTimeRang命令循环生成小图列表以便用户选择剪辑时间段。其中在生成第一张小图的时候，根据压缩比率参数，生成视频压缩命令。源码参考[VideoTrimmerView.ets](./entry/src/main/ets/videotrimmer/VideoTrimmerView.ets)。。
281
282 ```typescript
283 initImageList() {
284 // 将视频长度分割为一秒一张图片
285 let videoThumbs = new Array<ThumbContent>()
286 for (let i = 0; i < this.mDuration; i = i + CommonConstants.MS_ONE_SECOND) {
287 let temp = new ThumbContent();
288
289 if (this.videoTrimmerOption.framePlaceholder) {
290 temp.framePlaceholder = this.videoTrimmerOption.framePlaceholder;
291 }
292 if (this.videoTrimmerOption.frameBackground) {
293 temp.frameBackground = this.videoTrimmerOption.frameBackground;
294 }
295 videoThumbs.push(temp);
296 }
297
298 let firstLoadMax = this.maxCountRange;
299 if (this.mDuration / CommonConstants.MS_ONE_SECOND < this.maxCountRange) {
300 firstLoadMax = Math.ceil(this.mDuration / CommonConstants.MS_ONE_SECOND);
301 }
302
303 let callBack: ICallBack = {
304 callBackResult: (code: number) => {
305 if (code == 0) {
306 let count = 0;
307
308 let frameCallBack: IFrameCallBack = {
309 callBackResult: async (data: ArrayBuffer, timeUs: number) => {
310 const imageSource: image.ImageSource = image.createImageSource(data);
311 // TODO: 知识点: 如果要压缩分辨率，则加载第一张图时，获取视频的压缩分辨率相关参数信息，生成视频压缩命令
312 if (this.videoTrimmerOption!.scaleNum! > 0 &&
313 this.videoTrimmerOption!.scaleNum !== CommonConstants.SCALE_NUM &&
314 this.imageWidth !== 0) {
315 // 读取图片信息
316 const imageInfo: image.ImageInfo = await imageSource!.getImageInfo();
317 this.imageWidth = imageInfo.size.width;
318 this.imageHeight = imageInfo.size.height;
319 // 生成视频压缩命令
320 this.scaleCmd =
321 'scale=' +
322 ((this.imageWidth / CommonConstants.SCALE_NUM) * this.videoTrimmerOption!.scaleNum!).toString() +
323 ':' +
324 ((this.imageHeight / CommonConstants.SCALE_NUM) * this.videoTrimmerOption!.scaleNum!).toString()
325 }
326
327 let videoThumbWidth: number = vp2px((this.mSeekBarWidth - 2 * this.thumbWidth) / this.maxCountRange);
328 let videoThumbHeight: number = vp2px(this.mSeekBarHeight);
329 let decodingOptions: image.DecodingOptions = {
330 sampleSize: 1,
331 editable: true,
332 desiredSize: { width: videoThumbWidth, height: videoThumbHeight },
333 desiredPixelFormat: image.PixelMapFormat.RGBA_8888
334 };
335 // TODO: 知识点: 在回调函数中循环生成小图，更新到小图列表中
336 imageSource.createPixelMap(decodingOptions).then((px: image.PixelMap) => {
337 let second = timeUs / CommonConstants.US_ONE_SECOND;
338 let framePos = count;
339 if (second == framePos) {
340 logger.info(TAG,
341 'framePos equal second, second=' + second + ' timeUs=' + timeUs + ' length=' + videoThumbs.length);
342 videoThumbs[second].pixelMap = px;
343 this.updateList(videoThumbs);
344 count++;
345 imageSource.release();
346 } else {
347 logger.info(TAG, 'framePos not equal second, framePos=' + framePos + ' timeUs=' + timeUs);
348 videoThumbs[framePos].pixelMap = px;
349 this.updateList(videoThumbs);
350 count++;
351 imageSource.release();
352 }
353 if (count == firstLoadMax) {
354 this.videoTrimmerOption.loadFrameListener.onFinishLoad();
355 }
356 }).catch((err: Error) => {
357 // 部分视频创建图片异常，直接返回
358 console.error("createPixelMap Failed, err = " + err.name + ", message = " + err.message);
359 this.videoTrimmerOption.loadFrameListener.onFinishLoad();
360 })
361 }
362 }
363 // TODO: 知识点: 根据开始、结束时间，通过MP4Parser.getFrameAtTimeRang命令循环生成小图
364 let startTime = 0 * CommonConstants.US_ONE_SECOND + '';
365 let endTime = (firstLoadMax - 1) * CommonConstants.US_ONE_SECOND + '';
366 // 通过开始、结束时间，回调函数，获取视频小图
367 MP4Parser.getFrameAtTimeRang(startTime, endTime, MP4Parser.OPTION_CLOSEST, frameCallBack);
368 } else {
369 logger.info(TAG, 'setDataSource fail, error code =' + code.toString());
370 }
371 }
372 }
373 this.videoTrimmerOption.loadFrameListener.onStartLoad();
374 // 设置视频源和回调函数
375 MP4Parser.setDataSource(this.videoTrimmerOption.srcFilePath, callBack);
376 logger.info(TAG, "initList list size=" + videoThumbs.length);
377 this.updateList(videoThumbs);
378 }
379 ```
380
3817. 在视频剪辑界面，拉动左右进度条，根据拉动后的位置，计算选择要剪辑的时间范围，源码参考[RangeSeekBarView.ets](./entry/src/main/ets/videotrimmer/RangeSeekBarView.ets)。
382获取拉动位置：
383 ```typescript
384 .onActionUpdate((event?: GestureEvent) => {
385 let touchXNew: number = this.clearUndefined(event?.offsetX);
386 let deltax: number = touchXNew - this.touchXOld;
387 // 左边滑块移动
388 if (this.touchStatus == this.touch_left_thumb) {
389 this.leftThumbUpdate(deltax);
390 } else if (this.touchStatus == this.touch_right_thumb) {
391 // 右边滑块移动
392 this.rightThumbUpdate(deltax);
393 } else if (this.touchStatus == this.touch_hor_scroll) {
394 this.scrollUpdate(deltax);
395 }
396 this.touchDeltaX = deltax;
397 this.touchXOld = this.clearUndefined(event?.offsetX);
398 })
399 .onActionEnd((event?: GestureEvent) => {
400 this.touchStatus = this.touch_hor_scroll;
401 this.onRangeStopScrollChanged();
402 })
403 ```
404 根据拉动位置计算选择的时间段：
405 ```typescript
406 // 选取时间变动事件
407 onRangeValueChanged() {
408 let x0: number = this.scroller.currentOffset().xOffset;
409 let start: number = x0 + this.leftThumbRect[2] - this.leftThumbWidth;
410 let end: number = start + this.transparentWidth;
411
412 let startTime: number = start * CommonConstants.US_ONE_SECOND / this.msPxAvg;
413 this.leftText = this.showThumbText(startTime);
414 let endTime: number = end * CommonConstants.US_ONE_SECOND / this.msPxAvg;
415 this.rightText = this.showThumbText(endTime);
416
417 if (this.mRangSeekBarListener) {
418 this.mRangSeekBarListener.onRangeSeekBarValuesChanged(startTime, endTime);
419 }
420 }
421 ```
422
4238. 点击完成按钮，使用MP4Parser.ffmpegCmd接口，根据选择的起始时间和视频压缩命令，对视频进行压缩和剪辑，并保存到本地沙箱。源码参考[VideoTrimmerView.ets](./entry/src/main/ets/videotrimmer/VideoTrimmerView.ets)。
424
425 ```typescript
426 // 最后一帧保护
427 let sTime1 = 0;
428 let eTime1 = 0;
429 let lastFrameTime =
430 Math.floor(this.mDuration / CommonConstants.MS_ONE_SECOND) * CommonConstants.MS_ONE_SECOND;
431 if (this.endTruncationTime > lastFrameTime) {
432 eTime1 = lastFrameTime;
433 sTime1 = eTime1 - (this.endTruncationTime - this.startTruncationTime);
434 eTime1 += CommonConstants.MS_ONE_SECOND; // 补偿1s
435 } else {
436 sTime1 = this.startTruncationTime;
437 eTime1 = this.endTruncationTime;
438 }
439 // 选取的裁剪时间段
440 let sTime = TimeUtils.msToHHMMSS(sTime1);
441 let eTime = TimeUtils.msToHHMMSS(eTime1);
442 // 原视频
443 let srcFilePath = this.videoTrimmerOption.srcFilePath;
444 // 保留原来的文件名
445 let fileName: string | undefined = srcFilePath!.split('/').pop()!.split('.')[0];
446 // 组装剪辑后的文件路径(以 原来的文件名+当前时间 命名)
447 let outFilePath: string =
448 getContext(this).cacheDir + '/' + fileName + '_' + TimeUtils.format(new Date()) + '.mp4';
449 // 剪辑回调函数
450 let callback: ICallBack = {
451 callBackResult: (code: number) => {
452 if (code == 0) {
453 if (this.videoTrimmerOption) {
454 // 通知上层调用
455 this.videoTrimmerOption.listener.onFinishTrim(outFilePath);
456 this.isTrimming = false;
457 }
458 }
459 }
460 }
461 // TODO: // 知识点： 根据开始、结束时间，视频源以及目标文件地址对视频进行剪辑
462 this.videoClip(sTime, eTime, srcFilePath, outFilePath, this.scaleCmd, callback);
463 ```
464
465 ```typescript
466 // TODO: 知识点: 视频剪辑。 scaleCmd为视频压缩命令
467 videoClip(sTime: string, eTime: string, srcFilePath: string, outFilePath: string, scaleCmd: string,
468 callback: ICallBack) {
469 let ffmpegCmd: string = '';
470 if (scaleCmd !== '') {
471 ffmpegCmd =
472 'ffmpeg -y -i ' + srcFilePath + ' -vf ' + scaleCmd + ' -c:v mpeg4 -c:a aac -ss ' + sTime + ' -to ' + eTime +
473 ' ' + outFilePath;
474 } else {
475 ffmpegCmd = 'ffmpeg -y -i ' + srcFilePath + ' -c:v mpeg4 -c:a aac -ss ' + sTime + ' -to ' + eTime +
476 ' ' + outFilePath;
477 }
478 logger.info(TAG, 'videoClip cmd: ' + ffmpegCmd);
479 MP4Parser.ffmpegCmd(ffmpegCmd, callback);
480 }
481 ```
482
483**视频上传：**
484视频剪辑成功后自动跳转到视频上传界面。点击右上角的“保存”按钮，如果检测到没有配置服务器，则弹窗提示设置服务器地址，设置后重新点击右上角“保存”按钮，上传视频到服务器进行保存。
4851. 参照[environment](./environment/README.md)配置服务器地址，视频剪辑完成后点击“保存”，视频将上传到该服务器地址。
486
4872. 点击保存时，检测是否配置了服务器。源码参考[VideoUpload.ets](./entry/src/main/ets/pages/VideoUpload.ets)。
488 ```typescript
489 // 获取服务器地址
490 this.serverUrl = await urlUtils.getUrl(getContext(this) as common.UIAbilityContext);
491 if (this.serverUrl === undefined || this.serverUrl === '') {
492 // 打开自定义对话框，配置服务器地址
493 await this.customSetServerDlg.open();
494 }
495 this.serverUrl = await urlUtils.getUrl(getContext(this) as common.UIAbilityContext);
496 logger.info(TAG, 'serverUrl is = ' + this.serverUrl);
497 if (this.serverUrl !== undefined && this.serverUrl.length > 1) {
498 return true;
499 } else {
500 return false;
501 }
502 ```
503
5043. 定义上传配置参数 request.agent.Config。源码参考[RequestUpload.ets](./entry/src/main/ets/uploadanddownload/RequestUpload.ets)。
505 ```typescript
506 private config: request.agent.Config = {
507 action: request.agent.Action.UPLOAD, // 上传
508 headers: HEADER,
509 url: '', // 上传服务器地址
510 mode: request.agent.Mode.FOREGROUND, // 前台方式
511 method: 'POST',
512 title: 'upload',
513 network: request.agent.Network.ANY, // 网络类型
514 data: [],
515 token: UPLOAD_TOKEN
516 }
517 ```
518
5194. 根据配置创建上传任务，并监听上传进度。当上传完成后通过callback进行回调通知，并删除上传任务。源码参考[RequestUpload.ets](./entry/src/main/ets/uploadanddownload/RequestUpload.ets)。
520 ```typescript
521 private uploadTask: request.agent.Task | undefined = undefined; // 上传任务
522
523 // 获取本地上传文件
524 this.config.data = await this.getFilesAndData(context.cacheDir, fileUris);
525 // TODO : 知识点 将视频上传到服务器地址
526 // 获取服务器地址
527 this.config.url = await urlUtils.getUrl(context);
528 // 前台模式
529 this.config.mode = request.agent.Mode.FOREGROUND;
530 try {
531 // 创建上传任务
532 this.uploadTask = await request.agent.create(context, this.config);
533 logger.info(TAG, `create uploadTask success, TaskID= ${this.uploadTask.tid}`);
534 // 监听上传进度
535 this.uploadTask.on('progress', this.progressCallback = (progress: request.agent.Progress) => {
536 logger.info(TAG, `progress, progress = ${progress.processed} ${progress.state}`);
537 let processed = Number(progress.processed.toString()).valueOf();
538 let size = progress.sizes[0];
539 let process: number = Math.floor(processed / size * CommonConstants.PROGRESS_MAX);
540 if (process < CommonConstants.PROGRESS_MAX) {
541 // 进度通知
542 callback(process, false);
543 }
544 });
545 // 下载完成事件
546 this.uploadTask.on('completed', this.completedCallback = (progress: request.agent.Progress) => {
547 logger.info(TAG, `complete, progress = ${progress.processed}, state= ${progress.state}`);
548 // 通知下载完成
549 callback(CommonConstants.PROGRESS_MAX, true);
550 // 删除任务
551 this.deleteTask();
552 });
553 }
554 ```
555
5565. 视频上传成功后，删除本地裁剪的视频，然后返回视频列表首页。源码参考[VideoUpload.ets](./entry/src/main/ets/pages/VideoUpload.ets)。
557 ```typescript
558 // 上传成功后删除裁剪的视频
559 fs.unlinkSync(this.workItem.videoSrc);
560 // 视频地址替换为服务器上的视频
561 this.workItem.videoSrc = this.serverUrl + this.workItem.videoSrc.split('/').pop();
562
563 // 保存首页背景图
564 async saveFirstImage() {
565 const url = await savePixelMap(getContext(this), this.workItem.firstImage as PixelMap, getTimeStr());
566 this.workItem.firstImage = fileUri.getUriFromPath(url);
567 this.workItem.date = TimeUtils.getCurrentTime();
568 // 通知视频列表首页更新上传的数据
569 AppStorage.setOrCreate('addWorkItem', this.workItem);
570 await this.customSetServerDlg.close();
571 DynamicsRouter.popAppRouter();
572 }
573 ```
574
5756. 视频列表首页监听“addWorkItem”数据，更新上传的视频数据。源码参考[VideoTrimmer.ets](./entry/src/main/ets/pages/VideoTrimmer.ets)。
576 ```typescript
577 @StorageLink('addWorkItem') @Watch('getUploadWorkItem') addWorkItem: WorkItem =
578 new WorkItem('', '', '', '', '', true); // 上传到服务器的视频信息
579
580 // 获取并添加新发表的视频信息
581 getUploadWorkItem(): void {
582 if (this.addWorkItem.videoSrc !== undefined && this.addWorkItem.videoSrc !== '') {
583 this.workList.addData(0, this.addWorkItem);
584 AppStorage.setOrCreate('addWorkItem', new WorkItem('', '', '', '', '', false));
585 }
586 }
587 ```
588
589### 高性能知识点
590
591本示例使用了[LazyForEach](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-rendering-control-lazyforeach.md) 进行数据懒加载优化，以降低内存占用和渲染开销。
592
593### 工程结构&模块类型
594
595 ```
596videotrimmer // har类型
597|---constants // 常量
598| |---Constants.ets // 通用常量
599| |---DoanloadConstants.ets // 下载常量
600|---customcomponents // 自定义组件
601| |---CustomLoadingProgressDlg.ets // 加载进度
602| |---CustomSetServerDlg.ets // 设置上传下载服务器
603| |---CustomShareDlg.ets // 视频分享
604| |---CustomTabBar.ets // 首页底部自定义组件
605|---model
606| |---ShareInfo.ets // 分享信息数据
607| |---TabBarModel.ets // Tab组件信息
608| |---WorkListDataSource.ets // IDataSource处理数据监听的基本实现
609| |---WorkItemModel.ets // 单条视频信息模型
610|---pages
611| |---VideoDetail.ets // 视图层-视频播放界面
612| |---VideoTrimmer.ets // 视图层-应用主页面
613| |---VideoUpload.ets // 视图层-视频保存上传界面
614|---uploadanddownload // 上传下载
615| |---RequestDownload.ets // 下载类
616| |---VideoUpload.ets // 上传类
617|---utils // 通用工具
618| |---FileUtil.ets // 文件处理
619| |---Logger.ets // 日志
620| |---TimeUtils.ets // 时间处理
621| |---UrlUtils.ets // 服务器地址处理
622|---videoplaycomponents // 视频播放组件
623| |---VideoPlayController.ets // 视频控制器
624| |---VideoPlayListener.ets // 视频播放侦听回调
625| |---XComponentVideo.ets // 视频播放组件
626|---videotrimmer // 视频裁剪组件
627| |---RangeSeekBarView.ets // 视频剪辑时间长度选择组件
628| |---RangSeekBarListener.ets // 视频剪辑长度侦听接口
629| |---RangSeekBarOption.ets // 视频剪辑长度选项
630| |---VideoLoadFramesListener.ets // 视频帧加载回调接口
631| |---VideoThumbListView.ets // 视频帧图片列表预览组件
632| |---VideoThumbOption.ets // 视频帧图片选项
633| |---VideoTrimListener.ets // 视频剪辑回调接口
634| |---VideoTrimmerOption.ets // 视频剪辑选项
635| |---VideoTrimmerView.ets // 视频裁剪组件
636 ```
637
638### 模块依赖
639
640 依赖[mp4parser](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fmp4parser)来使用FFmpeg命令。
641
642### 参考资料
643
644 [video_trimmer](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fvideotrimmer)源码
645 [XComponent组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-xcomponent.md)
646 [mp4parser](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fmp4parser)
647 [上传下载](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-basic-services-kit/js-apis-request.md)
648
649### 相关权限
650
651| 权限名 | 权限说明 | 级别 |
652|----------------------------------------|----------------------------| ------------ |
653| ohos.permission.INTERNET | 允许访问网络。 | normal |
654| ohos.permission.READ_MEDIA | 允许应用读取用户外部存储中的媒体文件信息。 | normal |
655| ohos.permission.WRITE_MEDIA | 允许应用读写用户外部存储中的媒体文件信息。 | normal |
656| ohos.permission.CAMERA | 允许应用使用相机。 | normal |
657
658
659### 依赖
660
661- 不涉及
662
663### 约束与限制
664
6651.本示例仅支持标准系统上运行,支持设备：手机。
666
6672.本示例为Stage模型，支持API12版本SDK，SDK版本号（API Version 12 Release）。
668
6693.本示例需要使用DevEco Studio版本号（DevEco Studio 5.0.0 Release）及以上版本才可编译运行。
670
671
672### 下载
673如需单独下载本工程，执行如下命令：
674
675```
676git init
677git config core.sparsecheckout true
678echo code/BasicFeature/Media/videotrimmer/ > .git/info/sparse-checkout
679git remote add origin https://gitee.com/openharmony/applications_app_samples.git
680git pull origin master
681```
