My goal here is to use get some Speech to Text recognition with Meteor. I know that most device keyboards already have a Microphone button that enables Speech to Text, but I want to avoid having the users keyboard pop up.
To do this: I have been trying to use the webKitSpeechRecognition used here. I have it working on desktop just fine. But when I navigate to my localhost on my phone, or actually build the app on the mobile phone (Android Galaxy s5), weird things start to happen.
When navigating to localhost:
Rather than having the finalized text appear as it does on desktop, I get every iteration of what my recognition object thought. For example: if I said: 'Hello Stack'.
I get: 'hellohellohello stackhello stack'
When launching Mobile App:
The microphone never turns on. None of my console.logs come through and nothing ever happens.
Here is a Gist of all my code. And here is the relevant parts. Everything else is pretty standard Meteor template.
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
Session.set('final_span','')
Session.set('interim_span','')
final_transcript='';
recognition.onstart = function() {
Session.set('listening',true)
recognizing = true;
console.log('started')
}
recognition.onresult = function(event) {
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
Session.set('final_span',final_transcript)
Session.set('interim_span',interim_transcript);
}
I've looked for packages to solve this for me and didn't find any that worked.
TLDR: Any insight on how to get Speech Recognition on a mobile device using Meteor.
Related
I am using standard JS speech recognition in my NextJS app, and it works well in Chrome web browser and on Android. But it doesn't work when I try to run it in Chrome on iOS, but in Safari it works well. What can be the issue? I checked Chrome settings and access to mic is allowed there.
This is the speech recognition method that I use:
// new speech recognition object
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
// This runs when the speech recognition service starts
recognition.onstart = function() {
console.log("We are listening. Try speaking into the microphone.");
};
recognition.onspeechend = function() {
// when user is done speaking
recognition.stop();
}
// This runs when the speech recognition service returns result
recognition.onresult = function(event) {
var transcript = event.results[0][0].transcript;
};
// start recognition
recognition.start();
I have a legacy application which is making use of ActiveX control for serial communication. This is rightly communicating in IE.
Since ActiveX is IE specific technology obviously it will not run in Chrome or other browser
So I don't want to disturb the IE functionality and thought of introducing browser specific function as below.
$(document).ready(function(e){
var isIEBrowserFlag = true;
if(isIEBrowserFlag)
{
var obj = new ActiveXObject("MSCommLib.MSComm");
obj.CommPort = commPort;
obj.RThreshold = thresHold;
obj.Settings = settings;
obj.PortOpen = true;
obj.DTREnable = true;
obj.Output = "test";
obj.PortOpen = false;
//other stuff
}
else
{
//chrome
}
//sendBagToPrinter(obj);
});
On googling I came to know about jQuery.parseXML() but how do I implement the same functionality as of IE in Chrome using $.parseXML()
Similar other plugins such as juart were tried, but not fitting my requirement.
chrome.serial API provides access to client serial ports, but from a Chrome App.
My suggestion, for future support, use/write some kind of server for serial device and connect from browser to server via a json type communication. See https://github.com/johnlauer/serial-port-json-server
I have a web application that makes use of the HTML5 speech synthesis API and it works - but only with the native voice. Here's my code:
var msg = new SpeechSynthesisUtterance();
var voices;
window.speechSynthesis.onvoiceschanged = function() {
voices = window.speechSynthesis.getVoices();
};
$("#btnRead").click(function() {
speak();
});
function speak(){
msg = new SpeechSynthesisUtterance();
msg.rate = 0.8;
msg.text = $("#contentView").html();
msg.voice = voices[10];
msg.lang = 'en-GB';
window.speechSynthesis.speak(msg);
}
voices[10] is the only voice that works and when I log it to the console I can see that it's the native voice - which seems to suggest that the other voices aren't being loaded properly, but they still appear in the voices array when it's logged to the console as you can see here:
Anyone have any ideas? I'm sure I'm probably missing something relatively simple but I've been wrestling with this for a bit now! I'm using Google Chrome version 42.0.2311.90 which should support the speech synthesis API as far as I can tell.
Just started playing with speechSynthesis so did not spend so much time on it. I stumbled on your question and I believe the answer is that the voice you select does not support the language you give it and you get a fallback.
If you read the docs and check how you select a voice it works (at least at my pc)
https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API?hl=en
var msg = new SpeechSynthesisUtterance('Awesome!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) {
return voice.name == 'Google UK English Male';
})[0];
// now say it like you mean it:
speechSynthesis.speak(msg);
Hope this helps you or others searching for it.
I am a WP dev beginner and learning how to write a simple video recorder app. I am using javascript and HTML on VS Pro 2013 and debugging on my actual device Lumia 520 (running Windows Phone 8.1 Preview). I read through a body of documentations and found that the MediaCapture class was the core class for this purpose. So I started following some tutorials and wrote up some functions to access the camera and display a preview in a HTML5 video tag. However, I wasn't successful in getting the MediaCapture object initialized, not even displaying the preview. Below are the major functions of which the first one was problematic:
function initCapture() {
findRearFacingCamera().then(function (cameraId) {
try {
if (cameraId != null && cameraId != "") {
// Initialize the settings
captureInitSettings = null;
captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
captureInitSettings.videoDeviceId = cameraId;
captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.video;
captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
captureInitSettings.realTimeModeEnabled = true;
// Initialize the capture
oMediaCapture = null;
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync(captureInitSettings).then(preview, errorHandler);
}
} catch (e) { }
});
}
function preview() {
var preview = document.getElementById("PreviewScreen");
preview.msZoom = true;
if (preview != null) {
preview.src = URL.createObjectURL(oMediaCapture);
preview.play();
}
}
function errorHandler(e) {
var information = document.getElementById("message");
information.innerHTML = e.message;
}
During debugging, I paused at the statement oMediaCapture = new Windows.Media.Capture.MediaCapture(); in the initCapture() function. At this point, captureInitSettings.videoDeviceId has the value: "\\?\DISPLAY#QCOM_AVStream#3&25691128&0&UID32768#{e5323777-f976-4f5b-9b55-b94699c46e44}\Back Sensor", which I believed was a correct identification of the rear camera that I intended to use. Then, when I continued with a break point set at var preview = document.getElementById("PreviewScreen"); in function preview(), which was supposed to be called upon successful initialization of the MediaCapture object, the program was trapped into the errorHandler() function instead, with the error message being "Access is denied" with error number "-2147024891". So I guess the problem rose from the .initializeAsync() function, which was unsuccessful. Deeper causes might also be related to the permission to access the camera. BTW, I have enabled the webcam and microphone capabilities for this app, which was not the issue.
I believe I was missing something either in the code or in the big picture of the development settings. Please help me identify the issue and let me know if any additional information is needed. Much appreciated!
Did you make sure you added the Rear Camera requirement in your Package Manifest?
Turned out the problem was really with my device. Recall that I was testing on a Lumia 520 with Windows Phone 8.1 preview, the firmware stayed at Lumia Black. After upgrading the firmware to Lumia Cyan (parallel to Windows Phone 8.1) using the Nokia Recovery Software Tool, the problem disappeared.
I have this Javacsript code that checks to see if there is a DIV named "google-ad", and if there is, it writes in a the necessary code to display the Google Ad.
This works great in browsers like Firefox, Chrome, Safari on Mac, and Android.
However, when I bundle this code with Adobe's Phonegap Build, and deploy it to iPhones, it behaves strangely. It launches a browser window displaying just the Google Ad alone. In order to keep using my app, every time I change a page and a new Google Ad is loaded, I have to close the browser window to get back to the app.
Why is this code launching browser windows outside of my Phonegap app on iPhone?
if(document.getElementById("google-ad")
&& document.getElementById("google-ad") !== null
&& document.getElementById("google-ad") !== "undefined")
{
if(userStatus.status == 0)
{
document.getElementById("centre").style.padding = "137px 0 12px 0";
document.getElementById("header-container").style.margin = "-138px 0 0 0";
document.getElementById("header-container").style.height = "132px";
document.getElementById("header-username").style.top = "52px";
document.getElementById("google-ad").style.height = "50px";
document.getElementById("google-ad").style.width = "320px";
document.getElementById("google-ad").style.backgroundColor = "#f0ebff";
document.getElementById("google-ad").style.display = "block";
window["google_ad_client"] = 'ca-pub-0000000000000000';
window["google_ad_slot"] = "00000000";
window["google_ad_width"] = 320;
window["google_ad_height"] = 50;
window.adcontainer = document.getElementById('google-ad');
window.adhtml = '';
function mywrite(html)
{
adhtml += html;
adcontainer.innerHTML = adhtml;
};
document.write_ = document.write;
document.write = mywrite;
script = document.createElement('script');
script.src='http://pagead2.googlesyndication.com/pagead/show_ads.js';
script.type='text/javascript';
document.body.appendChild(script);
}
Problom you are facing is becuase google adsens is using iframe see in show_ads.js
e=["<iframe"],d;for(d in a)a.hasOwnProperty(d)&&ka(e,d+"="+a[d]);e.push('style="left:0;position:absolute;top:0;"')
and when that happens in phonegap(generally webview) it will open new page to show it.
there are some ways to turn around but best way i could suggest is using google offical adsense sdk for moile :
https://developers.google.com/mobile-ads-sdk/docs/
it is native but you could easily connect it to you html app with simple plugin(i could help you with that if you want)
the thing you are trying to do now i think cause your app to be rejected by apple so use google official sdk.