我正在尝试webRTC的语音提示聊天机器人.我成功地将语音提示到聊天,但我有一个问题.我注意到mediaRecorder.stop不会停止流,所以窗口中的红圈不会消失.我希望它只在用户录制消息时流.
我尝试了什么:我搜索了其他解决方案,发现这一行将成功结束流:stream.getTracks().forEach( track => track.stop() );
问题是,我不知道如何恢复流之后,记录按钮变成无响应。
这是我的全部代码,很抱歉没有提供一个更紧凑的,我不太热衷于JavaScript留下的东西:
let mediaRecorder;
let recordedChunks = [];
let isRecording = false; // Track the recording state
// Function to start recording
function startRecording() {
if (mediaRecorder && mediaRecorder.state === 'inactive') {
mediaRecorder.start();
isRecording = true;
}
}
// Function to stop recording
function stopRecording() {
if (mediaRecorder && mediaRecorder.state === 'recording') {
mediaRecorder.stop();
isRecording = false;
}
}
// Function to initialize the MediaRecorder
function initializeMediaRecorder() {
if (!mediaRecorder) {
// Initialize the MediaRecorder with audio constraints
navigator.mediaDevices
.getUserMedia({ audio: true })
.then((stream) => {
mediaRecorder = new MediaRecorder(stream);
// Add data to the recordedChunks array when data is available
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
};
// When the recording is stopped, you can process the recorded data
mediaRecorder.onstop = () => {
const audioBlob = new Blob(recordedChunks, { type: 'audio/wav' });
const audioSize = audioBlob.size;
recordedChunks = [];
// Example: Send the audio data to the server or do something else with it
const messageItem = document.createElement('li');
messageItem.classList.add('message', 'sent');
messageItem.innerHTML = `
<div class="message-text">
<div class="message-sender">
<b>You</b>
</div>
<div class="message-content">
Audio size: ${audioSize}. Recording state: ${mediaRecorder.state}
</div>
</div>`;
messagesList.appendChild(messageItem);
//stream.getTracks().forEach( track => track.stop() );
};
})
.catch((error) => {
console.error('Error accessing audio:', error);
});
}
}
// Attach click event handler to the "Record" button
const recordButton = document.querySelector('.btn-record');
recordButton.addEventListener('click', () => {
if (!isRecording) {
// Start recording
startRecording();
initializeMediaRecorder(); // Initialize the MediaRecorder
} else {
// Stop recording
stopRecording();
}
});
字符串
我知道有些条件是多余的,我正在调试。谢谢。
1条答案
按热度按时间txu3uszq1#
不要尝试重复使用MediaRecorder -只需创建一个新的MediaRecorder,这是最简单的解决方案。在
mediaRecorder.stop();
之后设置mediaRecorder = null
,它将解决问题。