Not mix or merge, I need to intersect channels, like: L - R
I can do this with createScriptProcessor:
let processor = context.createScriptProcessor(512, 2, 1)
processor.onaudioprocess = e => {
let inputL = e.inputBuffer.getChannelData(0),
inputR = e.inputBuffer.getChannelData(1),
output = e.outputBuffer.getChannelData(0),
len = inputL.length,
i = 0;
for (; i < len; i++) {
output[i] = inputL[i] - inputR[i];
}
}
This do what I want, but ... is there a way to do this without createScriptProcessor, for example with createChannelMerger / createChannelSplitter? I'm looking for a more effective way.
Found a solution!
This is
inputLeft - inputRight
the same as
inputLeft + inputRightInvert
where inputRightInvert is the invertion of right channel.
To split channels we can use createChannelSplitter.
To invert channel we can use createGain with value -1
The result:
splitter = context.createChannelSplitter(2)
merger = context.createChannelMerger(1)
invertRightChannel = context.createGain()
invertRightChannel.gain.value = -1
input.connect(splitter)
// left channel
splitter.connect(merger, 0, 0)
// right invert channel
splitter.connect(invertRightChannel, 1)
invertRightChannel.connect(merger, 0, 0)
merger.connect(output)
What superiority?
It works faster (~3x)
No bugs (solution with createScriptProcessor make some artefacts)
Better Sync (createScriptProcessor make some latency)
Related
Recently I've been working on a voice platform allowing for users to talk to each other under certain conditions. However, it only seems to be smooth when your ping is really low.
Here's the structure currently:
Raw PCM Audio From User -> Web Socket -> Sent to all clients that meet a certain condition
There's nothing particularly special about my WebSocket. It's made in Java and just sends the data received directly from clients to other clients (just temporary).
Issue:
For users that have a decent amount of ping (>100ms) their audio cuts out (choppy) at certain parts and doesn't seem to load fast enough even with the code I have in place. If a video of this will help, let me know!
This is the code I have for recording and playback currently (using AudioWorkletProcessors)
Recording:
buffers = [];
buffersLength = 0;
process(inputs, _, parameters) {
const [input] = inputs;
if (parameters.muted[0] == 1) {
return true;
}
// Create one buffer from this input
const dataLen = input[0].byteLength;
const channels = input.length;
const bufferForSocket = new Uint8Array(dataLen * channels + 9);
bufferForSocket.set(new Uint8Array([channels]), 0);
bufferForSocket.set(numberToArrayBuffer(sampleRate), 1);
bufferForSocket.set(numberToArrayBuffer(input[0].byteLength), 5);
for (let i = 0; i < channels; i++) {
bufferForSocket.set(new Uint8Array(input[i].buffer), 9 + dataLen * i);
}
// Add buffers to a list
this.buffers.push(bufferForSocket);
this.buffersLength += bufferForSocket.byteLength;
// If we have 25 buffers, send them off to websocket
if (this.buffers.length >= 25) {
const combinedBuffer = new Uint8Array(
this.buffersLength + 4 + 4 * this.buffers.length
);
combinedBuffer.set(numberToArrayBuffer(this.buffers.length), 0);
let offset = 4;
for (let i = 0; i < this.buffers.length; i++) {
const buffer = this.buffers[i];
combinedBuffer.set(numberToArrayBuffer(buffer.byteLength), offset);
combinedBuffer.set(buffer, offset + 4);
offset += buffer.byteLength + 4;
}
this.buffers.length = 0;
this.buffersLength = 0;
// This is what sends to WebSocket
this.port.postMessage(combinedBuffer.buffer);
}
return true;
}
Playback:
class extends AudioWorkletProcessor {
buffers = new LinkedList();
timeTillNextBuffer = 0;
process(_, outputs, __) {
const [output] = outputs;
const linkedBuffers = this.buffers.last();
// If we aren't currently playing a buffer and we cannot play a buffer right now, return
if (
linkedBuffers == null ||
(linkedBuffers.buffers.length === 0 && this.timeTillNextBuffer > Date.now())
)
return true;
const buffer = linkedBuffers.buffers.removeLast();
// Current buffer is finished, remove it
if (linkedBuffers.index === linkedBuffers.buffers.length) {
this.buffers.removeLast();
}
if (buffer === null) {
return true;
}
const inputData = buffer.channels;
// put audio to output
for (let channel = 0; channel < outputs.length; channel++) {
const channelData = inputData[channel];
const outputData = output[channel];
for (let i = 0; i < channelData.length; i++) {
outputData[i] = channelData[i];
}
}
return true;
}
static get parameterDescriptors() {
return [];
}
onBuffer(buffer) {
// buffer is ArrayBuffer
const buffersGiven = new DataView(buffer, 0, 4).getUint32(0, true);
let offset = 4;
const buffers = new LinkedList();
const linkedBuffers = { index: 0, buffers };
// Read buffers from WebSocket (created in the snippet above)
for (let i = 0; i < buffersGiven; i++) {
const bufferLength = new DataView(buffer, offset, 4).getUint32(0, true);
const numberOfChannels = new DataView(buffer, offset + 4, 1).getUint8(0, true);
const sampleRate = new DataView(buffer, offset + 5, 4).getUint32(0, true);
const channelLength = new DataView(buffer, offset + 9, 4).getUint32(0, true);
const channels = [];
for (let i = 0; i < numberOfChannels; i++) {
const start = offset + 13 + i * channelLength;
channels[i] = new Float32Array(buffer.slice(start), 0, channelLength / 4);
}
buffers.push({ channelLength, numberOfChannels, sampleRate, channels });
offset += bufferLength + 4;
}
this.buffers.push(linkedBuffers);
// Jitter buffer
this.timeTillNextBuffer = 50 - this.buffers.length * 25 + Date.now();
}
constructor() {
super();
this.port.onmessage = (e) => this.onBuffer(e.data); // Data directly from WebSocket
}
}
I heard the use of Atomics can help because of how the AudioContext plays blank audio when returning. Any tips would be greatly appreciated! Also, if anything is unclear, please let me know!
My code has somewhat of a Jitter buffer system and it doesn't seem to work at all. The audio that a user receives from me (low ping) is clear. However, they (high ping) send me choppy audio. Furthermore, this choppy audio seems to build up and it gets more delayed the more packets I receive.
Depth-first search code that is used for enemy objects in order to path finds to the player. It is changing the values of maze1.maze whilst iterating around the loop, I believe instead of this.CurrentMaze. Do I need to post all the code to the full game for you to figure this out?
called using - let path = e.DPS() then the enemy uses path to move towards the player. maze1 is an object with a maze array inside it.
Does anyone know why this is happening???
DPS() {
this.playerpos = [0,0]
this.enemypos = [0,0]
this.CurrentMaze = [0][0]
this.playerpos[0] = Math.round(p.y / size)
this.playerpos[1] = Math.round(p.x / size)
this.enemypos[0] = Math.round(this.y / size)
this.enemypos[1] = Math.round(this.x / size)
this.CurrentMaze = pickMaze(mazecounter);
this.CurrentMaze = swap(pickMaze(mazecounter) , cells);
let queue = [];
this.CurrentMaze[this.enemypos[0]][this.enemypos[1]] = 1;
queue.push([this.enemypos]); // store a path, not just a position
while (queue.length > 0) {
console.table(maze1.maze);
var path = queue.shift(); // get the path out of the queue
var pos = path[path.length-1]; // ... and then the last position from it
var direction = [
[pos[0] + 1, pos[1]],
[pos[0], pos[1] + 1],
[pos[0] - 1, pos[1]],
[pos[0], pos[1] - 1]
];
for (var i = 0; i < direction.length; i++) {
// Perform this check first:
if (direction[i][0] === this.playerpos[0] && direction[i][1] === this.playerpos[1]) {
// return the path that led to the find
return path.concat([this.playerpos]);
}
if (direction[i][0] < 0 || direction[i][0] >= this.CurrentMaze.length
|| direction[i][1] < 0 || direction[i][1] >= this.CurrentMaze[0].length
|| this.CurrentMaze[direction[i][0]][direction[i][1]] !== 0) {
continue;
}
this.CurrentMaze[direction[i][0]][direction[i][1]] = 1;
// extend and push the path on the queue
queue.push(path.concat([direction[i]]));
}
}
}
I have a javascript function that calculates the area of a region drawn on a canvas, the function is extremely slow and makes the performance of the web app horrible, I was wondering if there is any way I can optimize it?
It works fine if a user triggers it once in a while, but there are scenarios where it will be rapidly triggered by the user, sometimes up to 200 times in 5 seconds, so it's not ideal.
Tegaki.refreshMeasurements = () => {
for (let layer of Tegaki.layers) {
if (layer.name == 'background') continue;
let canvas = layer.canvas
let i, ctx, dest, data, len;
ctx = canvas.getContext('2d')
dest = ctx.getImageData(0, 0, canvas.width, canvas.height);
data = dest.data,
len = data.length;
let totalPixels = 0;
let totalHU = 0
for (i = 3; i < len; i += 4) {
if (data[i] > 0) {
totalPixels++;
totalHU += (Tegaki.selectedSlicePixelData[Math.floor(i/4)] +
Tegaki.selectedSliceRescaleIntercept)
}
}
let area = totalPixels * Tegaki.selectedSlicePixelSpacing / 100;
let meanHU = totalHU / totalPixels
let layerType = _this.layerTypes.find(t => t.id == layer.name)
layerType.area = area;
layerType.meanHU = meanHU
}
}
I think the part causing the most performance drop is the for-loop because the length of the image data array sometimes is over 1 million so this thing probably loops for a while.
Is there any better way to implement this?
I'm writing code to read/write to NTAG424 DNA NFC tags. I'm doing this completely in javascript, because I want to be able to use it in a react native app.
In NTAG 424 DNA and NTAG 424 DNA TagTamper features and hints they show the results you should be getting for every step. But they use a python solution.
The input message is A55A0001008013C56268A548D8FBBF237CCCAA20EC7E6E48C3DEF9A4C675360F and the output (according to the manual) is 1309C877509E5A215007FF0ED19CA564. Whereas I get 7CCEF6FEB32F34CA48CB685ECAA0F32C.
Because I need to be able to use this code commercially, I cannot just use any library.
function generateSubkeys(key) {
const cipher = crypto.createCipheriv("aes-128-ecb", key, "");
const cryptedKey = cipher.update(iv);
let subkey1 = bt.bitShiftLeft(cryptedKey);
if (msb(cryptedKey[0]) & 0x80) {
subkey1 = xor(subkey1, 0x87);
}
let subkey2 = bt.bitShiftLeft(subkey1);
if (msb(subkey1[0]) & 0x80) {
subkey2 = xor(subkey2, 0x87);
}
return { subkey1: subkey1, subkey2: subkey2 };
}
function msb(bytes) {
return bytes >>> 31;
}
function aes(key, message) {
const cipher = crypto.createCipheriv(
"aes-" + key.length * 8 + "-cbc",
key,
iv
);
var result = cipher.update(message);
cipher.final();
return result;
}
function aesCmac(key, message) {
const { subkey1, subkey2 } = generateSubkeys(Buffer.from(key, "hex"));
let numBlocks = Math.ceil(message.length / blockSize);
var lastBlockRemainder = message.length % blockSize;
if (numBlocks === 0) {
numBlocks = 1;
}
var messageArray = getMessageArray(message, numBlocks, lastBlockRemainder);
if (lastBlockRemainder === 0) {
messageArray[numBlocks - 1] = xor(messageArray[numBlocks - 1], subkey1);
} else {
messageArray[numBlocks - 1] = xor(messageArray[numBlocks - 1], subkey2);
}
var c = aes(
key,
Buffer.concat(messageArray.slice(0, messageArray.length - 1))
);
let c_xor_m = xor(c, messageArray[messageArray.length - 1]);
c = aes(key, c_xor_m);
return c;
}
function getMessageArray(message, numBlocks, lastBlockRemainder) {
var index = 0;
var messageArray = [];
if (lastBlockRemainder !== 0) {
let padding = "80" + "00".repeat(16 - lastBlockRemainder - 1);
let appendToMessage = Buffer.from(padding, "hex");
message = Buffer.concat([message, appendToMessage]);
}
for (index = 0; index < numBlocks; index++) {
let messageBlock = message.slice(
index * blockSize,
(index + 1) * blockSize
);
messageArray.push(messageBlock);
}
return messageArray;
}
I already tried the one mentioned here AES-CMAC module for Node.js? and completely rewriting the code to my own version of an AES-CMAC algorithm. In both the one I tried and the one I made (with the help of NIST Special Publication 800-38B), I get the same results.
Now I'm stuck between thinking either my code is wrong, or the python crypto library (where I don't completely understand the code) is wrong.
Can anyone help me figure out which of the two is true? And in case my code is wrong, help me fix it.
I found the answer: The Crypto library in javascript has an aes-cbc cipher, that says (and it does) accepts buffers and arrays. But the outcomes of both are different.
When I used a UInt8Array I got the right outcome. I completely rewrote an aes-cmac algorithm, just to figure out this what all I needed.
Something that might do something like
<img class="image" ... />
$(".image").get_colors()
I know there are few websites where you can upload your image and it would generate the color for you but I want something to put on my website
Something like this where you see the colors generated from the screenshot and can search by colors. I tried to check the source code but I could not see any reference to a js library.
I need this feature to work with js if possible.
EDIT:
The image would be on the page already; I just need to generate its color, so I don't want the uploading features.
Thanks.
You might be interested in this related question and my answer to another one.
Getting all the colors from an image is simple, at least in a browser that supports the canvas element - the technique is described here. You end up with a CanvasPixelArray (described here), which is essentially an array like [r,g,b,a,r,g,b,a, ...] where r,g,b,a are bytes indicating the red, green, blue, and alpha values of each pixel.
The hard part is identifying or creating a small selection of representative colors, rather than the 10,000 colors that might be in a 100x100 image. This is a pretty complicated problem, with many solutions (overview here). You can see Javascript implementations of two possible algorithms in the clusterfck library and my port of the Leptonica Modified Median Cut algorithm.
I did write just for fun. It is a jquery plugin, if you don't use it you can read it for some pointers. If there is some error during the call to get_colors a array is set in the return value to hold the errors, it returns an array of objects, these objects are a histogram of a image(one item in the array for every selected element).
(function($, window, document, undefined){
var canvas = document.createElement('canvas');
if (canvas && canvas.getContext){
$.fn.get_colors = function(){
var rv = [];
this.each(function(){
var tagname = this.tagName.toLowerCase();
if ((tagname === 'img') || (tagname === 'canvas') || (tagname === 'video')){
//something bad can happend when drawing the image
try{
var w = this.getAttribute('width');
var h = this.getAttribute('height');
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
var ctxt = canvas.getContext('2d');
if (ctxt){
ctxt.drawImage(this, 0, 0);
var imagedata = ctxt.getImageData(0, 0, w, h);
var data = imagedata.data;
//log('imagedata.width:'+imagedata.width+' imagedata.height:'+imagedata.height+' w:'+w+' h:'+h);
var obj = {};
var color = '';
var r = 0, g = 0, b = 0, a = 0;
var pix = data.length;
for (pix--; pix > 2; pix-=4){
//a = data[pix - 0];
b = data[pix - 1];
g = data[pix - 2];
r = data[pix - 3];
if (r < 16) r = '0' + r.toString(16);
else r = r.toString(16);
if (g < 16) g = '0' + g.toString(16);
else g = g.toString(16);
if (b < 16) b = '0' + b.toString(16);
else b = b.toString(16);
//if (a < 16) a = '0' + r.toString(16);
//else a = a.toString(16);
//color = r + g + b + a;
color = r + g + b;
if (obj[color] > 0) ++obj[color];
else obj[color] = 1;
}
rv.push(obj);
imagedata = data = obj = null;
}
ctxt = null;
} catch(error){
if (!rv.errors){
rv.errors = [];
}
rv.errors.push(error);
}
}
});
return rv;
};
} else{
$.fn.get_colors = function(){
throw new Error('canvas element support required!');
};
}
})(jQuery, this, this.document);
If a document with only one image with 4 pixels(2x2) "#ff0000, #00ff00, #0000ff, #ff0000", if you do $('img').get_colors(); it returns [{"ff0000": 2, "0000ff": 1, "00ff00":1}].
To learn how to use the canvas element you could look at MDN and at the specs in development for details about pixel manipulation.
Edit: commented out a line I was using when debugging.
Have you seen this project on Github?
http://lokeshdhakar.com/projects/color-thief/
It's a javascript solution. (It depends on two additional libraries: jquery, quantize.js).
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
getPalette(sourceImage[, colorCount, quality])
Which will return an array, like so: [ [num, num, num], [num, num, num], ... ]