I am trying to create an app to mirror my phone's screen in a e-book reader's browser.
The idea is to continuously make screenshots and make them available from http server running on the phone.
So far I have succeeded in having an http server running on the phone and sharing the latest screenshot.
Now I would like to update the image in the browser automatically - which mechanics should I use - should the website pull the image every x milliseconds or can I push the changes from the server? The image transition should happen smoothly. The e-book's browser is somehow limited, for example it doesn't support html5-video and probably many other things.
I am using the basic dart httpServer (because my app is in flutter) and would prefer to keep it basic.
For testing I had a png Screenshot, but I would also like to optimize for greyscale and maybe try to do something with canvas (don't have experience here) if the browser supports it.
Main questions:
-is there an easy way to push changes from server to browser?
-how do I achieve a smooth transition between images (and skip refresh if the image didn't change)?
-which alternatives are there to using images?
-can canvas help me somehow?
I think the best thing to use here is WebRTC. The browser provides getDisplayMedia that allows you to either capture a tab or the whole display of a device.
You can then connect your two devices, and stream the capture live. The other nice thing is that it will be P2P and you should see sub-second latency (and you don't have the added complexity of running a HTTP server).
All you need is a signaling server to send the Offer/Answer/ICE Candidates between the two peers. These messages are just 'bootstrap' details to get the call started.
If getDisplayMedia doesn't work on the device you can add WebRTC via a native app. flutter-webrtc is one possible solution.
Related
I have a 3d widget that contains a web browser. I need to replicate the web browser content on the client side. I need whatever changes that are made to the web browser on the server side to be synced with all the clients. For example, if a youtube video is loaded on the server, I want all the clients to be able to watch it through the same replicated web browser.
I've been working on a replication project with Web Browsers and Video Streaming in general for the last couple of weeks. As far as I'm aware, you can't actually "replicate" it because the Web Browser Plugin (the normal one that UE has without needing to download it from the Marketplace) is pretty much an unfinished prototype that lacks a lot of control. Rather, you can replicate it but it won't work, so to say. It just means it does the functions it's supposed to do instead of anything being shared across clients and the server.
What you can do instead is actually Execute Javascript commands from inside your Web Browser Widget, which you call from your Actor Blueprint or Character Blueprint with Multicast Events.
Just to make it simpler, what you can do is send a "request" to the server if the Actor you're using the event from isn't a Server (UE4 has an "isServer" boolean you can call from pretty much anywhere), and then actually execute that with a Multicast Event if it is a Server.
Another difficult part about it is the fact that you can't really achieve Sound Attenuation with Browsers unless you brute-force it with Sphere/Box Collisions and the Youtube API which lets you change the volume of the Youtube video.
For more information about using Multicasts properly, I suggest you to look at this blog. Didn't understand a lick until I read this.
So I have some time on my hands and thought I would make myself a little jukebox / radio type app.
It would be fairly simple, just a collection of MP3's on the server, one is chosen at random, it plays, on completion, the next one is chosen and plays. The front of this would just be a super simple page that has a player and displays the metadata.
I don't really have any experience with server programming but I'm going to look in to Node, seems like it would be good for this. I've already written a little script in Python that chooses a song from a selection and plays it (using VLC at the moment) so it should be simple to port it to Node / js.
Just wondering if someone could point me in the right direction for how to link the "player" with the "playlist".
Looking in to it, I can only find solutions involving a client and server using shoutCast or ICEcast or similar - so the playlist streams audio to a shoutcast server, and the website is just a player looking at the shoutCast URL - that seems unnecessary for me, as the streaming and the site would be the same thing.
New to a lot of this :) but I have time at the moment so happy to get stuck in!
Thanks in advance
I've built something similar and opted to do almost all the work client-side. There are several advantages:
Less infrastructure needed (and less to go wrong)
You can re-use normal HTTP CDNs for serving static files
More flexibility for client changes later (like sending different content to different clients, for A/B testing)
Potential for offline playback
No need for SHOUTcast or Icecast. All you need to do is publish the playlist and associated files to a web server. Client side, you can read this playlist, randomly pick an entry, and then load it via a simple new Audio().
Now, when your audio object fires its ended event, set the src property to the URL of the next item in the playlist. (This detail is important or Safari will stop playing audio, as they assume the user didn't want to continue.)
I am searching for the same. I think you are right using node.
I am working on an educational e-commercial website .. In which the user need to authenticate and then the videos on particular topics will be available.. so how can I prevent my video to be screen-recorded...
Different OS's and applications support different mechanisms to try to tackle this - for example:
Microsoft Edge on Windows 10 uses integrated 'Protected Media Path' for encrypted content which will stop simple screenshots working
Website and web app developers may use a number of CCS 'tricks' to achieve a similar affect, although these can usually be workaround with standard web developer and debug tools.
Mobile video typically uses protected memory for encrypted content which will usually give a black screen on capture.
As mentioned in comments and other answers these are all 'barriers' but they don't make it impossible to copy the content - the best example being pointing a camera at the screen a copying that way.
The idea is generally to make it hard enough compared to the value of the content so that people are not prepared to invest the time to work around your barriers.
It is not possible, for a variety of reasons:
There is no Web API for that.
Even if there was, it would be possible to reverse engineer the browser/OS to allow for screen recording.
Even if, for some reason, you couldn't access and modify the software running on the computer, you could connect the computer to a capture card instead of your monitor.
And if you also couldn't do that, you could just point a camera at the screen and start recording.
In short, I have a site where on the client side the user has a "beat maker" app. The user can turn on / turn off noises, background beats, etc, to essentially create their own custom "song" based on the pre-defined noises, tones and tunes that I have on the client side.
I need to somehow translate the beat they're making (in HTML5 canvas) to my server-side (currently Node.JS) and spit out an MP3 of their creation.
Basically I have to somehow have my server-side backend gracefully concatenate + overlap + mix various smaller MP3/wav files into one MP3 file that matches the beat that they created on the client side. I then have to return that MP3 to the client side for download.
Anyone able to point me in the right direction?
As far as my research indicates, this isn't easily accomplished or feasible at all (I.E. within realistic budget / time constraints of the project) due to the complexity of the problem at hand.
This is possible, and there are some audio libraries for JavaScript, but I would take a different approach.
The Web Audio API is very solid these days. You can have your user make all the adjustments client-side, and then generate the audio file right there in the user's browser. If you need to get a copy server-side, you can upload the raw PCM to your server (bandwidth intensive), or send the parameters to the server and re-generate the file.
Now unfortunately, PhantomJS doesn't support Web Audio. To generate a perfect server-side copy, I would execute Chrome with a special page that renders the audio and then uploads to the local server. This guarantees that the sound output you get is the exact same as that of the client, and leaves all of the heavy lifting to the Web Audio API already implemented in the browser.
You won't find much off-the-shelf for a project like this, but with a little creativity I think you will find that this isn't too difficult.
I use node.js to develop app, I want simulate some bad internet situation when people surfer on the internet,
like limit the data transfer speed, or delay some css or js file transfer
How can I achieve these goals?Is there some goal can do this?
I have used fiddler in the past to test unstable/slow internet connections on my apps. Fiddler has a modem speed option. Set that and you get incredibly slow speeds. You can also download a plugin called Delayed Responses, it will delay the packets from arriving back at to your app.
If that isnt up your ally, then I would suggest looking for a web based proxy that will allow you to control the parameters of the requests you want. Just google it.