`I have an API which send video data in chunks for large files. How can i append those data in a single blob so that i can create a final URL?
I have tried pushing data to blob parts and it is also get appended with correct data size in final blob. But video only play for 7 sec out of 31sec. I think only first chunk is getting appended only.
var MyBlobBuilder = function (this: any) {
this.parts = []
}
MyBlobBuilder.prototype.append = function (part) {
this.parts.push(part)
this.blob = undefined
}
MyBlobBuilder.prototype.getBlob = function () {
if (!this.blob) {
this.blob = new Blob(this.parts, { type: 'video/mp4' })
}
return this.blob
}
let myBlobBuilder = new MyBlobBuilder()
function handleResourceClick(resource: string) {
dispatch(fetchFileType(resource)).then((x: any) => {
let group = x.payload.data.sizeInKB / 5
let start = 0
for (let i = 0; i < 5 && start <= x.payload.data.sizeInKB; i++) {
dispatch(
getVideoUrl({ pdfUrl: resource, offset: start, length: group })
).then((res: any) => {
if (isApiSuccess(res)) {
myBlobBuilder.append(res.payload?.data)
}
})
start = start + group
}
})
}]
I receive these huge Strings via WebSocket:
[
"BTC-31DEC21-100000-P",
"{\"data\":{\"bids\":{\"0.01\":{\"price\":0.01,\"volume\":66.2,\"exchange\":\"DER\"},\"5.0E-4\":{\"price\":5.0E-4,\"volume\":1.1,\"exchange\":\"DER\"},\"0.637\":{\"price\":0.637,\"volume\":8.4,\"exchange\":\"DER\"}},\"asks\":{\"0.664\":{\"price\":0.664,\"volume\":8.4,\"exchange\":\"DER\"}}},\"isMasterFrame\":true}"
]
or
[
"BTC-31DEC21-36000-C",
"{\"data\":[{\"price\":0.422,\"volume\":8.4,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.423,\"volume\":0.0,\"exchange\":\"DER\",\"side\":\"ASKS\"}],\"isMasterFrame\":false}"
]
or
[
"BTC-31DEC21-60000-P",
"{\"data\":[{\"price\":0.105,\"volume\":0.0,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.1055,\"volume\":28.7,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.106,\"volume\":7.6,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.1065,\"volume\":43.0,\"exchange\":\"DER\",\"side\":\"ASKS\"}],\"isMasterFrame\":false}"
]
I want to make JavaScript Buffer where I can store the data and reset it if I receive JSON with isMasterFrame = true
let payload = JSON.parse(messageString[1]);
if (payload.hasOwnProperty("isMasterFrame")) {
for (let i = 0; i < payload.pairs.length; i++) {
let currentPair = payload.data[i]
currentPair = currentPair.replace(/\0/g, ''); //Remove null chars
if (currentPair.toUpperCase() != 'KILL') {
// reset the buffer and start again to fill data
}
}
} else {
// if we receive "isMasterFrame":false just update the data without reset
}
What are the available options to implement this buffer?
I think this is what you are after. It caches the details until it finds isMasterFrame: true && KILL, at which time it clears the cache and starts over again.
EDIT: Stored data using BTC style string as key and data as value to enable querying cache.
let messageCache = {};
const messages = [
["BTC-31DEC21-36000-C", "{\"data\":[{\"price\":0.422,\"volume\":8.4,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.423,\"volume\":0.0,\"exchange\":\"DER\",\"side\":\"ASKS\"}],\"isMasterFrame\":false}"],
["BTC-31DEC21-36000-D", "{\"data\":[{\"price\":0.422,\"volume\":8.4,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.423,\"volume\":0.0,\"exchange\":\"DER\",\"side\":\"ASKS\"}],\"isMasterFrame\":false}"],
["BTC-31DEC21-60000-P", "{\"data\":[{\"price\":0.105,\"volume\":0.0,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.1055,\"volume\":28.7,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.106,\"volume\":7.6,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.1065,\"volume\":43.0,\"exchange\":\"DER\",\"side\":\"KILL\"}],\"isMasterFrame\"\:true}"],
["BTC-31DEC21-60000-Q", "{\"data\":[{\"price\":0.105,\"volume\":0.0,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.1055,\"volume\":28.7,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.106,\"volume\":7.6,\"exchange\":\"DER\",\"side\":\"ASKS\"},{\"price\":0.1065,\"volume\":43.0,\"exchange\":\"DER\",\"side\":\"ASKS\"}],\"isMasterFrame\"\:false}"]
];
function processData(key, payload) {
if (!payload.isMasterFrame) {
messageCache[key] = payload;
return;
}
for (let obj of payload.data) {
Object.values(obj).forEach(item => {
item = item.toString().replace(/\0/g, ''); //Remove null chars
if (item.toUpperCase() !== 'KILL') {
messageCache = {}; // Clear the cache/buffer
}
});
}
}
function queryCache(key){
return messageCache[key];
}
messages.forEach(message => {
const payload = JSON.parse(message[1]);
processData(message[0], payload);
console.log("Number of cached messages: " + Object.keys(messageCache).length);
});
console.log('Query Cache [BTC-31DEC21-60000-Q]:');
let result = queryCache('BTC-31DEC21-60000-Q');
console.log(result);
I have audio data streaming from the server to the client. It starts as a Node.js buffer (which is a Uint8Array) and is then sent to the AudiWorkletProcessor via port.postMessage(), where it is converted into a Float32Array and stored in this.data. I have spent hours trying to set the output to the audio data contained in the Float32Array. Logging the Float32Array pre-processing shows accurate data, but logging it during processing shows that it is not changing when the new message is posted. This is probably a gap in my low-level audio-programming knowledge.
When data arrives in the client, the following function is called:
process = (data) => {
this.node.port.postMessage(data)
}
As an aside, (and you can let me know) maybe I should be using parameter descriptors instead of postMessage? Anyways, here's my AudioWorkletProcessor:
class BypassProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.isPlaying = true;
this.port.onmessage = this.onmessage.bind(this)
}
static get parameterDescriptors() {
return [{ // Maybe we should use parameters. This is not utilized at present.
name: 'stream',
defaultValue: 0.707
}];
}
convertBlock = (incomingData) => { // incoming data is a UInt8Array
let i, l = incomingData.length;
let outputData = new Float32Array(incomingData.length);
for (i = 0; i < l; i++) {
outputData[i] = (incomingData[i] - 128) / 128.0;
}
return outputData;
}
onmessage(event) {
const { data } = event;
let ui8 = new Uint8Array(data);
this.data = this.convertBlock(ui8)
}
process(inputs, outputs) {
const input = inputs[0];
const output = outputs[0];
if (this.data) {
for (let channel = 0; channel < output.length; ++channel) {
const inputChannel = input[channel]
const outputChannel = output[channel]
for (let i = 0; i < inputChannel.length; ++i) {
outputChannel[i] = this.data[i]
}
}
}
return true;
}
}
registerProcessor('bypass-processor', BypassProcessor);
How can I simply set the output of the AudioWorkletProcessor to the data coming through?
The AudioWorkletProcessor process only each 128 bytes, so you need to manage your own buffers to make sure that is the case for an AudioWorklet, probably by adding a FIFO.
I resolved something like this using a RingBuffer(FIFO) implemented in WebAssembly, in my case I was receiving a buffer with 160 bytes.
Look my AudioWorkletProcessor implementation
import Module from './buffer-kernel.wasmodule.js';
import { HeapAudioBuffer, RingBuffer, ALAW_TO_LINEAR } from './audio-helper.js';
class SpeakerWorkletProcessor extends AudioWorkletProcessor {
constructor(options) {
super();
this.payload = null;
this.bufferSize = options.processorOptions.bufferSize; // Getting buffer size from options
this.channelCount = options.processorOptions.channelCount;
this.inputRingBuffer = new RingBuffer(this.bufferSize, this.channelCount);
this.outputRingBuffer = new RingBuffer(this.bufferSize, this.channelCount);
this.heapInputBuffer = new HeapAudioBuffer(Module, this.bufferSize, this.channelCount);
this.heapOutputBuffer = new HeapAudioBuffer(Module, this.bufferSize, this.channelCount);
this.kernel = new Module.VariableBufferKernel(this.bufferSize);
this.port.onmessage = this.onmessage.bind(this);
}
alawToLinear(incomingData) {
const outputData = new Float32Array(incomingData.length);
for (let i = 0; i < incomingData.length; i++) {
outputData[i] = (ALAW_TO_LINEAR[incomingData[i]] * 1.0) / 32768;
}
return outputData;
}
onmessage(event) {
const { data } = event;
if (data) {
this.payload = this.alawToLinear(new Uint8Array(data)); //Receiving data from my Socket listener and in my case converting PCM alaw to linear
} else {
this.payload = null;
}
}
process(inputs, outputs) {
const output = outputs[0];
if (this.payload) {
this.inputRingBuffer.push([this.payload]); // Pushing data from my Socket
if (this.inputRingBuffer.framesAvailable >= this.bufferSize) { // if the input data size hits the buffer size, so I can "outputted"
this.inputRingBuffer.pull(this.heapInputBuffer.getChannelData());
this.kernel.process(
this.heapInputBuffer.getHeapAddress(),
this.heapOutputBuffer.getHeapAddress(),
this.channelCount,
);
this.outputRingBuffer.push(this.heapOutputBuffer.getChannelData());
}
this.outputRingBuffer.pull(output); // Retriving data from FIFO and putting our output
}
return true;
}
}
registerProcessor(`speaker-worklet-processor`, SpeakerWorkletProcessor);
Look the AudioContext and AudioWorklet instances
this.audioContext = new AudioContext({
latencyHint: 'interactive',
sampleRate: this.sampleRate,
sinkId: audioinput || "default"
});
this.audioBuffer = this.audioContext.createBuffer(1, this.audioSize, this.sampleRate);
this.audioSource = this.audioContext.createBufferSource();
this.audioSource.buffer = this.audioBuffer;
this.audioSource.loop = true;
this.audioContext.audioWorklet
.addModule('workers/speaker-worklet-processor.js')
.then(() => {
this.speakerWorklet = new AudioWorkletNode(
this.audioContext,
'speaker-worklet-processor',
{
channelCount: 1,
processorOptions: {
bufferSize: 160, //Here I'm passing the size of my output, I'm just saying to RingBuffer what size I need
channelCount: 1,
},
},
);
this.audioSource.connect(this.speakerWorklet).connect(this.audioContext.destination);
}).catch((err)=>{
console.log("Receiver ", err);
})
Look how I'm receiving and sending the data from Socket to audioWorklet
protected onMessage(e: any): void { //My Socket message listener
const { data:serverData } = e;
const socketId = e.socketId;
if (this.audioWalking && this.ws && !this.ws.isPaused() && this.ws.info.socketId === socketId) {
const buffer = arrayBufferToBuffer(serverData);
const rtp = RTPParser.parseRtpPacket(buffer);
const sharedPayload = new Uint8Array(new SharedArrayBuffer(rtp.payload.length)); //sharing javascript buffer memory between main thread and worklet thread
sharedPayload.set(rtp.payload, 0);
this.speakerWorklet.port.postMessage(sharedPayload); //Sending data to worklet
}
}
For help people I putted on Github the piece important of this solution
audio-worklet-processor-wasm-example
I followed this example, it have the all explanation how the RingBuffer works
wasm-ring-buffer
I have an object here which I want to return as a response but before that I want to add a couple of fields to it. When I add fields and print the object, it prints the new object but when I send the response, I still get old object before editing.
let applications = await ApplicationHandler.getApplicationOverview(application_id); //I want to edit this one
if (applications == null) {
applications = [];
}
for (let i = 0; i < applications.length; i++) {
let cube_application_id = applications[i].id;
let application_ratings = await Application_Rating.findAll({where: {cube_application_id: cube_application_id}});
let application_ratings_personal = await Application_Rating.findAll({
where: {
cube_application_id: cube_application_id,
user_id: req.user.id
}
});
let total_user_rating = 0;
for (let rating of application_ratings) {
let average_user_rating = (rating.personality_rating + rating.qualification_rating + rating.motivation_rating) / 3;
total_user_rating = total_user_rating + average_user_rating;
}
applications[i].average_rating = total_user_rating / application_ratings.length;
applications[i].recommended = application_ratings_personal.recommended;
if (i == applications.length - 1) {
console.log(applications); // this prints with those 2 fields.
let successRes = {
status: 200,
data: applications
};
return successRes; //however, this returns the one which I had in the first line.
}
}
Here is the code:
buildImgSuccess(json) {
if (typeof json !== "undefined") {
if (json.filesUploaded.length) {
//-- Update Saving Status --//
this.setState({
saving: true
});
//-- Set Vars --//
let item = 0;
let sortOrder = 0;
let imgCount = this.state.images.length;
if (!imgCount) {
imgCount = 0;
}
while (item < json.filesUploaded.length) {
//-- Determine if PDF Document was Uploaded --//
if (json.filesUploaded[item].mimetype === "application/pdf") {
//-- Handle Document Upload --//
//-- Get Number of pages --//
let theKey = json.filesUploaded[item].key;
let theHandle = json.filesUploaded[item].handle;
axios.get(`/getPhotos`, {
headers: {
"Content-Type": 'application/json'
},
transformRequest: (data, headers) => { delete headers.common.Authorization; }
}).then(jsonResult => {
let pageCount = 1;
Our lint compiler is producing this error
Don't make functions within a loop
Anytime there is a .then() or .catch() inside a loop.
Does anyone understand what the problem is with this code structure and any possible solutions?
Thanks!
You need to create the function outside of the while loop.
Creating inside recreates the function every loop which is non performant.
See below.
Simplified Example - Wrong
const i = 0;
while (i < 10) {
const print = (i) => console.log(i++); //Created 10 times (0,1,...,8,9)
print(i);
};
Simplified Example - Correct
const i = 0;
const print = (i) => console.log(i++); //Created once
while (i < 10) {
print(i);
};
With your code
const handleJsonResult = (jsonResult) => {
let pageCount = 1;
//...
}
while (item < json.filesUploaded.length) {
//-- Determine if PDF Document was Uploaded --//
if (json.filesUploaded[item].mimetype === "application/pdf") {
//-- Handle Document Upload --//
//-- Get Number of pages --//
let theKey = json.filesUploaded[item].key;
let theHandle = json.filesUploaded[item].handle;
axios.get(`/getPhotos`, {
headers: {
"Content-Type": 'application/json'
},
transformRequest: (data, headers) => { delete headers.common.Authorization; }
}).then(handleJsonResult);
//...
}