标签: arraybuffer

使用https://github.com/dcodeIO/ProtoBuf.js/我将要发送到java服务器的消息编码为名为batch的ByteBuffer:

batch:
  ByteBuffer {array: ArrayBuffer, view: DataView, offset: 0, markedOffset: -1, length: 139…}
    array: ArrayBuffer
    length: 139
    littleEndian: false
    markedOffset: -1
    offset: 0
    view: DataView
    __proto__: Object

现在我想用jquery的Ajax发送它:

  $.ajax({
    url: myUrl,
    type: 'POST',
    data : batch,
    contentType: 'application/protobuf',
    accept: 'application/json'
  })

但我似乎无法做到这一点.上面的代码给了我jquery异常:

Uncaught TypeError: Cannot set property 'littleEndian' of undefined myScript.js:1353
ByteBuffer.LE bunk.js:1353
jQuery.param.add jquery.js:7203
buildParams jquery.js:7261
jQuery.param jquery.js:7223
jQuery.extend.ajax

如果我从批处理(batch.toArrayBuffer())获得数组缓冲区,Java服务器什么也得不到

ByteStreams.toByteArray(req.getInputStream());

我应该如何编码ByteBuffer来发送这样的？我应该如何将其解码为java字节数组？

在服务器上:我正在加载一个png图像:

var myimage = png.load('test.png');

then sending over websocket connection:
ws.send(myimage);

在客户端:

function onMessage(evt) {
    if (evt.data instanceof ArrayBuffer) {
        var length = evt.data.byteLength;
        var bytes = new Uint8Array(evt.data);
        var image = document.getElementById("image");
        var img = new Image();
        img.src = 'data:image/png;base64,'+ window.btoa(bytes);
        var ctx = image.getContext("2d");
        ctx.drawImage(img, 0, 0);
}

没有在画布上显示任何内容.关于我做错了什么的任何想法？

要求的知识

如何缩短（从前面）一组音频 blob 并仍然具有可播放的音频。

目标

我最终尝试使用 JS MediaRecorder API录制连续 45 秒的音频循环。用户将能够按下按钮，最后 45 秒的音频将被保存。我可以很好地录制、播放和下载单个录音。

问题

当我有一个chunks来自 MediaRecorder的数组称为1000 个 blob 并使用chunks.slice(500, 1000)生成的 blob 数组时，不能用于播放或下载音频。

奇怪的是chunks.slice(0,500)仍然可以正常工作。

代码

let chunks = [];

navigator.mediaDevices.getUserMedia({ audio: true })
  .then((stream) => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
  }

// At some later time, attempt to trim
const trimmedAudio = chunks.slice(500, 1000)
const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
const audioURL = URL.createObjectURL(blob); …

这里的答案让我开始了解如何使用 ArrayBuffer：

在字符串和 ArrayBuffers 之间转换

但是，他们有很多不同的方法。主要是这样的：

function ab2str(buf) {
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}

function str2ab(str) {
  var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
  var bufView = new Uint16Array(buf);
  for (var i=0, strLen=str.length; i<strLen; i++) {
    bufView[i] = str.charCodeAt(i);
  }
  return buf;
}

我想澄清一下 UTF8 和 UTF16 编码之间的区别，因为我不是 100% 确定这是正确的。

所以在 JavaScript 中，据我所知，所有字符串都是 UTF16 编码的。但是您在自己的 ArrayBuffer 中可能拥有的原始字节可以采用任何编码。

所以说我已经从 XMLHttpRequest 向浏览器提供了一个 ArrayBuffer，来自后端的那些字节是 UTF8 编码的：

var r = new XMLHttpRequest()
r.open('GET', '/x', …

我试图从服务器接收一个将包装在JSON中的pdf.

如果我只是将pdf的字节数组发送到前端,我可以通过设置responseType来正确读取它arraybuffer,然后我可以通过以下方式下载pdf:

var blob = new Blob([data], { type: application/pdf});
    if ($window.navigator && $window.navigator.msSaveOrOpenBlob) {
        $window.navigator.msSaveOrOpenBlob(blob);
    } else {
        var a = document.createElement("a");
        document.body.appendChild(a);
        var fileURL = URL.createObjectURL(blob);
        a.href = fileURL;
        a.download = fileName;
        a.click();
    }
}

但是当服务器尝试发送带有bytearray的JSON时,如果我设置为responseTypeto JSON,那么我将无法转换blob.但是,如果我设置responseType为arrayBuffer,我将获得一个arrayBuffer数组,如何将其转换为JSON,同时仍然能够提取pdf:

我收到的JSON格式如下:

{
  result: true,
  value: <the pdf byte array>,
  errorMessage: null
}

我想使用ws处理从客户端收到的 ArrayBuffer 消息。客户端，由于ws.binaryType，我直接收到了一个 ArrayBuffer，但服务器端，我没有收到一个 ArrayBuffer 而是这样的（字符串？）： '< Buffer 00 00 2a 00 00 00 00 00 00 00 00 00 00 00 00 00>'。

var ws = new WebSocket("ws://localhost:3000/");
ws.binaryType = 'arraybuffer';
ws.onopen = function() {
    var buffer = new ArrayBuffer(15);
    var dv = new DataView(buffer);
    dv.setInt16(1, 42);
    ws.send(buffer);
};

var express = require('express'),
app = express(),
server = require('http').createServer(),
WebSocketServer = require('ws').Server,
wss = new WebSocketServer({
    server: …