如何播放WebRTC录制的音频流块?

2023-12-23

我正在尝试创建一个实验性应用程序,可以实时传输音频client 1 to client 2.

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

1- Client 1 and Client 2已连接到 BinaryJS 来发送/接收数据块。

2- Client 1使用WebRTC录制音频并逐步发送到BinaryJS

3- Client 2接收块并尝试播放它们。

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

未捕获的范围错误:源太大

在 Float32Array.set(本机)

这是代码:

Client 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);
}

Client 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;
        });
    });
}

Server

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);

所以我有两个问题:

是否可以发送我捕获的块client 1然后将它们复制到client 2?

我遇到的错误有什么关系?

多谢你们!

@edit 1

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

未捕获的 DOMException:无法在“AudioBufferSourceNode”上设置“缓冲区”属性:已设置缓冲区后无法设置缓冲区

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


关于 DOMExceptionAudioBufferSourceNode意味着你需要创建一个新的AudioBufferSourceNode对于每一个新的Audiobuffer你正在创造的。所以像

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

And an AudioBuffer has Float32Arrays。你需要转换你的Int16Array to a Float32Array在将其分配给之前AudioBuffer。可能足以将所有内容除以 32768。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何播放WebRTC录制的音频流块? 的相关文章

  • .getDay() 奇怪的行为[重复]

    这个问题在这里已经有答案了 有一个例子 console log new Date 2013 02 24 getDay 24 gt 0 24 console log new Date 2013 02 25 getDay 25 gt 1 25
  • 重置输入控件的边框颜色 (HTML/Javascript)

    有谁知道使用 javascript 修改输入控件后如何重置它的边框颜色 通过突出显示其中包含不正确或无效数据的字段等来进行验证非常有用 例如 改变边框 document getElementById myinput style border
  • CSS悬停边框而不调整图像大小

    我想问一下 在不调整图像大小的情况下 我的悬停边框下方功能做错了什么 我已按照给出的指南进行操作here https css tricks com image rollover borders that do not change layo
  • Internet Explorer 的数组indexOf 实现

    有很多关于如何将 indexOf 实现放入数组原型中以便它可以在 Internet Explorer 下工作的解决方案 但是我偶然发现了一个问题 到目前为止我所看到的任何地方似乎都没有解决这个问题 使用非常一致的MDC 的实施 https
  • 仅使用 CSS 创建三列表? (无表格元素)

    我正在为 Django 项目创建模板 并且我需要在 HTML 中创建一个三列表 仅使用 CSS 而不是使用 table 元素 除了意识形态上对表格的反对之外 原因还在于该报告需要在台式机和黑莓等手持设备上查看 在手持设备上 我们的目标不是试
  • 如何从回调函数中获取值

    我对 javascript 比较陌生 并且面临一些困难 我有两个 java 脚本文件 如下所示 我无法获取变量的值条目标题在 getRss 函数内并将其存储在变量内Rss1 标题 and Rss2 标题 创建一个全局变量并将其分配给条目标题
  • Imperavi Redactor 内容未复制到隐藏文本区域

    我正在尝试使用因佩拉维编辑器 http imperavi com redactor 在这里控制我的富文本编辑 div class control group div class controls div div document ready
  • 为什么音频自动播放在 Google Chrome 中不起作用?

    我正在尝试在页面刚刚打开时自动播放音频文件 我的浏览器是谷歌浏览器更新到最新版本 这是代码
  • 所有属性的 JavaScript getter

    长话短说 我现在的情况是想要一个 PHP 风格的 getter 但是是 JavaScript 的 我的 JavaScript 仅在 Firefox 中运行 因此 Mozilla 特定的 JS 对我来说没问题 我能找到的制作 JS gette
  • 删除 CSS Transitionend 事件侦听器不起作用

    我在尝试删除 css Transitionend 事件侦听器时遇到问题 我可以添加监听器 e addEventListener transitionend function event transitionComplete event pr
  • 在没有全局变量的情况下对多个事件使用 Promise 回调

    我有一个包含在函数中的承诺 我将使用不同的输入参数多次调用该函数 每次承诺解决时 我都会将解决的值推送到存储数组中 当我所有的调用承诺都得到解决后 我将在其他函数中使用这个存储数组 是否有任何干净的方法可以在不使用 全局 变量的情况下进行设
  • 如何在 ES6 类中使用静态变量?

    我正在尝试在 es6 中使用静态变量 我想声明一个静态变量count in Animal类并增加它 但是 我无法通过声明静态变量static count 0 所以我尝试了另一种方法 class Animal constructor this
  • 在Java中一个接一个地播放WAV文件

    我正在尝试玩几个WAV http en wikipedia org wiki WAV文件一个接一个 我尝试了这个方法 for String file audioFiles new AePlayWave file start 但这会同时播放它
  • 同步通用分析

    新的Universal Analytics重新引入了同步事件跟踪 https developers google com analytics devguides collection analyticsjs method reference
  • AngularJS:ng-占位符不起作用

    我有以下输入 html 元素 我想根据用户模型中保存的内容更改占位符
  • Ruby 数组到 Javascript 数组

    我有一个带有帐户 ID 的 Ruby 数组 我想将帐户 ID 的 Ruby 数组存储在 Javascript 数组中 我想知道最好的方法是什么 另外 当我尝试执行此操作时 Javascript 似乎认为如果只输入一个帐户 ID 则该 ID
  • Rails 2 Mailer View 将 3D 添加到字符串之前

    我有一个非常旧的 Rails 应用程序 它试图为新用户发送验证电子邮件 但永远找不到令牌 因为由于某种原因 无论我如何生成链接 链接都会以 3D 形式添加到字符串前面 由于某种原因 它似乎还在标记的中间注入了一个 符号 这是一些带有输出的代
  • 谷歌地图通过骨干javascript返回div标签但不显示

    我已经开始使用地理定位 我可以获得坐标等 我想在地图中显示它 但是当我将地图返回到 div 时 什么也没有显示 现在我查看了 div 地图正在返回 但只是不可见 这是有问题的 div 请注意 这似乎只是一个小地图的链接 a style di
  • CasperJS:如何单击所有选定的按钮?

    我正在尝试使用 CasperJS 作为网络抓取工具 并且有一个带有按钮的页面 单击该按钮将加载数据 因此 我想先单击所有这些按钮 然后等待 然后再实际进行查询以获取所有必要的数据 问题是对于 Casper casper thenClick
  • JavaScript 反静默技术来指示失败

    当错误确实发生并且函数无法继续执行时 在 JavaScript 中报告错误而不是依赖 null 和 undefined 是一个好方法 我可以想到三种方法 没做什么 抛出异常 assert 这是一个简单的示例场景 一个将传入的金额记入用户帐户

随机推荐