My browser is upto date with Version 44.0.2403.155 m.
but this link says Your browser does not support web kit speech so a standard input box will be shown. why is that? what did I miss?
That link apparently uses some obsolete implementation.
Chrome platform status site lists a different example: http://simpl.info/stt/
Basic usage example by George Ornbo (more):
var recognition = new webkitSpeechRecognition();
recognition.onresult = function(event) {
console.log(event)
}
recognition.start();
Related
As chrome has webkitspeechrecognition api for speech detection , what can we use for firefox webextension(web speech api not working for me).
I'm making an extension which will continuously listen for speech and then process it.
I have already made a chrome extension which is up and running,so wanted to extend it to Firefox, need an alternative to this line(which is for chrome extension)
recognition = new webkitSpeechRecognition();
I haven't used the Speech Recognition API yet, but you should be able to use
recognition = new SpeechRecognition();
In order for this to work, you need to set
media.webspeech.recognition.enable
to true in about:config. Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
There are a number of outstanding bugs around the implementation of Web Speech in Firefox, so I'm not sure the above is implemented or working well. The basic implementation was done in Firefox 44 / 49.
I want implement like Chrome Metro mode in my desktop app.
Please help me.
class WRLAppViewSource : public mswr::RuntimeClass<winapp::Core::IFrameworkViewSource> {
...
};
mswrw::RoInitializeWrapper roinit(RO_INIT_MULTITHREADED);
HRESULT hr;
mswr::ComPtr<winapp::Core::ICoreApplication> core_app;
hr = CreateActivationFactory(
RuntimeClass_Windows_ApplicationModel_Core_CoreApplication,
core_app.GetAddressOf());
HSTRING id;
hr = core_app->get_Id(&id);
auto viewSource = mswr::Make<WRLAppViewSource>();
hr = core_app->Run(viewSource.Get());
"hr = core_app->Run(viewSource.Get()); " return "hr = 0x80004015 : The class is configured to run as a security id different from the caller".
The "Metro mode" environment (typically used by Windows Store apps) that Chrome, IE, and FireFox use is not available to general purpose desktop apps.
Chrome can do this because it is a "New experience enabled desktop browser" and is selected by the user as the default browser. If you change your default browser to IE then Chrome will lose this ability and IE will gain it.
If you are writing a browser then take a look at the Developing a new experience enabled Desktop Browser white paper.
If you are not writing a browser and are trying to add a Windows Store UI to an existing desktop enterprise app then take a look at Brokered Windows Runtime Components (BWRC). BWRCs allow a side-loaded .Net Windows Store app to interop with a desktop component so the Windows Store app can provide a modern UI which connects to an existing back-end.
I'm creating HTML5 Speech Synthesis application like below link.
http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API
Windows7 and Android Chrome33beta or Mac's safari works fine.
but Windows7-Firefox 27 seems support Speech-Synthesis-API,but not work because return empty voice list.
Is there any solution?
Check if Speech Synthesis API is supported your browser
http://caniuse.com/#feat=speech-synthesis
You can check it with modernizr
http://v3.modernizr.com/download/#-speechsynthesis
If browser not support it, you can use meSpek.js
http://www.masswerk.at/mespeak/
Unfortunately, it looks like only Firefox OS (and perhaps also, Firefox for Android, I have not checked) bundles and supports a speech synthesis library.
There is an open bug regarding desktop support.
As of release 44, the Speech Synthesis half of the api is available on Firefox Desktop.
But weirdly still requires that the flag be set. Under "Browser Compatibility":
Can be enabled via the media.webspeech.synth.enabled and media.webspeech.recognition.enable flags in about:config. Note that currently only the speech synthesis part is available in Firefox Desktop — the speech recognition part will be available soon, once the required internal permissions are sorted out.
I wonder why. MDN has even gone to the trouble of whipping up some nice working examples, why not have the functionality enabled be default?
If you just want to add a button to your webpage to read the page out loud, add this code to your website:
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script type="text/javascript">
<!-- //
var speechpause=0;
function toggleSpeech(){
if(speechpause!=1){
responsiveVoice.pause();
speechpause=1;
}else{
responsiveVoice.resume();
speechpause=0;
}
}
//-->
</script>
<div style="float:right">
<input onclick="responsiveVoice.speak($('#some_div_with_content').text(), 'Deutsch Female', {pitch: .7});" type="button" value="🔊 Play" />
<input onclick="toggleSpeech()" type="button" value="||" />
</div>
This uses jquery to get the text of the content, but that could be easily changed.
I am about to develop an application that is to run on Windows 8.1 tablets. An important feature is to be able to click on a button to access the camera to take some pictures. Ideally I would like to create it as a Web application rather than a native application due to a number of reasons (licences, cross-platform, development time: have no experience in native apps, etc.).
I have looked at the options for capturing images from HTML 5 and have found HTML Media Capture which allows me to write:
<input type="file" accept="image/*" capture="camera" />
To get access to the camera. This works great on iPads and on Android tablets, but I can't get it to work on Windows 8 tablets. I have tried using Chrome on the Windows 8 tablet, but still no effect. All it does is that it opens a file dialog in which I can choose a file to upload. What I want to do is to be able to capture a new image. This standard is not supported by IE (an apparently the other browsers cannot access the device's camera either).
I have also stumbled across Media Capture and Streams which seems to be mostly related to showing streams from e.g. the web cam, but probably could be used to capture images and is supported by Chrome and Firefox among other browsers, but still not by Internet Explorer (even IE11). None of the three browsers' implementations seem to work on my Windows 8.1 test machine though. If someone has gotten getUserMedia to work on Windows 8 tablets in any browser I'm interested in hearing about it.
Anyway, my main question is: Is there any way to access the camera on a Windows 8 tablet using HTML5 from a web application? The only working examples I have seen have relied on a prototype implementation for IE using Active X or solutions that use flash.
EDIT: I would very much prefer to keep it in HTML5/javascript as it has to work offline (using HTML5 Application Cache)
I struggled very much for this solution, at the end I find good a solution. But only can use in windows store apps like chrome windows 8 mode (chrome settings -> relaunch chrome in windows 8 mode) then you can use the normal file input tag in html. when you hit "choose file" u see the image below. Then u can choose camera to add take image from camera.
if you can not see camera in the list, u can install app below.
https://www.microsoft.com/en-US/store/apps/Camera-File-Open-Picker/9WZDNCRFJQVN
So I was running into the exactly same issue. My web app is similar, except I have to do some bar code scanning with the tablet's camera.
I'm using the HTML 5 media api as you commented. In order to make it work in chrome in a Windows 8 Surface Pro, I had to do this:
To enable getUserMedia in Chrome type ‘chrome://flags/’ in URL bar and enable “Enable screen capture support in getUserMedia(). Mac, Windows, Linux, Chrome OS” option.
It was working in my laptop but not in the tablet, after making that change and restarting chrome it worked. Good luck.
Here is the code I ended up using to get around this situation... It appears to work in chrome very well however still no support for Internet Explorer which is known not support getUserMedia. Again I wish this wasn't necessary and windows just supported the take picture feature like iOS and android but it works for now.
Credit:
http://davidwalsh.name/browser-camera
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
getUserMedia interface works in Chrome on my Surface 2, prove:
I've implemented solution described here:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Btw, there is a working example on their site as well:
getUserMedia doesn't work in IE
getUserMedia probably works in FF, but I didn't test
access to the camera from [Browse] button doesn't work in any browser on my Surface 2
EDIT: Just realized, my approach doesn't work on Surface any more. Same story for the html5rocks page, the example given doesn't work on Surface. I guess, new Chrome version stopped to support something. BUT I've found the example which works on Surface for Chrome and Firefox, here you are:
http://www.ceng.metu.edu.tr/~e1559848/demos/qrdecode/index.html
I'm trying to build a Mac OS X application with HTML5 content, and I would like to use the HTML5 geolocation feature in WebView.
For my test I use this basic demo page : http://html5demos.com/geo
On Chrome or Safari, this page is working and the browser shows me an alert about location sharing (Chrome alert infos : https://support.google.com/chrome/bin/answer.py?hl=en&answer=142065).
In my application (a simple WebView in a window) the attempt of geolocate goes directly to fail. Here is a (not necessary) screenshot : http://i46.tinypic.com/fedqtw.png
So, I don't know exactly how to do it but maybe there is a way to intercept the attempt of geolocate and use a modal YesNo alert box to notice user...
Thanks in advance for any help :)
Beny
PS: I looked in WebPreferencesPrivate if possibly a native option to enable may exists, but no.