I'm generating images in a nodejs app (I have them in memory as Buffer objects).
I create them (a couple of images per second) and when the image is created I send it to the client via WebSockets. In the browser I render the image with the IMG tag
This works, although not very fast. So to improve the performance I was wondering if there is a way using Nodejs to convert these images into a video stream (I guess this is more efficient) so I can simply use the VIDEO element in the browser? Any suggestions would be appreciated?
Related
I want to create a small PoC where I can stream a static image source into a video. The idea behind that is that I have an (old) IP camera that only serves snapshots on an HTTP endpoint. When calling that endpoint, you get a static JPEG picture. Let's say, the URL I want to "convert" is: http://mycamera.local/live.jpg
Now, I want to create a script using Node.js to quickly call that URL over and over in order to form some sort of video stream. I'm not an expert into media encoding and stuff, but I guess that the variable refresh rate induced by HTTP latency, the camera's FPS... would make it a bit trickier to pipe images into a video response?
I thought I'd go with Express and Axios to serve and query HTTP content. I've also read that FFmpeg could play a role in there. But, I am open to any suggestion. I could even switch languages if that's required. This question is so specific I think, that any response would do.
A couple of requirements I cannot change:
The camera can only serve static pictures on a single endpoint.
I have no other protocol than HTTP on the camera.
I am not buying or modifying the existing hardware, even though I know there are very cheap units out there.
My server must serve a live video that could be streamed by VLC for instance.
I need to build a website which recording the person from the camera (he must allow the camera first), but I need the record frame by frame with lossless pixels.
I tried to figure this out with some options:
opencv.js - didn't figure it, it is using the browser video element, this is changing the pixels by compressions right?
ngx-webcame - I read it using capturing lossless images but not video
Now the other issue that I need to send the frames to the server?
should I save the frames on client process it on client computer and then send the result to the server?
Is there an option to send the video data frame to the server for future use?
Someone told me to build an agent that will do this actions and send the data on chunks but in that case I don't know really how to do it and I need clarification on that and some instruction on how to start build something like that.
If anyone have an example codes or anything that can direct me to the solution it will be very helpful.
I've created something similar befor using RecordRTC.
It takes advantageg of WebRTC. It works pretty straitforward. Record the video localy and upload it as a file.
https://github.com/muaz-khan/RecordRTC
The page running inside puppeteer download images. When calling page.evaluate, some of the images must be written to disk before doing other operations on them.
What's the best way to do this? Be able to write those images from the browser running in puppeteer? Send buffers from puppeteer to node.js?
NOTE: some of these images might be result canvas operations, so they're not necessary the result of a request.
There is a few possible solutions:
1. If the page allows cors, you can send those images to your backend server. Use something like fetch
2. Another option is to get all images from page and pass them back to server. Here is also a few possible implementations:
2.1. You can get all image urls with something like this return JSON.stringify(Array.from(document.querySelectorAll('img'), i => i.src)) and then download them directly to your server.
2.2. Put image to canvas, and then use toDataUrl() to get base64 encoded data, which you could then pass and process on backend. More info here and here is about saving base64 data on disk
P.S. Just remember to JSON.stringify() your data when returning from puppeteer to backend, because puppeteer could not process the data.
I am using an API from TinyPng.com which helps in compressing images.
When a user uploads images, I make an API call to TinyPng.com with the URL of the image that I want to compress, it provides a response with a link of the compressed file. Based on image size it could take about a few seconds to get a response.
How can I handle such time consuming processes in NodeJS ?
What you should be doing is handling that in the background on the server side. Once the compressed image is ready, download and replace the original one
I'm currently considering developing a Meteor node.js app, but am struggling with how best to handle uploading of user images. In particular, I want to create a photography website that will allow the photographer to upload images in an 'admin' section, and these images will then be displayed on the website. I need to create a thumbnail of these images, and save the respective URLs to the database. I'm struggling with how to best accomplish this in meteor.
Is my best bet to use something like s3 combined with an AWS process for generating thumbnails?
Or should I save and host the images directly in the Meteor/node session?
Or should I scrap Meteor and use something like Express.js for this project?
Why don't you just use something like Filepicker.io to handle uploading and hosting images and simply store the image unique url (given to you by filepicker in the callback)?
Thumbnails can also be dynamically generated by Filepicker (using simple url modifications).
Cloudinary is a nicer alternative to filepicker when it comes to images, but integration process will be messier.
I would store the images on the filesystem, not in a database. If you have a unique id, you can use that as part of the url, for example an id of the item the image belongs to. Might look like this:
./uploads/img-<id>-<size>.jpg
You can write to disk and resize if necessary with node-imagemagick and your cdn should just poll these images from time to time. Not exactly sure how that part would work in terms of including the url to the image in the html.