|
|
@@ -306,7 +306,7 @@
|
|
|
<previewVideoDialog ref="previewVideoDialogRef" />
|
|
|
<uploadFile v-if="progressData.uploadVideo" ref="uploadFileRef" @progressUpdate="videoProgressUpdate" @delUpload="videoDelUpload" @success="updateVideoSuccess" @startUpload="videoStartUpload"/>
|
|
|
<resourceLibraryDialog ref="resourceLibraryDialogRef" @addFile="resourceLibraryDialogAddFile"/>
|
|
|
- <iframe ref="iframeFFmpegRef" allow="camera *; microphone *;display-capture;midi;encrypted-media;" src="https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/static/cocoroboffmpeg/index.html" v-show="false"></iframe>https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/cocoroboffmpeg http://localhost:8080/#/cocoroboffmpeg
|
|
|
+ <!-- <iframe ref="iframeFFmpegRef" allow="camera *; microphone *;display-capture;midi;encrypted-media;" src="https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/static/cocoroboffmpeg/index.html" v-show="false"></iframe>https://beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/cocoroboffmpeg http://localhost:8080/#/cocoroboffmpeg -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -627,13 +627,13 @@ export default {
|
|
|
url: data.Location,
|
|
|
})
|
|
|
this.$message.success("上传成功");
|
|
|
- this.uploadFileObj = null;
|
|
|
- // this.$confirm("是否提取视频音频并上传？","提示").then(()=>{
|
|
|
- // this.getVideoVoice({file:this.uploadFileObj});
|
|
|
- // this.uploadFileObj = null;
|
|
|
- // }).catch(err=>{
|
|
|
- // this.uploadFileObj = null;
|
|
|
- // })
|
|
|
+ // this.uploadFileObj = null;
|
|
|
+ this.$confirm("是否提取视频音频并上传？","提示").then(()=>{
|
|
|
+ this.getVideoVoice({file:this.uploadFileObj});
|
|
|
+ this.uploadFileObj = null;
|
|
|
+ }).catch(err=>{
|
|
|
+ this.uploadFileObj = null;
|
|
|
+ })
|
|
|
},
|
|
|
videoProgressUpdate(data){
|
|
|
if(data.status=="processing"){
|
|
|
@@ -871,9 +871,9 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
|
|
|
})
|
|
|
this.$message.success("上传成功")
|
|
|
|
|
|
- // this.$confirm("是否提取视频音频并上传？","提示").then(()=>{
|
|
|
- // this.getVideoVoice({url:_file.file});
|
|
|
- // })
|
|
|
+ this.$confirm("是否提取视频音频并上传？","提示").then(()=>{
|
|
|
+ this.getVideoVoice({url:_file.file});
|
|
|
+ })
|
|
|
},
|
|
|
async getVideoVoice(obj){
|
|
|
if(this.loading)return this.$message.info("请稍等");
|
|
|
@@ -897,11 +897,37 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
|
|
|
if (!_file) return this.$message.error("文件不存在");
|
|
|
|
|
|
try {
|
|
|
- await this.$refs.iframeFFmpegRef.contentWindow.postMessage({type:'extractAudio',file:_file},"https://beta.pbl.cocorobo.cn/");
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = async (e) =>{
|
|
|
+ // 创建音频上下文
|
|
|
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
|
+
|
|
|
+ //解码音频数据
|
|
|
+ const buffer = await audioContext.decodeAudioData(e.target.result);
|
|
|
+
|
|
|
+ //创建离线音频上下文
|
|
|
+ const offlineAudioContext = new OfflineAudioContext({numberOfChannels:buffer.numberOfChannels,length:buffer.length,sampleRate:buffer.sampleRate});
|
|
|
+
|
|
|
+ //创建音源节点
|
|
|
+ const source = offlineAudioContext.createBufferSource();
|
|
|
+ source.buffer = buffer;
|
|
|
+ source.connect(offlineAudioContext.destination);
|
|
|
+ source.start();
|
|
|
+
|
|
|
+ //渲染音频
|
|
|
+ const renderedBuffer = await offlineAudioContext.startRendering();
|
|
|
+ const wavBlob = this.bufferToWav(renderedBuffer);
|
|
|
|
|
|
- // this.$message.success("提取音频成功")
|
|
|
- // this.loading = false;
|
|
|
- // console.log(data)
|
|
|
+ // blob转成file文件
|
|
|
+ const audioFile = new File([wavBlob], 'audio.wav', { type: 'audio/wav' });
|
|
|
+
|
|
|
+ // console.log(wavBlob)
|
|
|
+
|
|
|
+ this.$emit("getVideoAudioSuccess",audioFile)
|
|
|
+ this.$message.success("提取音频成功")
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ reader.readAsArrayBuffer(_file);
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
this.$message.error("提取音频失败")
|
|
|
@@ -909,24 +935,47 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
- // testFFmpeg(){
|
|
|
- // let input = document.createElement("input");
|
|
|
- // input.type = "file";
|
|
|
- // input.accept = "video/*";
|
|
|
- // input.click();
|
|
|
- // input.onchange = () => {
|
|
|
- // let file = input.files[0];
|
|
|
- // setTimeout(()=>{
|
|
|
- // var testwindow = window.open("http://localhost:8082/");
|
|
|
-
|
|
|
- // setTimeout(()=>{
|
|
|
- // console.log("测试测试")
|
|
|
- // testwindow.postMessage({type:'extractAudio',file:file},'*');
|
|
|
- // },5000)
|
|
|
- // })
|
|
|
- // }
|
|
|
-
|
|
|
- // }
|
|
|
+ bufferToWav(audioBuffer) {
|
|
|
+ const numOfChan = audioBuffer.numberOfChannels;
|
|
|
+ const length = audioBuffer.length * numOfChan * 2;
|
|
|
+ const buffer = new ArrayBuffer(44 + length);
|
|
|
+ const view = new DataView(buffer);
|
|
|
+ const channels = [];
|
|
|
+ let pos = 0;
|
|
|
+ // 获取通道数据
|
|
|
+ for (let i = 0; i < audioBuffer.numberOfChannels; i++) {
|
|
|
+ channels.push(audioBuffer.getChannelData(i));
|
|
|
+ }
|
|
|
+ // 写入WAV头
|
|
|
+ this.writeUTFBytes(view, 0, 'RIFF');
|
|
|
+ view.setUint32(4, 44 + length - 8, true);
|
|
|
+ this.writeUTFBytes(view, 8, 'WAVE');
|
|
|
+ this.writeUTFBytes(view, 12, 'fmt ');
|
|
|
+ view.setUint32(16, 16, true);
|
|
|
+ view.setUint16(20, 1, true);
|
|
|
+ view.setUint16(22, numOfChan, true);
|
|
|
+ view.setUint32(24, audioBuffer.sampleRate, true);
|
|
|
+ view.setUint32(28, audioBuffer.sampleRate * 2 * numOfChan, true);
|
|
|
+ view.setUint16(32, numOfChan * 2, true);
|
|
|
+ view.setUint16(34, 16, true);
|
|
|
+ this.writeUTFBytes(view, 36, 'data');
|
|
|
+ view.setUint32(40, length, true);
|
|
|
+ // 写入PCM数据
|
|
|
+ pos = 44;
|
|
|
+ for (let i = 0; i < audioBuffer.length; i++) {
|
|
|
+ for (let j = 0; j < numOfChan; j++) {
|
|
|
+ const sample = Math.max(-1, Math.min(1, channels[j][i]));
|
|
|
+ view.setInt16(pos, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
|
|
|
+ pos += 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return new Blob([buffer], { type: 'audio/wav' });
|
|
|
+ },
|
|
|
+ writeUTFBytes(view, offset, string) {
|
|
|
+ for (let i = 0; i < string.length; i++) {
|
|
|
+ view.setUint8(offset + i, string.charCodeAt(i));
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
window.addEventListener('message',(e)=>{
|
SanHQin