I'm working on a web application using React and TypeScript. Right now, I'm looking for the cleanest way to have a countdown timer fire when a user hits the shutter-release button. Is there any simple and flexible way to do this? As a result, I wanna have a countdown timer on the web camera component like these:
*camera components are built using react-camera-pro
https://www.npmjs.com/package/react-camera-pro
I also want to have a sound that corresponds with the timer, so at first, I was thinking of making a video file that displays the number and plays the sound simultaneously.
<TakePhotoButton
onClick={() => {
if (camera.current) {
// play the video here
setImage(camera.current.takePhoto());
}}}
/>
However, that doesn't sound like a very good solution, and I would lose flexibility if I changed my mind and wanted to set the timer to a different second.
If anyone knows any solution or any libraries or packages, please help me. Thank you.
Related
I am currently learning react right now. I am following a react tutorial for a stopwatch application where it just increments the time every second. The code perfectly works as it indeed increments the time every second. However, if I open a new browser tab, or even open a different application, it seems that react doesn't update the state, meaning, the timer stops incrementing the value. But if I visit the react application, it begins to increment (once again).
I literally watch the timer go to '00:00:10' and then click another tab and wait for about 10 seconds. When I go back to the react application, the timer is still at '00:00:11', instead of '00:00:20'.
Is there something I am missing? Why is react behaving this way? It is because of performance issues? I am pretty sure this is a nature of react but I can't seem to find an explanation anywhere else.
I am also not sure if I should provide the code for the stopwatch application as I am sure that it's not a bug, nor a problem relating to the code itself. Let me know if I need to include the code so that I can edit this question.
If your website isn't active (in an active browser tab) then the Browser doesn't execute your JavaScript code. It does that to save CPU time - people tend to have a lot of tabs open.
For a timer application you want to remember the timer start time (e.g. with new Date().getTime()) and then every second you calculate the difference to this start time. This way if the user leaves the tab and comes back then the timer is correct again after latest a second.
Another benefit is that your timer will be more accurate even if the browser tab remains focused all the time. The timer calls aren't exact so your code isn't called exactly every second, but only about every second and the errors sum up over time. If you have a start time available then these errors don't matter.
Edit: There is more to this topic, the best thing I could find quickly is this discussion How do browsers pause/change Javascript when tab or window is not active?
The title really says it all. I've seen some questions about how to keep a component from un-mounting, but I'm not sure that's exactly what I need (or at least not all that I need).
I want it to continue counting when I go to a different screen in the app.
Can anyone tell me how to approach this?
Thanks
I'm working on a platform where user can create rooms, join them and share content. One of major features that needs to be implemented is a robust media upload system, and I have a pretty good idea of how i'm going to achieve this on the backend with chunk-based file upload. An average size for content that users will be uploading would be something like 200MB
On the frontend, I'm using NextJS and the idea is to have a webworker to handle all media upload logic and a queue system to not get affected by components re-rendering and not have to wait on dialogbox until the process completes and continue in the background Is this approach going to work and is it a good practice? Is it going to scale and not have to be redesigned in the long run ? If Yes, do you know any example of it? If not why and what is your suggestion?
Link to an Image explaining what I'm trying to achieve
So I am trying to create the waveform shape in react native while recording an audio, I looked up many packages but they all need an audio url so they don't support realtime recording, I tried creating one by myself which i used a package that provides me with the decibals value when recording and then push the value to state array but it cause too many lags since I setstate every 0.5 sec.
Any suggestion?
This package audio-react-recorder provides the recording interface as well as a somewhat customisable waveform. I think it's a good place to start. I used it a few times, it works quite well.
Here's a demo
Let me know if it works out for you.
I have a WPF application in which I'm using SoundPlayer to play several short sounds such as keyboard clicks. Sometimes, seemingly at random, the sounds will stop playing. When I navigate away from the page the sounds will then play all at once in one screeching playback.
My question is, are there any obvious reasons as to why this would happen?
I've tried several things but because I can't consistently reproduce the issue it's hard to find the cause. The sounds are used throughout the application, so I load them in app.xaml.cs into an application scoped static collection. I call SoundPlayer.Load() to ensure they're loaded into memory straight away.
Like I said, this never stops working completely. The play backs seem to pile up until navigating to another page where they all play at once.
One other thing that may have an impact is that I am displaying a webcam feed in the application. The webcam feed is loaded using the DirectShow.NET library. I'm not sure if loading graphs can have any adverse effect on the playback of sound.
I suppose the web cam is updating a UI element which will cause the UI thread to be pretty busy, in that case you probably do not want to use SoundPlayer.PlaySync() or SoundPlayer.Load which both block the current thread.
Instead try SoundPlayer.LoadAsync() and SoundPlayer.Play() which use a separate thread.