问题描述
我正在尝试从本地保存的视频中提取音频数据以运行我的 tensorflow 模型。问题是 frequencyData 始终是一个充满 128 的数组，在 StackOverflow 上，我发现了一些要更改的内容，结果是以下代码：
async function predict(){
const model = await tf.loadLayersModel('{% static 'WebAI/model.json' %}');
// do prediction
const audio = document.getElementById('vid2');
const ctx = new AudioContext();
var audioSrc = ctx.createMediaElementSource(audio);
const analyser = ctx.createAnalyser();
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
analyser.fftSize = 2048;
const frequencyData = new Uint8Array(3367);
analyser.getByteFrequencyData(frequencyData);
setTimeout(() => {
analyser.getByteTimeDomainData(frequencyData);
console.log(frequencyData);
value = tf.tensor([frequencyData]).reshape([-1,259,13]);
const result = model.predict([value]).dataSync();
alert("Tu puntuación es de " + result[0]);
},500);
}
视频的html是：
<video id="vid2" controls></video>
然后我将功能延迟了 10 秒，所以我确定所有视频都已加载，但仍然无法正常工作。 我的理论是，我正在获取原始视频输入，因此代码不知道如何做出反应并给出空响应（或类似的东西），但我找不到如何更改它。 （使用 const audio = New Audio(document.getElementById('vid2')); 给出了完全相同的问题）。 Here is a picture of how i see the array
视频是使用此处的代码录制的：https://gist.github.com/prof3ssorSt3v3/48621be79794a8a3adeed7971786d4d8
视频文件保存在 blob 中。 音频和视频的完整脚本是这样的。我尝试的另一件事是更改 audio = const audio = new Audio(videoURL);
<script>
let constraintObj = {
audio: true,video: {
facingMode: "user",width: { min: 480,ideal: 640,max: 1280 },height: { min: 360,ideal: 480,max: 720 }
}
};
// width: 640,height: 480 -- preference only
// facingMode: {exact: "user"}
// facingMode: "environment"
//handle older browsers that might implement getUserMedia in some way
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
navigator.mediaDevices.getUserMedia = function(constraintObj) {
let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function(resolve,reject) {
getUserMedia.call(navigator,constraintObj,resolve,reject);
});
}
}else{
navigator.mediaDevices.enumerateDevices()
.then(devices => {
devices.forEach(device=>{
console.log(device.kind.toupperCase(),device.label);
//,device.deviceid
})
})
.catch(err=>{
console.log(err.name,err.message);
})
}
navigator.mediaDevices.getUserMedia(constraintObj)
.then(function(mediaStreamObj) {
//connect the media stream to the first video element
let video = document.querySelector('video');
video.echoCancellation = "true";
video.noiseSuppression = "true";
video.volume = 0;
if ("srcObject" in video) {
video.srcObject = mediaStreamObj;
} else {
//old version
video.src = window.URL.createObjectURL(mediaStreamObj);
}
video.onloadedMetadata = function(ev) {
//show in the video element what is being captured by the webcam
video.play();
};
//add listeners for saving video/audio
let start = document.getElementById('btnStart');
let stop = document.getElementById('btnStop');
let vidSave = document.getElementById('vid2');
let mediaRecorder = new MediaRecorder(mediaStreamObj);
let chunks = [];
start.addEventListener('click',(ev)=>{
mediaRecorder.start();
console.log(mediaRecorder.state);
})
stop.addEventListener('click',(ev)=>{
mediaRecorder.stop();
console.log(mediaRecorder.state);
});
mediaRecorder.ondataavailable = function(ev) {
chunks.push(ev.data);
}
mediaRecorder.onstop = (ev)=>{
let blob = new Blob(chunks,{ 'type' : 'video/mp4;' });
chunks = [];
let videoURL = window.URL.createObjectURL(blob);
vidSave.src = videoURL;
async function predict(){
const model = await tf.loadLayersModel('{% static 'WebAI/model.json' %}');
// do prediction
const audio = document.getElementById('vid2');
const ctx = new AudioContext();
var audioSrc = ctx.createMediaElementSource(audio);
const analyser = ctx.createAnalyser();
audioSrc.connect(analyser);
analyser.connect(ctx.destination);
analyser.fftSize = 2048;
const frequencyData = new Uint8Array(3367);
analyser.getByteFrequencyData(frequencyData);
setTimeout(() => {
analyser.getByteTimeDomainData(frequencyData);
console.log(frequencyData);
value = tf.tensor([frequencyData]).reshape([-1,500);
}
setTimeout(() => {
predict();
},500);
}
})
.catch(function(err) {
console.log(err.name,err.message);
});
/*********************************
getUserMedia returns a Promise
resolve - returns a MediaStream Object
reject returns one of the following errors
AbortError - generic unkNown cause
NotAllowedError (SecurityError) - user rejected permissions
NotFoundError - missing media track
NotReadableError - user permissions given but hardware/OS error
OverconstrainedError - constraint video settings preventing
TypeError - audio: false,video: false
*********************************/
</script><video id="vid1" controls></video>
<video id="vid2" controls></video>
<p><button id="btnStart" class="btn btn-outline-success">START RECORDING</button>
<button id="btnStop" class="btn btn-outline-danger">STOP RECORDING</button></p>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）