Please have a look at the following code.
<html>
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="30" x-webkit-speech/>
<input type="submit" value="Google Search" />
</form>
</html>
This suppose to display a mic icon and take the voice input in Google Chrome right? But that is not happening. I don't see any mic icon and this do not take any voice input too.
I checked with www.google.com to see whether the mic icon appear and voice recognition works. Yes it does, something is wrong with my code for sure. what have I done wrong? I am having the latest Google Chrome too.
Yes it does. It won't find a server to process though.
See this: http://jsfiddle.net/abhitalks/E28RT/
Its Shows the mic and accepts the voice just fine.
However, as mentioned in this thread x-webkit-speech is getting deprecated. It perhaps was just an experimental thing. It is advised to go with the HTML5 Javascript Voice/Speech API. Ref here: https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html . Even that is going to be heavily browser dependent as of this writing.
please checkout this site:
HTML5-Speech-Recognition-API
This should be what you're looking for.
Greetz
Related
Apologies if this is not done correctly, my first question and extremely strange. I have a simple form with some hidden inputs that get passed to a CGI on submit. An example:
'''
<input type="hidden" NAME="account" VALUE="myaccount" />
<input type="hidden" NAME="xvalue" VALUE="newval" />
<input type="hidden" name="NAME" id="NAME" value="yourname" />
<input type="hidden" name="USER_DATA" value="computer" />
<input name="PASSWORD" id="password" type="text" placeholder="Password" value="" /><br>
<input type="submit" formmethod="post" value="Start" />
</form>
'''
This works 99.9% of the time. I have a user that when they click on a link in a gmail account, with Firefox as the default browser, they hit an index page with the above form. When they attempt to submit the form, the POST method returns as GET on the server side. I've tested this by pointing the action= to a php page that echos all variables returned. When I print $_server[request_method] in php the request_method returns GET, so the POST variables are blank. I need the POST variable to be accurate for the CGI to work properly. To make this even more odd, it only happens on his Android phone, using gmail email client and clicking on the link, with FF as the default browser. My user has tested several combinations of email clients and browsers, and this is the only combination when the problem happens. Works fine if the link is copied and pasted, or typed in browser, and the index page is hit. We have another user who reported the same issue on an iPhone, unknown email client and browser.
I and my colleagues have tested on Android phones, gmail client, Firefox 68 (same as client) with a forwarded link that does not work on client phone. We've tested on as many devices and operating systems that we have, and we cannot recreate the issue, including on client server and an internal server.
Anyone have any thoughts?
I want to open mobile camera when I clicked a button from browser. Below there is an image what i want to do.
This is an image what i have now
I can choose file from local and also want to add from camera.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedfile" accept="image/*" capture="camera">
<input type="submit" value="Upload">
</form>
I tried above code for opening camera and it is from How to access a mobile's camera from a web app? .
Now please help me to show camera on mobile through Browser.
With an input[type="file"] field you can pick a file, or ask the device to record a media. It will always open an app or a prompt to choose an app. If you want to stay in the browser you need to use the MediaStream Recording API but it is not fully supported yet. For now, it is not working in iOS so either way, you have to open up the default camera app.
If you want to take photos you can try the MediaStream Image Capture API. But it is still just an experimental technology which won't work in most of the current browsers.
You can find some examples here:
Taking still photos with WebRTC - MDN
ImageCapture.takePhoto - MDN
Take Photos and Control Camera Settings - Google developers
Access the camera interactively - Google developers
I hope the links above can help you
I want to filter files user can select into <input type='file'>
So I wrote :
<input class="form-control" accept="video/*" name="my_video" id="my_video" type="file"> for video
and <input class="form-control" accept="image/*" name="my_picture" id="my_picture" type="file"> for an image
I do tests with Linux browsers :
Firefox 53.0 (64 bits)
Chromium 58.0.3029.81 (64-bit)
both do not filter file types.
I looked around on stackoverflow. Syntax seems good. But even examples from that discussion does not work for me.
I checked on MDN as well. Nothing to help me.
I also tried to put directly file extension like accept="png" accept=".png", accept="*.png". With same result.
Does someone have a clue to make accept parameter work?
Code is too simple and it shows no error on Chrome.
But for cross-browser functionality you can use jquery code or Bootstrap File Input
I have simple input for uploading files and it only accepts .class files:
<input type="file" accept=".class">
Problem is that accept property (accept=".class") causes dialog to open very slowly in Chrome, it sometimes takes even up to 10 seconds, but it works perfectly in Mozilla Firefox and Internet Explorer. I am using latest version of Chrome - 53.0.2785.116 m (64-bit). I find this really silly because other extensions work perfectly in Chrome as well. I have read other questions with similar problems, some of them suggested that adding name property may fix the problem, but it doesn't help in this case. Problem is really easy to reproduce, you only need the line of code I provided.
Edit:
Google published an update today - 53.0.2785.143 and it seems to have fixed the problem.
This is a known regression bug in Chrome version 52.0.2743.116.
The temporary workaround is use mime type and be explicit (no wildcards). Ex replace:
<input type="file" name="images[]" multiple="multiple" accept="image/*">
with:
<input type="file" name="images[]" multiple="multiple" accept="image/gif, image/png, image/jpeg, image/bmp, image/webp">
To solve your specific problem this should work:
<input type="file" accept="application/java-vm"> per the mime types list
I have an App that show a location in a Google Map in HTML and I'd like to start an navigation app (Google Maps, Bing Maps, Nokia Here, ...) when I touch the map. Is there a way to start an installed navigation/directions app from HTML5 with a specified destination location?
I found the ms-drive-to URI-Scheme, but the mobile Internet Explorer stats that this URI-Scheme is not supportet.
Is there any other way, or do I have to somehow get an event from the HTML5-side of my app to the C#-side and create a MapsTask there?
I'm only adding this as an answer, on the chance that it might work. Because, I honestly don't know. I've tested it on all manner of Android and iPhone, but not Windows:
<form action="http://maps.google.com/maps" method="get" target="_blank">
<input type="hidden" name="saddr" id="address" />
<input type="hidden" name="daddr" value="400 Mercer St, Hightstown, NJ 08520" />
<input type="submit" value="Get Directions" class="menubarBut" style="height: 32px;width: 110px;font-size: 12px;line-height: 12px;margin-top: 5px;" />
</form>
The idea here is that form submits the address. The device intercepts the call and asks what you want to do with it, Google maps, GPS, Navigator, etc...
Like I said... This works all over the place so far. And as near as I can tell it's as close as I've found to a universal solution.
I gave up too quickly.
Turns out the ms-drive-to URI-Scheme is working after all, unless you enter it in the navigation bar directly.
So using it from a link, form, window.location or window.open is fine.