Currently, I am developing an application where the client is built using Angular and the server is in C. I am facing an issue with my HTTP Get method but unable to pinpoint the problem. The function "updateStream()" is invoked every 70 milliseconds.
public updateStream(): void {
if (this.isVideoRunning && this.canChangePicture) {
console.log('put is called');
this.putData();
}
}
public getData(): Observable<any> {
return this.httpClient.get('http://IP_ADDRESS:3490/testStream', { responseType: 'arraybuffer' })
}
public putData(): void {
console.log('put function');
this.canChangePicture = false;
let comp: number;
this.getData().subscribe((resp) => {
console.log(resp);
const responseArray: Uint8ClampedArray = new Uint8ClampedArray(resp);
const newTabTemp: Uint8ClampedArray = new Uint8ClampedArray(this.maxHeight * this.maxWidth * 4);
comp = 0;
for (let i = 0; i < this.maxHeight * this.maxWidth * 4; i = i + 4) {
newTabTemp[i] = responseArray[comp];
newTabTemp[i + 1] = responseArray[comp];
newTabTemp[i + 2] = responseArray[comp];
newTabTemp[i + 3] = 255;
comp = comp + 1;
}
let nouvData: ImageData;
nouvData = new ImageData(newTabTemp, this.maxWidth, this.maxHeight);
this.contextVideo.putImageData(nouvData, BORDERX / 2, BORDERY / 2);
this.canChangePicture = true;
});
}
The issue that I encountered was that my canvas content was rarely changing. To troubleshoot, I added some "console.log" statements and realized that my program was failing to enter the "this.getData().subscribe()..." block after a few requests.
https://i.sstatic.net/3JT0u.png
Despite consistently entering the "putData()" function, it was skipping the "this.getData().subscribe()..." block. What could be causing this behavior in my code and how can I resolve it?
EDIT:
Screenshot of the pending request https://i.sstatic.net/Kt0vj.png timing tab: https://i.sstatic.net/IvU89.png Request/response https://i.sstatic.net/qndUD.png