Have made a typing game using HTML5 and javascript http://tweetraitor.herokuapp.com/.
Now I wanted to ask a couple of things
Images load each time the user plays the game. Though I have used img.src to load the image at the beginning.Why is it not loading from cache?
How can I speed up the game in general. The bullet firing mainly.
Code for the game area is here.
https://github.com/rohit-jain/Tweetraitor/blob/master/app/views/guests/play.html.erb
Thanks!
Rohit Jain
I can tell you for the first part of the question that you may want to try to cache the images in base64 into the localstorage of the user. This way, the data will already be loaded client side and won't require the client to download everything.
Here is a blog post about how to do it .
In short, you have to check if the image is in the local storage
if ( localStorage.getItem('myImageId')) {
if not to save it into it
localStorage.setItem('myImageId',image);
our general experience with HTML5/JavaScript/CSS based games on Android is that it is very slow - we have games we are using across platforms (desktop, TVs, iPhone) but for the Android we rewrite them natively in Java...
Even simple games like pong (the bouncing ball) are slow even on new devices. The situation is much worse when you try it on underpowered ~100-150 EUR devices from ZTE, Huawei or HTC.
If you will find out some general solution we will be more then happy to use it, but i doubt there is any. Does not matter if you are using some framework (i.e. Sencha touch) or not.
See there also.
Regards,
STeN
Related
I was wondering if there is a way to control audio output device patching in HTML5/JavaScript? Like, if the user wanted to have one sound in my web app to go out of one audio device, and another sound out of a different audio device. I know the user can set the default output device on their computer, but for the web app I'm working on, I would like them to be able to send individual sounds to individual outputs while other sounds are playing, similar to the interface below (from a program called QLab).
I feel like the obvious answer is NO, and I do not want to resort to using flash or java. I MIGHT be okay with having to write some sort of browser plugin that interfaces with javascript.
So, after receiving basically zero helpful answers - and finding no further helpful information online, I think I figured out something that we, as developers, NEED to start requesting from browser vendors and w3c. We need to be able to request hardware access from users, in a similar fashion that we can request to access a user's location, or how we can request to send a user push notifications.
Until web developers are allowed the same control as native application developers over hardware, we will be left at a huge disadvantage over what we can offer our users. I don't want to have my users install third/fourth party plugins to enable a little more control/access to their I/O. Users should not have to be inundated with keeping more software than just their web browser updated to have websites run well and securely. And I, for one, do not feel like it should be necessary to write in more languages than HTML, JavaScript, CSS, and PHP to get the same experience a user would get from a native application.
I have no idea how we approach browser vendors about this, but I feel like it would be good to start doing this.
I know this is a little old, but just this year a method was added called "setSinkId" that you can apply to a media element (video, audio) to set the device that audio will be outputted to.
$('#video-element').setSinkId('default');
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId
Though currently it seems only Chrome supports it. I haven't tested on Firefox or other web browsers.
I suggest you take a look at the Web Audio API:
Specs --- Tutorial
There is the destination property in the Web audio API. However it is a readonly property ... so not settable.
Here:
The destination property always correlates to the default hardware output of sound, whether it’s through speakers, attached headphones, or a Bluetooth headset.
I'm working on a sound installation based off web audio and have run into the same problem. I want to map different channel outputs to different speakers. have you had any progress on this?
This gentleman seems to have managed to do it: http://www.brucewiggins.co.uk/?p=311
I tested this out on a apogee quartet and it worked - outputting to 8 different channels.
I also found this article useful: http://www.html5audio.org/2013/03/surround-audio-comes-to-the-web.html
if (context.destination.maxChannelCount >= 4) {
context.destination.channelCount = 4;
}
// otherwise, let's down-mix to 2.0
else {
context.destination.channelCount = 2;
}
context.destination.channelCountMode = "explicit";
context.destination.channelInterpretation = "discrete";
context.destination.numberOfOutputs = 4;
While you can certainly use the splitter and merger nodes to assign to specific channels on the output, the actual devices you output are abstracted by the browser and inaccessible by your code.
I have done some experiments with 8-channel virtual audio cables and relaying that data to other sound devices outside of the browser. Unfortunately, I can't find a browser that will actually open an 8-channel sound card with more than 2 channels.
Hopefully, browsers in the future will provide more options. This flexibility will never come directly to JavaScript... and nor should it. This is an abstraction done for you, and if the browser uses it correctly, it won't be an issue.
I don't know whether my question belongs here but I am asking it anyways. Why is there not a lot of shift in creating the game using HTML5 rather than creating a native game app, especially for mobile application? While I understand completely and assuming my understanding to be correct, for desktop games, a native game can use the graphics card in the computer taking the hefty load of graphics processing off from the CPU. What is the case for mobile browser? Does the mobile browser allowed to have the equal amount of processing resources as the native app? As far as I think, the processor is all and all in mobile phones. If this is correct then, I would think it would be more easier to create game with browser.
Is my understanding correct? Am I missing something here? What is the catch if I want to create game app using HTML and javascript?
A game as a native app would usually be written in a much more efficient language than javascript, for example Java on Android or Objective-C on iOS. Javascript is usually interpreted as it is run (as far as I know), and this affects the performance. Also, while you can obfuscate javascript to hide the implementation (if you want to protect your code), it isn't as effective as compiling a native app (I don't know how hard it is to reverse-engineer Java though).
However, WebGL is becoming more popular, and lets javascript code use hardware acceleration to accelerate graphics. When this is well supported on mobile devices, it might be feasible to make a complex game in the web browser. It certainly makes it more portable, and you could put it in a native WebView (or similar), for it to act like a native app.
Some examples here: http://www.chromeexperiments.com/webgl/
There's a couple potential drawbacks for HTML 5, one of which has already been pointed out, is a potential performance hit. This is sorta a big one, especially for devices that aren't capable of using WebGL. The other really big one for me anyways, is bandwidth use. Most phones (at least in the USA) are on fairly restrictive data plans, and thus if you're accessing the game via HTML 5, you're potentially eating into your bandwidth use every time you play, meanwhile a native app is downloaded once, and that's the last of the data usage...input lag is another biggie, particularly if your game requires specific timing. Granted, as speeds get faster on mobile devices this becomes less and less of an issue, but it will never be equal to what can be done locally on a native app. Lastly, as was pointed out, code hiding, you may or may not care about, but it's easier to do on a native app.
I'm working on HTML5 app that lets several users to work on one document. I need to add a possibility for users (editing the same document) to talk to each other. And I just don't know how to start with that. Here are my questions
Is there an HTML5 lib allowing to transfer sound from microphone between clients?
What about streaming video from camera?
What is an easiest server-side solution for that?
Any thoughts are strongly appreciated! So don't be shy! :)
UPD: please note that I need an abbility for more then two users to talk.
For this you can use WebRTC.
However, this is a very young and unfinished technology that as already stated is currently available only in Chrome stable and Firefox beta. This means there will probably come changes to the current spec, something to be aware of in case of early implementation. But it allow you to use video and audio communication directly in the browser.
Quick-start here:
http://www.html5rocks.com/en/tutorials/webrtc/basics/
Other options are Flash based plugins such as flash-videoio. This is an open source plugin but will naturally require Adobe Flash installed. This may or may not be a problem depending on the company's security policy.
For technical details on implementation please see examples on the provided links.
For many-to-many you can use either:
"Mesh" - everybody connects to everybody. This however is costly on CPU and mobiles are often left out.
"Star" - everybody goes through the most capable device. However, with many connections this will soon run slow for the device handling all connections.
MCU. Specialized server to handle all connections. If mixes audio and video and handles drop-outs as well without affecting the other callers.
Examples of MCU's:
http://sourceforge.net/projects/mcumediaserver/ (open source)
http://www.medooze.com/products/mcu.aspx (commercial)
you are searching for navigator.getUserMedia()
that allows the various users to share video audio and data.
the support is very low... only chrome and the latest verions of opera and firefox support it.
and totally no support on mobile devices... maybe in the next android chrome... dunno
as there is much to talk about and i have no clue on how u wanna setup everything i suggest u read a little more about that on the urls...
http://caniuse.com/stream
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
http://dev.w3.org/2011/webrtc/editor/getusermedia.html
https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia
http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
http://simpl.info/getusermedia/
and SERVERSIDE solution nahh... thats not a good solution
clientside is the way to go.
Not sure if you're required to do it yourself from scratch or are able to use third party libraries/tools.
In which case I would recommend using Tokbox which has support for WebRTC and SDK for iOS.
Their API is simple and easy to use.
My dad wants me to program a board game. This board game will be used in a classroom setting, where the teacher will control the board game for the class. So, if a student gets a question right, the teacher presses one of the buttons and the board game advances.
The game state must also be savable as a file that the teacher can save on a USB drive.
To me, the backend sounds beyond simple, including storing the data in a file. In my opinion, I don't need a database for something this simple.
However, I'm more concerned about the front end, and which programming language to use in general. From what I've discerned from the computers he needs it to run on, they are all running Windows 7. I do have all of the graphics required. It will basically be the pieces moving from one square to the next in a linear fashion, with each piece having its own path.
Now, I was considering doing it in HTML5/JS, but I am worried that the computers do not support it. My dad is looking into it, including if they could install Chrome on the computers. I believe this would be ideal, as he also expressed interest in an iPad version, which would just work as a web page then.
But if these computers could not support HTML5/JS, or you more experience people tell me that HTML5/JS would be a terrible choice, what would you recommend for this project?
Thank you very much for your help.
You might want to consider Adobe Flash. It publishes to the web using the flash plugin, and pblishes to Windows, Mac OS, Android, and iOS as an Adobe AIR app. Plus it has really good handling of animation, and media, should you want to include sound and video, or animations.
If you don;t want to buy Flash from adobe, you might be able to publish it at least partiallu with other tools such as Stencyl.
Considering your requirements for graphics, you don't even need HTML5 advanced features, and everything that browsers were supporting for decade already with CSS2/HTML4 will do just fine. Simplify state saving to just outputing serialized dump for user to copy or generating data: URL for download or even prompt'ing serealized save data and you'll have code that will work on pretty much anything that have a browser.
I have a camera feed coming into a linux machine using a V4l2 interface as the source for a gstreamer pipeline. I'm building an interface to control the camera, and I would like to do so in HTML/javascript, communicating to a local server. The problem is getting a feed from the gst pipeline into the browser. The options for doing so seem to be:
A loopback from gst to a v4l2 device, which is displayed using flash's webcam support
Outputting a MJPEG stream which is displayed in the browser
Outputting a RTSP stream which is displayed by flash
Writing a browser plugin
Overlaying a native X application over the browser
Has anyone had experience solving this problem before? The most important requirement is that the feed be as close to real time as possible. I would like to avoid flash if possible, though it may not be. Any help would be greatly appreciated.
You already thought about multiple solutions. You could also stream in ogg/vorbis/theora or vp8 to an icecast server, see the OLPC GStreamer wiki for examples.
Since you are looking for a python solution as well (according to your tags), have you considered using Flumotion? It's a streaming server written on top of GStreamer with Twisted, and you could integrate it with your own solution. It can stream over HTTP, so you don't need an icecast server.
Depending on the codecs, there are various tweaks to allow low-latency. Typically, with Flumotion, locally, you could get a few seconds latency, and that can be lowered I believe (x264enc can be tweaked to reach less than a second latency, iirc). Typically, you have to reduce the keyframe distance, and also limit the motion-vector estimation to a few nearby frames: that will probably reduce the quality and raise the bitrate though.
What browsers are you targeting? If you ignore Internet Explorer, you should be able to stream OGG/Theora video and/or WebM video direct to the browser using the tag. If you need to support IE as well though you're probably reduced to a flash applet. I just set up a web stream using Flumotion and the free version of Flowplayer http://flowplayer.org/ and it's working very well. Flowplayer has a lot of advanced functionality that I have barely even begun to explore.