课堂观察

src/components/pages/classroomObservation/components/baseMessage.vue

@@ -305,6 +305,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="http://localhost:8080/#/cocoroboffmpeg" v-show="false"></iframe>
 	</div>
 </template>
 
@@ -314,13 +315,6 @@ import wordcloudEChart from './wordcloudEChart.vue'
 import uploadFile from './uploadFile.vue';
 import { v4 as uuidv4 } from "uuid";
 import resourceLibraryDialog from './resourceLibraryDialog.vue';
-import FFmpeg from "@ffmpeg/ffmpeg";
-const { createFFmpeg, fetchFile } = FFmpeg;
-
-const ffmpeg = createFFmpeg({
-	corePath: './static/ffmpeg/ffmpeg-core.js',//https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2Fffmpeg-core1731663083831.js   http://localhost:8081/ffmpeg-core.js
-	log: true,
-});
 
 const getFile = (url) => {
   return new Promise((resolve, reject) => {
@@ -881,7 +875,6 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
 		},
 		async getVideoVoice(obj){
 			if(this.loading)return this.$message.info("请稍等");
-			console.log(obj)
 			this.loading = true;
 			let _file = null;
 			if(obj.url){
@@ -902,34 +895,10 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
 			if (!_file) return this.$message.error("文件不存在");
 
 			try {
-				// 加载FFmpeg
-			if (!ffmpeg.isLoaded()) {
-				await ffmpeg.load();
-			}
-			
-			// 将视频文件加载到FFmpeg
-			ffmpeg.FS("writeFile", "input.mp4", await fetchFile(_file));
-			
-			// 提取音频
-			await ffmpeg.run(
-				"-i",
-				"input.mp4",
-				"-q:a",
-				"0",
-				"-map",
-				"a",
-				"output.mp3"
-			);
-			
-			// 从FFmpeg文件系统中读取音频文件
-			const data = ffmpeg.FS("readFile", "output.mp3");
-			// 创建音频URL
-      let audioBlob = new Blob([data.buffer], { type: "audio/mp3" });
-			audioBlob.name = "output.mp3"
-			this.$emit("getVideoAudioSuccess",audioBlob)
-			this.$message.success("提取音频成功")
-			this.loading = false;
-			console.log(data)
+				await this.$refs.iframeFFmpegRef.contentWindow.postMessage({type:'extractAudio',file:_file},'*');
+			// this.$message.success("提取音频成功")
+			// this.loading = false;
+			// console.log(data)
 			} catch (error) {
 				console.log(error);
 				this.$message.error("提取音频失败")
@@ -939,6 +908,17 @@ ${this.data.editorBarData?this.data.editorBarData.content:""}
 		}
 	},
 	mounted() {
+		window.addEventListener('message',(e)=>{
+			let _data = e.data;
+			if(_data.code === 0){
+				this.$message.success(_data.msg);
+				this.loading = false;
+				this.$emit("getVideoAudioSuccess",_data.file)
+			}else if(_data.code === 1){
+				this.$message.error(_data.msg);
+				this.loading = false;
+			}
+		})
 		// this.showNephogram();
 	},
 };

src/components/pages/classroomObservation/components/chatArea.vue

@@ -821,8 +821,8 @@ export default {
         // this.uploadWavFileAndGetText(file);
       };
     },
-		getVideoAudioSuccess(audioBlob){
-			this.uploadFile(audioBlob, { changeText: true, flag: true });
+		getVideoAudioSuccess(file){
+			this.uploadFile(file, { changeText: true, flag: true });
 		},
     cutBar(val) {
       this.pageStatus = val;

src/components/pages/classroomObservation/components/messageArea.vue

@@ -205,8 +205,8 @@ export default {
     // },
   },
   methods: {
-		getVideoAudioSuccess(audioBlob){
-			this.$emit("getVideoAudioSuccess",audioBlob)
+		getVideoAudioSuccess(file){
+			this.$emit("getVideoAudioSuccess",file)
 		},
     // 绑定表单
     bindingForm(obj) {

src/components/pages/classroomObservation/index.vue

@@ -1200,8 +1200,8 @@ export default {
       }
       return formattedTime;
     },
-		getVideoAudioSuccess(audioBlob){
-			this.$refs.chatAreaRef.getVideoAudioSuccess(audioBlob)
+		getVideoAudioSuccess(file){
+			this.$refs.chatAreaRef.getVideoAudioSuccess(file)
 		}
   },
   mounted() {

src/components/pages/cocoroboffmpeg/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="ffmpeg">
+		<input type="file" @change="onFileChange" accept="video/mp4" />
+		<button @click="extractAudio()" :disabled="!videoFile">提取音频</button>
+		<audio v-if="audioUrl" :src="audioUrl" controls></audio>
+	</div>
+</template>
+
+<script>
+import FFmpeg from "@ffmpeg/ffmpeg";
+const { createFFmpeg, fetchFile } = FFmpeg;
+
+const ffmpeg = createFFmpeg({
+	corePath: './static/ffmpeg/ffmpeg-core.js',
+	log: true,
+});
+
+export default {
+	data() {
+		return {
+			videoFile: null,
+			audioUrl: null
+		};
+	},
+	methods: {
+		async onFileChange(event){
+			this.videoFile = event.target.files[0];
+		},
+		async extractAudio(file) {//提取音频
+			return new Promise(async(resolve) => {
+				try {
+					file = file || this.videoFile;
+					if (!file){
+						window.parent.postMessage({code:1,msg:'请选择视频文件'},'*');
+						resolve({code:1,msg:'请选择视频文件'});
+						return;
+					};
+
+					// 加载FFmpeg
+					if (!ffmpeg.isLoaded()) {
+						await ffmpeg.load();
+					}
+
+					// 将视频文件加载到FFmpeg
+					ffmpeg.FS("writeFile", "input.mp4", await fetchFile(file));
+
+					// 提取音频
+					await ffmpeg.run(
+						"-i",
+							"input.mp4",
+							"-q:a",
+							"0",
+							"-map",
+							"a",
+							"output.mp3"
+					);
+
+					// 从FFmpeg文件系统中读取音频文件
+					const data = ffmpeg.FS("readFile", "output.mp3");
+
+					// 创建音频URL
+					let audioBlob = new Blob([data.buffer], { type: "audio/mp3" });
+					audioBlob.name = "output.mp3"
+					if(this.videoFile){
+						this.audioUrl = URL.createObjectURL(audioBlob);
+					}
+					let resultFile = new File([audioBlob], "output.mp3", { type: "audio/mp3" });
+					window.parent.postMessage({code:0,msg:'提取音频成功',file:resultFile},'*');
+					resolve({file:audioBlob});
+				} catch (error) {
+					console.log(error);
+					window.parent.postMessage({code:1,msg:'提取音频失败',error:error},'*');
+					resolve({code:1,msg:'提取音频失败',error:error});
+				}
+			})
+		},
+	},
+	mounted(){
+		window.addEventListener('message',(e)=>{
+			let _data = e.data;
+			if(_data.type === 'extractAudio'){
+				this.extractAudio(_data.file);
+			}
+		})
+	}
+};
+</script>
+
+<style scoped>
+.ffmpeg {
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+}
+</style>

src/router/index.js

@@ -140,6 +140,7 @@ import pocDoTask from '@/components/pages/pocAiClassroom/doTask'
 import pocClass from '@/components/pages/pocAiClassroom/pocClass'
 import choseCheckTest from '@/components/pages/test/choseCheck'
 import testAi from '@/components/pages/testAi'
+import cocoroboffmpeg from '@/components/pages/cocoroboffmpeg'
 // 全局修改默认配置，点击空白处不能关闭弹窗
 ElementUI.Dialog.props.closeOnClickModal.default = false
 Vue.use(Router).use(ElementUI)
@@ -1205,5 +1206,13 @@ export default new Router({
 						requireAuth:''//不需要鉴权
 					}
 				},
+				{
+					path:"/cocoroboffmpeg",
+					name:"cocoroboffmpeg",
+					component:cocoroboffmpeg,
+					meta:{
+						requireAuth:''//不需要鉴权
+					}
+				}
     ]
 })