I am using MediaDevices: devicechange event in my react application. On local machin all working good but when i deployed application on server (ubuntu) it gives me the following error
The only difference is OS on local machine I use windows but server is ubuntu.
Here is my function
export function useDevices() {
const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
useEffect(() => {
const getDevices = () => navigator.mediaDevices.enumerateDevices().then(devices => setDevices(devices));
navigator.mediaDevices.addEventListener('devicechange', getDevices);
getDevices();
return () => {
navigator.mediaDevices.removeEventListener('devicechange', getDevices);
};
}, []);
return devices;
}
Thanks in advance.
I found the answer here getUserMedia() is no longer supported in chrome browser over http:// (Unsecure Origin) , It will work on https:// (Secure Origin)
For testing purposes, You can run chrome with the --unsafely-treat-insecure-origin-as- for this, you need to visit this link in chrome chrome://flags/#unsafely-treat-insecure-origin-as-secure and enable the option, add your site URL in the text area, and relaunch the browser. Now you should able to use getmediadevices method.
Related
I’m unable to load the following URL with Cypress. Getting timeout error. I have set the page load time to 2 mins, still same issue. General URLs eg. (https://www.google.co.nz/) works fine.
it(‘First Test’, () => {
cy.visit(‘https://shop.countdown.co.nz/‘)
})
Here's a way, not the best, could be improved...
The Countdown site has an aversion to being run in an iframe, but it can be tested in a child window, see custom command here Cypress using child window
Cypress.Commands.add('openWindow', (url, features) => {
const w = Cypress.config('viewportWidth')
const h = Cypress.config('viewportHeight')
if (!features) {
features = `width=${w}, height=${h}`
}
console.log('openWindow %s "%s"', url, features)
return new Promise(resolve => {
if (window.top.aut) {
console.log('window exists already')
window.top.aut.close()
}
// https://developer.mozilla.org/en-US/docs/Web/API/Window/open
window.top.aut = window.top.open(url, 'aut', features)
// letting page enough time to load and set "document.domain = localhost"
// so we can access it
setTimeout(() => {
cy.state('document', window.top.aut.document)
cy.state('window', window.top.aut)
resolve()
}, 10000)
})
})
Can test with that like this
cy.openWindow('https://shop.countdown.co.nz/').then(() => {
cy.contains('Recipes').click()
cy.contains('Saved Recipes', {timeout:10000}) // if this is there, have navigated
})
I bumped the setTimeout() in custom command to 10 seconds, cause this site drags it's feet a bit.
Configuration:
// cypress.json
{
"baseUrl": "https://shop.countdown.co.nz/",
"chromeWebSecurity": false,
"defaultCommandTimeout": 20000 // see below for better way
}
Command timeout error
Using Gleb's child window command, there's a timeout error that I can't track the source of.
To avoid it I set "defaultCommandTimeout": 20000 in config, but since it's only needed for the openWindow call it's better to remove the global setting and use this instead
cy.then({timeout:20000}, () => {
cy.openWindow('https://shop.countdown.co.nz/', {}).then(() => {
cy.contains('Recipes').click()
cy.contains('Saved Recipes', {timeout:10000}) // if this is there, have navigated
})
})
To check if the long command timeout only applies once, break one of the inner test commands and check that that it times out in the standard 4000 ms.
cy.then({timeout:20000}, () => {
cy.openWindow('https://shop.countdown.co.nz/', {}).then(() => {
cy.contains('Will not find this').click() // Timed out retrying after 4000ms
The quotes are wrong. Try the below code:
it('First Test', ()=>{ cy.visit('https://shop.countdown.co.nz/') })
On trying to visit the URL I am getting the error:
cy.visit() failed trying to load:
https://shop.countdown.co.nz/
We attempted to make an http request to this URL but the request
failed without a response.
We received this error at the network level:
Error: ESOCKETTIMEDOUT
Common situations why this would fail:
you don't have internet access
you forgot to run / boot your web server
your web server isn't accessible
you have weird network configuration settings on your computer
Error Screenshot:
Lets look into the common situations where this might happen:
you don't have internet access: I have a internet access, so this can be ruled out.
you forgot to run / boot your web server - Your site is accessible from a normal browser, this can be ruled out as well.
your web server isn't accessible - This is a possibility where may be there are firewall settings at the server end because of which cypress is not getting any response when accessing the site.
you have weird network configuration settings on your computer - This can be ruled out as well.
I had a similar issue, so what I observed in my case was that the URL was not getting added to the iframe src property and hence cy.visit() was getting timed out each time.
So, I added the URL manually to the src property of the iframe.
Here's my custom command for reference:
Cypress.Commands.add('goto', url => {
return new Promise(res => {
setTimeout(() => {
const frame = window.top.document.getElementsByClassName('aut-iframe')[0];
frame.src = url;
var evt = window.top.document.createEvent('Event');
evt.initEvent('load', false, false);
window.dispatchEvent(evt);
res();
}, 300);
});
});
Now use cy.goto('https://yoururl.com') and you are good to go.
This is for Windows.
I have a flash application I am converting to AIR. I built a captive installer using NSIS and it works fine. However I would like to have an icon on a website which checks if the application is already installed and ask the user if they wish to run it. If it is not installed, they get the option to download it.
I am fairly certain this is doable, because Zoom and GoToMeeting both do this.
My searching skills seem to be failing me when looking for this.
Edit:
It appears the best/only way to do this is to create a custom protocol for the application. Something like DoDaApp://.
Which brings up the next set of questions;
How to create an NSIS file which will create the appropriate registry entries on the client computer? As a user, not admin.
How to check if the protocol is currently installed on the computer?
This is a partial answer as it does not work in Edge. I'll explain the issue below.
As recommended in How to detect browser's protocol handlers you can use timeout & blur event handlers. Here is my interpretation of the code;
function checkCustomProtocol(inProtocol,inInstalLink,inTimeOut)
{
var timeout = inTimeOut;
window.addEventListener('blur',function(e)
{
window.clearTimeout(timeout);
}
)
timeout = window.setTimeout(function()
{
console.log('timeout');
window.location = inInstalLink;
}, inTimeOut
);
window.location = inProtocol;
}
Microsoft Edge is ever so helpful by popping up a dialog box telling you "You'll Need a new app to open this" which "blurs" the screen, not allowing download of the file.
So I will be posting another question on how to make it work in Edge. I have reviewed ismailhabib's code but the known issues section says it doesn't work with Edge either.
Here is a more complete answer. It has been lightly tested in IE 11, Microsoft Edge, Chrome and Firefox. I also added comments;
/*
checkCustomProtocol - check if custom protocol exists
inProtocol - URL of application to run eg: MyApp://
inInstallLink - URL to run when the protocol does not exist.
inTimeOut - time in miliseconds to wait for application to Launch.
*/
function checkCustomProtocol(inProtocol,inInstalLink,inTimeOut)
{
// Check if Microsoft Edge
if (navigator.msLaunchUri)
{
navigator.msLaunchUri(inProtocol, function ()
{
//It launched, nothing to do
},
function()
{
window.location = inInstalLink; //Launch alternative, typically app download.
}
);
}
else
{
// Not Edge
var timeout = inTimeOut;
//Set up a listener to see if it navigates away from the page.
// If so we assume the papplication launched
window.addEventListener('blur',function(e)
{
window.clearTimeout(timeout);
}
)
//Set a timeout so that if the application does not launch within the timeout we
// assume the protocol does not exist
timeout = window.setTimeout(function()
{
console.log('timeout');
window.location = inInstalLink; //Try to launch application
}, inTimeOut
);
window.location = inProtocol; //Launch alternative, typically app download.
}
}
I have a chrome extension that uses the Omnibox API. I want to port this extension to firefox by myself.
I've tried nearly everything that may help, and miserably, I'm exhausted and out of solutions.
Anyway, the extension basically does these steps in Chrome with no errors:
Load global variable called sites which is an array of object
var sites = [
{
"name":"ytb",
"desc":"YouTube",
"url":"https://www.youtube.com/results?search_query={%query%}"
},
{
"name":"ggl",
"desc":"Google",
"url":"https://www.google.com/search?q={%query%}"
},
{
"name":"dvand",
"desc": "Android Devs",
"url": "https://developer.android.com/s/results?q={%query%}"
},
{
"name":"bng",
"desc":"Bing",
"url":"https://www.bing.com/search?q={%query%}"
},
...
];
Save sites object to storage.local on runtime.onInstalled:
browser.runtime.onInstalled.addListener((details) => {
if (details.reason == "install") {
console.log("First install");
save(); //which saves sites to local storage...
load(); //which load sites from local storage...
}
});
Here is the save and load functions:
function save() {
browser.storage.local.set({"ssearch_sites":sites}, () => {
console.log("Saved!",sites);
sites = sites;
});
}
function load() {
browser.storage.local.get('ssearch_sites', (res) => {
console.log("Got!",res.ssearch_sites);
sites = res.ssearch_sites;
});
}
I think the problems could be relying on these:
onInstalled is not working
global variables such as sites are not stored (which is not quite possible).
local storage api is not working very well...
Oh, and I must say, when
I run the extension from these:
web-ext run
It works sometimes as expected, but when I download it from the store, it does not work. How could this even possible? I mean how works on testing and does not work on the production stage?
One more thing, do you know an alternative to local storage API?
Thanks!
Source codes are here:
Google Chrome version
Firefox version
Hello I'm trying to get access to a usb stick from an electron application written in reactjs.
Since electron is a google chromium I thought I can use the USB Web-Api: https://developer.mozilla.org/en-US/docs/Web/API/USB
So I created a component like this:
import React from 'react';
const UsbAccessButton = () => (
<button
className="usb-access-button"
onClick={() => {
navigator.usb
.requestDevice({ filters: [{ vendorId: 0x0951 }] })
.then(device => {
console.log(device.productName);
console.log(device.manufacturerName);
})
.catch(error => {
console.log(error);
});
}}
>
Get USB Access
</button>
);
export default UsbAccessButton;
The vendorId is the correct one for my specific USB stick. But when I click on the button I get a error like this:
DOMException: No device selected. usb-access-button.component.jsx:14
But I want to list the devices available so the user can choose between. So maybe I didn't understand some parts of the docs or what is causing problems here?
UPDATE:
When I run this app inside my default chrome browser I get the dialogue to choose between the usb devices. So it looks like this error is more related to electron itself.
It is not currently (January 2020) possible to have a device chooser for WebUSB in Electron - see the issue here: https://github.com/electron/electron/issues/14545
At the moment the suggested solution is to use the thegecko/webusb polyfill, that uses the node-usb library instead.
This issue is related only to websites hosted on HTTPS, which need to make requests to an HTTP-endpoint (seems to be working in Chrome, however).
The following code was used:
HTML:
<button id="fetchButton">click me</button>
<script>
var worker = new Worker("/worker.js");
var button = document.getElementById("fetchButton");
button.addEventListener("click", function() {
myWorker.postMessage("");
});
worker.onmessage = response => {
console.log("message from worker");
console.log(response.data);
}
</script>
Worker:
onmessage = async function (event) {
const result = await (await fetch("http://localhost:3000/something")).json();
this.postMessage(result);
}
When hosting this website on an HTTPS-enabled website, I get back a response in Chrome, but not in Firefox, but I couldn't find any more specific docs about this one. Is there a way of getting this to work in Firefox, too? Or is this behavior (Firefox) the correct one, on how to deal with mixed-content? The above code works on both Chrome and Firefox, when hosted locally without HTTPS, so it's probably related to serving the website over HTTPS or not.