For a project I've implemented a web speech api in a website/Progressive Web App which translates spoken voice to text. This all works fine, however, I would also like to use this without access to internet.
My initial thought was that I could save my recognition object to a indexeddb and process it later. However, when I try to do this I get the following error:
DOMException: Failed to execute 'put' on 'IDBObjectStore': SpeechRecognitionEvent object could not be cloned.
While I do understand why I get this error, I have no clue on any alternative way of doing this or how I can solve this error.
My object looks as following:
When I try to serialize my object using JSON.stringify() I get the following:
I lose all of my information.
My code looks as follows:
function attachRecognition() {
recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.onstart = function(event) {
recognitionStarted = true;
};
recognition.onend = function(event) {
recognitionStarted = false;
};
recognition.onresult = function(event) {
var finalPhrase = '';
var interimPhrase = '';
var result;
for(var i=0; i<event.results.length; ++i) {
result = event.results[i];
if( result.isFinal ) {
finalPhrase = finalPhrase.trim() + ' ' + result[0].transcript;
}
else {
interimPhrase = interimPhrase.trim() + ' ' + result[0].transcript;
}
}
var input_field = $(related_input_field);
if (connected) {
input_field.val(input_field.val() + finalPhrase + ".");
}
// This is where I would store my event data in case there's no connection.
else {
set(related_input_field.attr("id"), event)
.then(() => {
console.log(related_input_field.attr("id") + ' data cached');
})
.catch(console.warn);
}
}
}
How can I solve this?
Related
Im working on a voice recognition system where a voice command can pull up NASA's Astronomy Picture of the Day through their NASA API. I've made some simple code just to test it out by saying "Check Steve" and it'll check the check box named Steve. However when I say "Astronomy Picture of the Day", it returns "undefined" rather than the picture or text from the NASA API. Why is that?
var message = document.querySelector('#message');
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var grammar = '#JSGF V1.0;'
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.onspeechend = function() {
recognition.stop();
};
recognition.onerror = function(event) {
message.textContent = 'Error occurred in recognition: ' + event.error;
}
document.querySelector('#btnGiveCommand').addEventListener('click', function(){
recognition.start();
sendApiRequest()
});
async function sendApiRequest(){
let API_KEY = "7RTzkUMJOC8QYxM4COFoVha8NvAhxcZH2Ca7Px0G"
let response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`);
console.log(response)
let event = await response.json()
console.log(event)
// how do i call the line of code right below this comment to this function?
}
recognition.onresult = function(event) {
var last = event.results.length - 1;
var command = event.results[last][0].transcript;
message.textContent = 'Voice Input: ' + command + '.';
if(command.toLowerCase() === 'astronomy picture of the day'){
document.querySelector("#chkSteve").innerHTML = event.explanation
}
else if (command.toLowerCase() === 'select tony'){
document.querySelector('#chkTony').checked = true;
}
else if (command.toLowerCase() === 'select bruce'){
document.querySelector('#chkBruce').checked = true;
}
else if (command.toLowerCase() === 'select nick'){
document.querySelector('#chkNick').checked = true;
}
}
I have created WebSocket.js but unfortunately I am unable to test it due to unavailability of data. The requirement is the data comes from various sources so I have multiple sockets for that. Note: I want to particularly test my socket.onMessage behaves for different sockets. Please find the code snippet below:
var webSocket;
var txQueue = [];
var defaultReconnectTimeout = 1000; //will be multiplied by 2 and saved into reconnectTimeout on each try
var reconnectTimeout = defaultReconnectTimeout;
var registerWebSocketHandlers = function(webSocket) {
webSocket.onclose = function(){
setTimeout(service.reopen, reconnectTimeout *= 2);
};
webSocket.onopen = function(e) {
reconnectTimeout = defaultReconnectTimeout; //reset this
deferredSend();
};
webSocket.onerror = function(e) {
throw new Error("[WebSocket] An error occured " + e);
};
}
var uniqid = function() {
return (new Date().getTime()).toString(16);
}
var deferredSend = function() {
if(!service.isOpen()) {
$timeout(deferredSend, 100);
return;
}
while(txQueue.length && service.isOpen()) {
var payload = txQueue.shift();
webSocket.send(typeof payload === 'string' ? payload : JSON.stringify(payload));
}
};
var createNewWebSocketInstance = function(apiUrl){
var websocket = new $window.WebSocket(apiUrl);
websocket.id = uniqid();
return websocket;
}
// TODO: this is a bit hacky since we directly bind it to the raw window event
$window.onbeforeunload = function(e) {
service.close();
};
var service = {};
service.setMessageEventHandler = function(name,cb) {
instances[name].onmessage = function(msg) {
if(msg.data.indexOf('Status: connected') === 0)
{
return;
}
var jsonObj = JSON.parse(msg.data);
cb(jsonObj);
};
};
service.isOpen = function() {
return webSocket.readyState === 1;
};
service.send = function(msg) {
txQueue.push(msg);
deferredSend();
};
service.close = function() {
return webSocket.close();
};
service.reopen = function() {
// get old message handler
var msgHandler = webSocket.onmessage;
// try closing the previous WebSocket
service.close();
// open new WebSocket
openConnection();
// re-attach old handler to new WebSocket
webSocket.onmessage = msgHandler;
};
service.getId = function() {
return webSocket.id;
}
// Returns an already existing instance of the socket, if unavailable then creates a new one.
service.getInstance = function(name, config) {
if(!(name in instances)) {
instances[name] = createNewWebSocketInstance(config);
}
registerWebSocketHandlers(instances[name]);
return instances[name];
};
return service;
You can test WebSocket using websocket.html at websocket.org Echo Test Creating your own test
Using a text editor, copy the following code and save it as
websocket.html somewhere on your hard drive. Then simply open it in a browser. The page will automatically connect, send a message,
display the response, and close the connection.
See Linux - WebSocket test error.
I have been trying to Capture the call that analytics.js makes after it is loaded in phantomjs headless browser.
The problem with this is that, analytics.js load after the page completely loads. So, its getting difficult to track analytics.js calls.
The code which I have tried till now is:
var url = "http://www.alexandani.com/necklaces/sand-dollar-expandable-necklace.html";
var auditlinks = {"www.google-analytics.com/analytics.js": 6, "metrics.alexandani.com": 9, "www.google-analytics.com/collect": 7};
var block_request = 1;
var execution_timeout = 40000;
var resource_timeout = 50000;
var inactivity_timeout = 50000;
var user_agent = "Mozilla/5.0 (Unknown; Linux x86_64) AppleWebKit/534.34 (KHTML, like Gecko) PhantomJS/1.9.0 Safari/534.34";
var page_http_status_target_url = url;
var page_http_status = null;
var inactivity_timeout_check_period = 100;
var requests = new Array();
var auditlink_urls = Object.keys(auditlinks);
function print(obj){
console.log(JSON.stringify(obj));
}
function create_url_cleaner(){
var rx_match_protocol = /^(http|https):\/\//i;
var rx_match_query_params = /\/*\?.*/i;
function clean_url(url){
return (
(url.replace(rx_match_protocol, ''))
.replace(rx_match_query_params, '')
);
}
return clean_url;
}
function exit(exit_reason){
console.log(requests);
print({
'requests': requests,
'exit_reason': exit_reason,
// Returning http status as an integer makes little sense to me.
'http_status': (page_http_status === null)
? null : page_http_status.toString(),
});
phantom.exit(0);
}
function start_exec_time_limiter(execution_timeout){
setTimeout(
function (){
console.log('hi');
exit("EXEC_TIMEOUT");
},
execution_timeout
);
}
function start_inactivity_tracker(
inactivity_timeout,
inactivity_timeout_check_period
){
var last_activity_time = Date.now();
function register_activity(){
last_activity_time = Date.now();
}
function check_inactivity(){
var now = Date.now();
if (now - last_activity_time > inactivity_timeout){
exit("INACTIVITY_TIMEOUT")
}
}
setInterval(check_inactivity, inactivity_timeout_check_period);
return register_activity;
}
start_exec_time_limiter(execution_timeout);
var clean_url = create_url_cleaner();
var register_activity = start_inactivity_tracker(
inactivity_timeout, inactivity_timeout_check_period);
var page = require('webpage').create();
page.settings.userAgent = user_agent;
page.settings.resourceTimeout = resource_timeout;
//page.injectJs('wait.js');
page.onError = function (msg, stack){
// Ignore errors in the webpage context.
}
page.onResourceReceived = function (response){
register_activity();
if (response.url == page_http_status_target_url){
if (response.redirectURL){
page_http_status_target_url = response.redirectURL;
}
else {
page_http_status = response.status;
page_http_status_target_url = null;
}
}
}
page.onResourceRequested = function (requestData, request){
register_activity();
var timestamp = Date.now();
var url = requestData["url"];
var bare_url = clean_url(url);
for (var k in auditlink_urls){
var alurl = auditlink_urls[k];
if (bare_url.indexOf(alurl) === 0){
requests[requests.length] = [url, auditlinks[alurl], timestamp];
if (block_request === true){
request.abort();
}
break;
}
}
}
page.open(url);
//---------------------------------------------------------------------------//
Why do you need to load analytics.js at all in PhantomJS? If all you want to do is test that the calls to ga() are what you'd expect, just stub out the ga() function and assert that the calls it receives are what you'd expect.
In fact, the analytics.js snippet itself is essentially just a stub that stores the calls it receives on its q property while it waits for the full library to download.
If you don't download the analytics.js script, that ga.q will always be inspectable.
I am trying to make a plugin for Mozilla which prints simple SSL details like Name and certificate is valid till what date.
Here is my CODE :
var data = require("sdk/self").data;
var text_entry = require("sdk/panel").Panel({
width: 412,
height: 400,
contentURL: data.url("text-entry.html"),
contentScriptFile: data.url("get-text.js")
});
require("sdk/widget").Widget({
label: "Text entry",
id: "text-entry",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: text_entry,
});
text_entry.on("show", function() {
text_entry.port.emit("show");
});
text_entry.port.on("text-entered", function (text) {
console.log(text);
var requrl = require("sdk/tabs").activeTab.url;
console.log(requrl);
const {Ci,Cc} = require("chrome");
//var req = new XMLHttpRequest();
var req = Cc["#mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Ci.nsIXMLHttpRequest);
req.open('GET', requrl, false);
req.onload = function(e) {
console.log(req);
let channel = req.channel;
console.log(requrl);
if (! channel instanceof Ci.nsIChannel) {
console.log("No channel available\n");
return;
}
console.log(requrl);
var secInfo = req.securityInfo;
var cert = secInfo.QueryInterface(Ci.nsISSLStatusProvider).SSLStatus.QueryInterface(Ci.nsISSLStatus).serverCert ;
var validity = cert.validity.QueryInterface(Ci.nsIX509CertValidity);
console.log(requrl);
console.log("\tCommon name (CN) = " + cert.commonName + "\n");
console.log("\tOrganisation = " + cert.organization + "\n");
console.log("\tIssuer = " + cert.issuerOrganization + "\n");
console.log("\tSHA1 fingerprint = " + cert.sha1Fingerprint + "\n");
console.log("\tValid from " + validity.notBeforeGMT + "\n");
console.log("\tValid until " + validity.notAfterGMT + "\n");
};
});
It says, XMLHttpRequest is not defined. Also the channel structure is empty when printed to console.
Not exactly sure where your code is broken or why (as I'm to lazy to replicate the missing pieces like the text-entry.html).
Anyway, here is a fast test that works for me in both, and SDK add-on and Scratchpad:
// Save as your main.js.
// Alternatively execute in a Scratchpad in about:newTab.
var sdk = false;
if (!("Cc" in this)) {
try {
// add-on SDK version
this.Cc = require("chrome").Cc;
this.Ci = require("chrome").Ci;
this.log = console.error.bind(console);
this.sdk = true;
log("using SDK");
}
catch (ex) {
// Scratchpad on about:newtab version
this.Cc = Components["classes"];
this.log = console.log.bind(console);
log("using scratchpad");
}
}
let r = Cc["#mozilla.org/xmlextras/xmlhttprequest;1"]
.createInstance(Ci.nsIXMLHttpRequest);
r.open("GET", "https://tn123.org/");
r.onloadend = function(e) {
let ok = "OK";
try {
log(e);
// Note: instanceof is an implicit QueryInterface!
log(this.channel instanceof Ci.nsIChannel);
log(this.channel.securityInfo instanceof Ci.nsISSLStatusProvider);
let status, cert;
log(status = this.channel.securityInfo.SSLStatus);
log(status.cipherName);
log(cert = status.serverCert);
log("Common name (CN) = " + cert.commonName);
log("Organisation = " + cert.organization);
log("Issuer = " + cert.issuerOrganization);
log("SHA1 fingerprint = " + cert.sha1Fingerprint);
log("Valid from " + cert.validity.notBeforeGMT);
log("Valid until " + cert.validity.notAfterGMT);
for (let k of Object.keys(cert)) {
if (k[0].toUpperCase() === k[0]) {
// skip constants
continue;
}
let v = cert[k];
if (typeof v === "function") {
continue;
}
log(k + ": " + v);
}
}
catch (ex) {
log("Caught exception", ex);
ok = ex;
}
if (sdk) {
require("notifications").notify({
title: "Test done",
text: "HTTPS test done; result=" + ok
});
}
log("HTTPS test done; result=" + ok);
};
r.send();
PS: I'm using console.error in the SDK, because:
If you're developing your add-on using the Extension Auto-installer,
then the add-on is installed in Firefox, meaning that messages will
appear in the Browser Console. But see the discussion of logging
levels: by default, messages logged using log(), info(), trace(), or
warn() won't be logged in these situations.
Have you written this in the content script? If so, you can't make requests from the content script (which is why it says it does not exist). You need to write this in main.js. If you want to communicate with your content script (html, window, etc) you'll have to use message passing: port.emit and addon.emit to send messages and port.on and addon.on to listen for messages.
I'm trying to build a small class-like container that will make it a little cleaner to load and store data from the HTML5 IndexedDB. To be honest this is the first time I've ever played with this feature, so my issue could be trivial.
I'm basing my code off of this tutorial:
http://www.html5rocks.com/en/tutorials/indexeddb/todo/
function DBDictionary()
{
this.Holder = {};
this.Entries = new Array();
this.Opened = false;
this.v = "1.0";
this.Holder.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
if ('webkitIndexedDB' in window)
{
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
this.Holder.indexedDB = {};
this.Holder.indexedDB.db = null;
this.Holder.indexedDB.onerror = function(e)
{
console.log(e);
};
this.DownloadDB = function()
{
if(this.Opened) return;
var request = this.Holder.indexedDB.open("Storage");
request.onsuccess = function(e)
{
this.Holder.indexedDB.db = e.target.result;
var db = this.Holder.indexedDB.db;
// We can only create Object stores in a setVersion transaction;
if (v!= db.version)
{
var setVrequest = db.setVersion(v);
// onsuccess is the only place we can create Object Stores
setVrequest.onerror = this.Holder.indexedDB.onerror;
setVrequest.onsuccess = function(e)
{
if(db.objectStoreNames.contains("Storage")) db.deleteObjectStore("Storage");
var store = db.createObjectStore("Storage", {keyPath: "Key"});
this.PopulateAll();
};
}
else
{
this.PopulateAll();
}
};
request.onerror = this.Holder.indexedDB.onerror;
};
this.UploadDB = function()
{
this.DeleteAll();
this.SaveAll();
};
this.DeleteAll = function()
{
var db = this.Holder.indexedDB.db;
var trans = db.transaction(["Storage"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("Storage");
Entries.forEach(function(element, index, array)
{
var request = store.delete(index);
request.onerror = function(e)
{
console.log("Error Deleting: ", e);
};
});
};
this.PopulateAll = function()
{
var db = this.Holder.indexedDB.db;
var trans = db.transaction(["Storage"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("Storage");
// Get everything in the store;
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function(e)
{
var result = e.target.result;
//No more results to load
if(!!result == false)
{
if(!this.Opened) this.Opened = true;
return;
}
this.Entries[result.Key] = result.Value;
result.continue();
};
cursorRequest.onerror = this.Holder.indexedDB.onerror;
};
this.SaveAll = function()
{
var db = this.Holder.indexedDB.db;
var trans = db.transaction(["Storage"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("Storage");
Entries.forEach(function(element, index, array)
{
var data = {
"Key": index,
"Value": element,
"timeStamp": new Date().getTime()
};
var request = store.put(data);
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
});
};
}
function main()
{
var dictionary = new DBDictionary();
dictionary.DownloadDB();
dictionary.Entries["hello"] = "world";
alert(dictionary.Entries["hello"]);
}
$(document).ready(main);
My desired implemented state should look something like this:
function main()
{
var dictionary = new DBDictionary();
dictionary.DownloadDB();
dictionary.Entries["hello"] = "world";
alert(dictionary.Entries["hello"]);
}
$(document).ready(main);
What this should do is download the data from the browser's IndexedDB object and store them into the object-housed array Entries. When I want to store the value of Entires back into the DB, I would call dictionary.UploadDB();
However, I'm getting the single javascript error: Uncaught TypeError: Object # has no method 'open'. I'm pretty much at a loss as to what I'm doing wrong. Can anyone offer me some tips?
Do a typeof check and console.log the this.Holder.indexedDB object to inspect the prototype. Does it inherit the IDBDatabase prototype? If it does, the open method would be available to you.
If your window.indexedDB did fire the on success callback, e.target.result would be the correct way to access the newly opened database via the event object. But the fact that you're not getting that far suggests that your this.Holder.indexedDB object is not actually an instance of an IDBDatabase.
EDIT: Yes, this is exactly your issue. If you console.log the this.holder.indexedDB object you get an object that looks like {"db":null}.
Swap this.Holder.indexedDB for window.webkitIndexedDB at your open invocation and you'll see that 'world' alert pops. JSFiddle here.