gpt4 book ai didi

javascript - 如何播放WebRTC录制的音频流 block ?

转载 作者:行者123 更新时间:2023-11-28 03:59:16 25 4
gpt4 key购买 nike

我正在尝试创建一个实验性应用程序,将音频从客户端 1 实时流式传输到客户端 2

因此,在学习了有关同一主题的一些教程和问题后,我使用了 WebRTCbinaryjs。到目前为止,这就是我得到的

1- 客户端 1客户端 2 已连接到 BinaryJS 以发送/接收数据 block 。

2- 客户端1使用WebRTC录制音频并逐渐发送到BinaryJS

3- 客户端 2 接收 block 并尝试播放它们。

嗯,我在最后一部分遇到了错误。这是我收到的错误消息:

Uncaught RangeError: Source is too large

at Float32Array.set (native)

这是代码:

客户端 1

var WSClient;
var AudioStream;

function load(){
var session = {
audio: true,
video: false
};

var recordRTC = null;

navigator.getUserMedia(session, startRecording, onError);
WSClient = new BinaryClient('ws://localhost:9001');
WSClient.on('open',function(){
console.log('client opened')
AudioStream = WSClient.createStream();
})
}

function startRecording(stream){
var context = new AudioContext();
var audio_input = context.createMediaStreamSource(stream);
var buffer_size = 2048;

var recorder = context.createScriptProcessor(buffer_size, 1, 1);

recorder.onaudioprocess = function(e){
console.log('chunk')
var left = e.inputBuffer.getChannelData(0);
AudioStream.write(left);
};

audio_input.connect(recorder);
recorder.connect(context.destination);
}

客户端2

var WSClient;
var audioContext;
var sourceNode;

function load(){
audioContext = new AudioContext();
sourceNode = audioContext.createBufferSource();
sourceNode.connect(audioContext.destination);

sourceNode.start(0);

WSClient = new BinaryClient('ws://localhost:9001');

WSClient.on('open',function(){
console.log('client opened');
});

WSClient.on('stream', function(stream, meta){
// collect stream data
stream.on('data', function(data){
console.log('received chunk')
var integers = new Int16Array(data);
var audioBuffer = audioContext.createBuffer(1, 2048, 4410);
audioBuffer.getChannelData(0).set(integers); //appearently this is where the error occurs
sourceNode.buffer = audioBuffer;
});
});
}

服务器

var wav = require('wav');
var binaryjs = require('binaryjs');

var binaryjs_server = binaryjs.BinaryServer;

var server = binaryjs_server({port: 9001});

server.on('connection', function(client){
console.log('server connected');

var file_writter = null;

client.on('stream', function(stream, meta){
console.log('streaming', server.clients)
//send to other clients
for(var id in server.clients){
if(server.clients.hasOwnProperty(id)){
var otherClient = server.clients[id];
if(otherClient != client){
var send = otherClient.createStream(meta);
stream.pipe(send);
}
}
}
});

client.on('close', function(stream){
console.log('client closed')
if(file_writter != null) file_writter.end();
});
});

错误发生在这里:

audioBuffer.getChannelData(0).set(integers);

所以我有两个问题:

是否可以发送我在客户端 1 中捕获的 block ,然后在 客户端 2 中重现它们?

我遇到的错误是怎么回事?

谢谢大家!

@编辑1

由于我从其他问题中获取了代码片段,所以我仍在尝试理解它。我评论了 client 2 代码中创建 Int16Array 的行,现在我收到了不同的错误(但我不知道哪个版本的代码更正确):

Uncaught DOMException: Failed to set the 'buffer' property on 'AudioBufferSourceNode': Cannot set buffer after it has been already been set

可能是因为我每次获取新数据 block 时都会设置它。

最佳答案

关于 AudioBufferSourceNode 的 DOMException 意味着您需要为您正在创建的每个新 Audiobuffer 创建一个新的 AudioBufferSourceNode。所以类似


sourceNode = new AudioBufferSourceNode(audioContext, {buffer: audioBuffer})

并且 AudioBufferFloat32Array。你需要转换你的将 Int16Array 转换为 Float32Array,然后再将其分配给音频缓冲区。可能足以将所有内容除以 32768。

关于javascript - 如何播放WebRTC录制的音频流 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47274120/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com