Commit cd6d9e02 authored by limingzhe's avatar limingzhe

fix: debug

parent e8b52654
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -27,11 +27,12 @@
"@tweenjs/tween.js": "~18.5.0",
"ali-oss": "^6.5.1",
"compressing": "^1.5.0",
"crypto-js": "^4.2.0",
"ng-zorro-antd": "^8.5.2",
"node-sass": "^4.0.0",
"rxjs": "~6.5.4",
"spark-md5": "^3.0.0",
"tslib": "^1.10.0",
"node-sass": "^4.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
......
<div class="p-video-box">
<div class="up-video" style="display: flex;">
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<nz-upload class="p-image-uploader" [nzDisabled]="uploading"
[nzShowUploadList]="false"
nzAccept = ".mp4"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="handleChange($event)"
style="margin-right: 1rem">
<div class="up-video" style="display: flex;">
<nz-upload class="p-image-uploader" [nzDisabled]="uploading" [nzShowUploadList]="false" nzAccept=".mp4"
(nzChange)="handleChange($event)" [nzCustomRequest]="customReq"
style="margin-right: 1rem">
<button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading"
[nzLoading]="uploading" >
[nzLoading]="uploading">
<i nz-icon nzType="plus" nzTheme="outline"></i>
<span>{{ uploading ? 'Uploading .. ' + progress + '%': 'Select Video' }}</span>
<!--<span>Select Video</span>-->
<span>{{ uploading ? 'Uploading' : 'Select Video' }}</span>
</button>
</nz-upload>
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--style="margin-right: 1rem"-->
<!--type="button"-->
<!--[nzLoading]="uploading"-->
<!--(click)="handleUpload()"-->
<!--[disabled]="!videoFile || uploading">-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--</button>-->
<!--
<button type="button"
(click)="extraCover()"
nz-button nzType="default"
[disabled]=" !(videoUrl && videoUrl.constructor.name === 'String')">设置封面</button>
-->
<!--
<nz-divider></nz-divider>
<div [style.display]="!uploading?'none':''" style="position:relative">
<div style="width: calc( 100% - 20px);">
<nz-progress [nzPercent]="progress">
</nz-progress>
</div>
<i (click)="cancelUpload()" class="anticon anticon-close-circle" style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);cursor: pointer"></i>
</div>
-->
</div>
<div class="p-box d-flex align-items-center p-video-uploader">
<div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading">
<i nz-icon nzType="upload" nzTheme="outline"></i>
<div class="m-3"></div>
<span>Click here to upload video</span>
<div class="mt-5 p-progress-bar" *ngIf="uploading">
<div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>
<div class="p-progress-value">{{progress}}%</div>
</div>
<!-- <button type="button" nz-button nzType="default" *ngIf="showCapture && !uploading" [disabled]="uploading"
(click)="captureVideo()"
[nzLoading]="uploading">
<i nz-icon nzType="camera" nzTheme="outline"></i>
<span>截图</span>
</button> -->
</div>
<div class="p-upload-progress-bg dddd " *ngIf="uploading"
[ngClass]="{'smart-bar': showUploadBtn}" >
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
Uploading...
<div class="p-box d-flex align-items-center p-video-uploader">
<div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading">
<i nz-icon nzType="upload" nzTheme="outline"></i>
<div class="m-3"></div>
<span>Click here to upload video</span>
<div class="mt-5 p-progress-bar" *ngIf="uploading">
<div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>
<div class="p-progress-value">{{progress}}%</div>
</div>
</div>
</div>
<div class="p-upload-check-bg" *ngIf="checking">
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
<i nz-icon nzType="loading" nzTheme="outline"></i>Checking...
<div class="p-upload-progress-bg" *ngIf="uploading" [ngClass]="{'smart-bar': showUploadBtn}">
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
Uploading...
</div>
</div>
<div class="p-upload-check-bg" *ngIf="checking">
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
<i nz-icon nzType="loading" nzTheme="outline"></i>Checking...
</div>
</div>
<div class="p-preview" *ngIf="!uploading&&playVedioUrl">
<video crossorigin="anonymous" [src]="playVedioUrl" controls #videoNode></video>
<!-- <video crossorigin="anonymous" [src]="safeVideoUrl()" controls #videoNode></video> -->
</div>
</div>
<div class="p-preview" *ngIf="!uploading && videoUrl " >
<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>
<!-- <video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video> -->
<div [style.display]="!checkVideoExists?'none':''">
<span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span>
</div>
</div>
<div [style.display]="!checkVideoExists?'none':''">
<span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span>
</div>
</div>
</div>
\ No newline at end of file
import {Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output, SecurityContext, ViewChild} from '@angular/core';
import {NzMessageService, UploadChangeParam, UploadFile, UploadFileStatus} from 'ng-zorro-antd';
import {Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SecurityContext, ViewChild} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {HttpClient, HttpHeaders, HttpRequest, HttpEvent, HttpEventType, HttpResponse, HttpParams} from "@angular/common/http";
import {NzMessageService, UploadChangeParam, UploadFile, UploadFileStatus, UploadXHRArgs} from 'ng-zorro-antd';
import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
import cryptoJs from 'crypto-js';
import {v4} from 'uuid';
function httpHeadCall(requsetUrl, callback) {
let xhr = new XMLHttpRequest();
try {
xhr.onreadystatechange = () => {
try {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
callback(false);
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
callback(false);
};
xhr.ontimeout = (e) => {
callback(false);
};
} catch (e) {
callback(false);
}
}
@Component({
......@@ -8,7 +44,7 @@ import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
templateUrl: './upload-video.component.html',
styleUrls: ['./upload-video.component.scss']
})
export class UploadVideoComponent implements OnChanges, OnDestroy {
export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit {
uploading = false;
checking = false;
checkVideoExists = false;
......@@ -24,8 +60,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
@Input()
videoUrl = '';
@ViewChild('videoNode', {static: true })
videoNode: ElementRef;
@ViewChild('videoNode', {static: false }) videoNode: ElementRef;
......@@ -38,11 +73,16 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
@Output()
videoUploadFailure = new EventEmitter();
@Output()
onCapture = new EventEmitter();
@Output()
extractVideoCover = new EventEmitter();
@Input()
showUploadBtn = true;
@Input()
showCapture = true;
@Input()
item: any;
// videoItem = null;
......@@ -51,7 +91,8 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
uploadData;
constructor(private nzMessageService: NzMessageService,
private sanitization: DomSanitizer
private sanitization: DomSanitizer,
private http:HttpClient
// private cwService: _coursewareService,
// private resService: ResourceService
) {
......@@ -59,16 +100,27 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
this.videoFile = null;
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadUrl = (<any> window).courseware.uploadVideoUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
window['air'].getUploadVideoCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
}
ngOnInit() {
this.playVedioUrl = this.videoUrl.replace(`_h.mp4`, `_l.mp4`);;
}
md5Short(str, _salt) {
return cryptoJs.MD5(str + _salt).toString();
}
ngOnChanges() {
// if (!this.videoFile || this.showUploadBtn) {
// return;
......@@ -80,62 +132,132 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
URL.revokeObjectURL(this.videoUrl);
}
safeVideoUrl(url) {
console.log(url);
return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`;
playVedioUrl = '';
safeVideoUrl() {
const url = this.videoUrl.replace(`_h.mp4`, `.mp4`).replace(`.mp4`, `_l.mp4`);
console.log(`=============safeVideoUrl==============`,url);
httpHeadCall(url, (flag)=>{
if (flag) {
this.playVedioUrl = url;
} else {
setTimeout(() => {
this.safeVideoUrl();
}, 500);
}
});
return this.playVedioUrl;
}
videoLoadedMetaData() {
}
}
// fileToBlob(file) {
// let reader = new FileReader();
// reader.addEventListener('load', (e) => {
// let base64 = e.target.result;
// let blob = new Blob([base64], { type: file.type });
// console.log("Blob对象", blob);
// })
// reader.readAsDataURL(file)
// }
customReq(item: UploadXHRArgs) {
// md5值计算
const protocolStr = document.location.protocol;
const baseCDN = `${protocolStr}//teach.cdn.ireadabc.com`;
const baseAPI = `${protocolStr}//openapi.iteachabc.com`;
const fileName = v4().replace(/-/g, "");
httpHeadCall(`${baseCDN}/${fileName}_h.mp4`, (flag)=>{
if (flag) {
item.onSuccess!({url: `${baseCDN}/${fileName}.mp4`}, item.file!, event);
} else {
this.http.get(`${baseAPI}/oss/timestamp`, {}).subscribe((tmps: string) => {
const sign = cryptoJs.MD5(tmps+"iplayABC2019").toString();
const params = new HttpParams().set('sign', sign).set('stmp', tmps);
this.http.get(`${baseAPI}/oss/signature`, {params}).subscribe((res) => {
const serve = res['data'];
const formData = new FormData();
formData.append('key', fileName+`.mp4`);
formData.append('bucket', `iplayabc-worker-queue-videolmh`);
formData.append('OSSAccessKeyId', serve.OSSAccessKeyId);
formData.append('policy', serve.policy);
formData.append('Signature', serve.signature);
formData.append('success_action_status', '200');
formData.append('file', item.file as any);
//设置cors跨域请求
const headerstemp = new HttpHeaders({ 'Access-Control-Allow-Origin': '*' });
item.action = `${protocolStr}//iplayabc-worker-queue-videolmh.oss-cn-beijing.aliyuncs.com`;
const req = new HttpRequest('POST', item.action!, formData, {
headers: headerstemp,
reportProgress: true, //进度条
// withCredentials: true
});
// Always returns a `Subscription` object. nz-upload would automatically unsubscribe it at correct time.
return this.http.request(req).subscribe(
(event: HttpEvent<{}>) => {
if (event.type === HttpEventType.UploadProgress) {
if (event.total! > 0) {
// tslint:disable-next-line:no-any
(event as any).percent = (event.loaded / event.total!) * 100;
}
item.onProgress!(event, item.file!);
} else if (event instanceof HttpResponse) {
item.onSuccess!({url: `${baseCDN}/${fileName}.mp4`}, item.file!, event);
}
},
err => {
console.log(err);
item.onError!(err, item.file!);
}
);
});
});
}
});
};
handleChange(info: UploadChangeParam/* { type: string, file: UploadFile, event: any }*/): void {
console.log('info:' , info);
console.log(info);
switch (info.type) {
case 'start':
// this.beforeUpload(info.file);
if (!this.checkSelectFile(info.file)) {
return;
}
this.uploading = true;
this.progress = 0;
break;
case 'success':
this.uploadSuccess(info.file);
// this.beforeUpload(info.file);
// this.uploadSuccess(info.file);
break;
case 'progress':
this.progress = info.event.percent;
console.log('this.progress: ', this.progress);
this.progress = Math.floor(this.progress);
this.doProgress(this.progress);
// this.doProgress(this.progress);
break;
}
}
captureVideo() {
const video = this.videoNode.nativeElement;
const cvs = document.createElement('canvas');
const ctx = cvs.getContext("2d");
cvs.width = video.videoWidth;
cvs.height = video.videoHeight;
ctx.drawImage(video, 0, 0, cvs.width, cvs.height);
cvs.toBlob((blob)=>{
this.onCapture.emit(blob)
})
}
checkSelectFile(file) {
if (!file.lastModified) {
return false;
}
const delta = 500;
const delta = 5000;
const isOverSize = (file.size / 1024 / 1024) < delta;
if (!isOverSize) {
this.nzMessageService.error(`video must smaller than ${delta}MB!`);
......@@ -149,45 +271,20 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
}
uploadSuccess = (file) => {
this.nzMessageService.info('Upload Success');
// this.updateStatus(false);
this.uploading = false;
this.videoFile = null;
// this.updateSource(url);
this.videoUrl = file.response.url;
// console.log(this.picUrl)
// this.uploadFinished(url);
// if (!inOSS) {
const vid = document.createElement('video');
vid.addEventListener('loadedmetadata', () => {
const height = vid.videoHeight;
const width = vid.videoWidth;
let duration = vid.duration;
if (duration) {
duration = duration * 1000;
}
file.height = height;
file.width = width;
file.duration = duration;
vid.preload = 'none';
vid.src = '';
vid.remove();
this.videoUploaded.emit(file.response);
// this.resService.updateVideo(id, {width, height, duration}).then( () => {
// this.videoUploaded.emit({res_id: id, id, name, hash, url});
// });
});
vid.src = file.response.url;
// } else {
// this.videoUploaded.emit(file.response);
// }
this.videoUploaded.emit(file.response);
// const newName = '';
// this.playVedioUrl = `http://iplayabc-worker-queue-videolmh.oss-cn-beijing.aliyuncs.com/${newName}.mp4`
setTimeout(() => {
this.safeVideoUrl();
}, 2000);
}
......@@ -210,7 +307,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
p = 0;
}
// console.log(Math.floor(p * 100));
// this.progress = Math.floor(p * 100);
this.progress = Math.floor(p * 100);
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment