Javascript Rectangle inside webcam stream - javascript

I am very sorry for the UI of the question, I do not know why images
are so huge. Please accept my apologies.
I am doing a QrCodeScanner with browser's getUserMedia and up to now have got this.
Please do not pay attention to buttons [SCAN QR, STOP QR], the camera is between them.
What I want is something like this
Does anyone know what the way of doing it is?

Related

ImageCapture poor quality

Hi does anyone know why the photos taken with the ImageCapture api are so bad or how i can fix this?
when i use the takePhoto function it looks like this:
https://i.stack.imgur.com/ruQSn.jpg
(downsampled for upload) but much more grain und way to bright
when i use the grabFrame function (which has a a lower resolution):
the image looks normal.
thes images where taken with https://simpl.info/imagecapture/ on an OnePlus6T but other devices i tested have the same problem.
after trying many thing i fixed the focus with applyConstraints on the video track:
.applyConstraints({
focusMode: 'single-shot',
})
but the image still is to bright and has much grain.
i tried setting exposureMode and exposureCompensation but no change at all.
i realy hope anyone can help me with this....

JavaScript Based Image Input & Keyboard Output

this is my first post!
I am working on a project with AI for a game. I am trying to recreate Tetris with Javascript, HTML, and CSS to train an AI to play. After making the game, I would then need to incorporate the AI into it. After it is trained, I want to test the AI against other, real-time players to see how good it is. This is similar to what Code Bullet did, I have attached that video. My question is, is there any way to have my AI play on a website against other players? I think this would be possible if I could somehow get input from the site it is playing on, sending it to the AI, and receiving output in the form of simulated presses from the AI. I know this is possible with Python, but I am unfamiliar with that language. If you could help me, that would be much appreciated.
Thank you!
Code Bullet's video
P.S. Since this is my first post, please let me know if I am doing something wrong/missing something in my post. Thank you again!

How can I edit equirectangular in JS?

I need to do a feature like hugin did, but I can't find any framework or something that can help me.
So hugin is a program that helps edit equirectangulars. For example, if you took a photo from the wrong position or angle, hugin will help you change roll (offset) and resave the photo (I will attach a photo).
Did anyone see a JS library that could help me do it?
I could not find any library allowing for editing panorama photos. From quick research it comes aout that there are some panorama viewers like Panolens. It seems that it uses three.js (there is a exmaple of equirectangular panorama). You might take a look at source codes of those and try to use similiar approach in your project.

Chrome Web Audio API - How does Plink work?

I'm trying to understand the tone/sound generation component of the Plink Chrome Experiment.
This is the de-minified version of what I think controls this.
I was hoping someone could shed some light on this. How are the sound effects achieved?
NB: I am almost certain it's some sort of MIDI-on-the-fly-instrument generation, but I'm not entirely sure.

Javascript Canvas Selector

I'm not sure whether this is something that is possible in Javascript, I'm fairly sure it will be.
I have a client that sells canvas prints online. They need a solution that will enable customers to firstly select an image, then a color, then a size, and for it all to appear on a 'mock' canvas all on the same page.
This will then proceed to a paypal cart checkout.
Does anybody know of a way to do this, or could point me in the direction of a website that I can walk through this with?
Thanks!
Jonna
This is almost exactly what Fabric.js, as JavaScript canvas library, was originally made for (well, for shirts): http://fabricjs.com
There are a multitude of other libraries that do similar, but the bottom line is that it is very possible. Have a look at Fabric.js, Kinetic.js, easel.js, and start learning!

Categories