Is it possible to add support for the "usb" policy when Google Colab creates an IFrame for a code cell, for example:
import IPython
from google.colab import output
IPython.core.display.display(IPython.display.HTML('''
<button id="button">test</button>
<script>
document.querySelector('#button').onclick = async () => {
device = await navigator.usb.requestDevice({ filters: [{
vendorId: 0xABCD,
classCode: 0xFF, // vendor-specific
protocolCode: 0x01
}]});
};
</script>
'''))
creates an Iframe with:
<iframe allow="accelerometer; autoplay; camera; gyroscope; magnetometer; microphone; serial; xr-spatial-tracking" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-popups-to-escape-sandbox" src="https://ro7dmmbz8ec-496ff2e9c6d22116-0-colab.googleusercontent.com/outputframe.html?vrz=colab-20210722-060124-RC00_386208851" class="" style="height: 40px;"></iframe>
I would need to have "usb;" added to the list of the "allow" attribute. As I am currently getting the following error:
VM10:3 Uncaught (in promise) DOMException: Failed to execute 'requestDevice' on 'USB': Access to the feature "usb" is disallowed by permissions policy.
at HTMLButtonElement.document.querySelector.onclick (:3:34)
It looks like Google Colaboratory is based on the Jupyter project. I found an open issue related to adding the necessary allow attribute to enable the Geolocation API in iframes within a notebook. The same attribute is required to enable APIs like WebUSB. I recommend opening an issue on the project's issue tracker asking for WebUSB support specifically.
Related
I want to use the library like Vimeo Player SDK with Nuxt.js.
<template>
<iframe
id="video01"
ref="video01"
src="https://player.vimeo.com/video/{videoID}">
</iframe>
</template>
<script>
import Player from '#vimeo/player'
export default {
created () {
const iframe = this.$refs.video01
const player = new Player(iframe)
}
}
</script>
But I cannot get DOM.
In case of SPA, I couldn't get DOM.
So error log is here.
TypeError: You must pass either a valid element or a valid id.
In case of SSR, window cannot use.
So error log is here.
window is not defined
Can't I use Vimeo Player SDK with Nuxt.js?
Did you try the vue-vimeo-player package? It could be helpful to have something managed the Vue way.
For the SPA, you will need to wait for the element to be on the page; hence try your code in a mounted hook (created step is before anything get mounted to the DOM).
If you want SSR too, you could try to wrap the whole thing into a
<client-only>
<! --- note I used vue-vimeo-player and not the vimeo-player --->
<vue-vimeo-player ref="player" :video-id="yourVideoID"/>
</client-only>
Here is a repo that I've created to show you how simple it is to make it work: https://github.com/kissu/so-nuxt-vimeo/blob/master/pages/index.vue
It made me find that you should use the <vue-vimeo-player /> component and not <vimeo-player />.
However, I imported the Vue wrapper for Vimeo Embed Player in the demo locally in a Vue component.
Vue component has a photo block and the "edit" button.
<template>
<div>
<tui-image-editor ref="editor" > </tui-image-editor>
<div class="">
<img :src="img">
<button #click="edit()">Edit</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
img: "cdn.domain.shop/eaa49b02e350627622904290a83599d6.png",
};
},
methods: {
edit() {
this.$refs.editor.invoke("loadImageFromURL", this.img, "Editable image");
},
},
};
</script>
As a photo editor, I use TUI image editor. In the click handler, I pass the url to the editor by loadImageFromURL function
when I click the "edit" button in Chrome in Windows I get an error
Access to image at
'cdn.domain.shop/eaa49b02e350627622904290a83599d6.png' from origin
'example.org' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
But when I do the same thing in Chrome in Ubuntu, everything works fine.
What am I doing wrong?
just add random string to url
this.$refs.editor.invoke("loadImageFromURL",this.img+'?'+Math.random(), "Editable image");
the error was due to caching in the browser
After that you have to make sure that every URL you request from Chrome and Safari uses http:// instead of https://. HTTPS retrieval will not work in these browsers at all.
some allows both http and https requests I solved it with a small regular expression that replaced our https URL string with http.
What's the quick solution ?
Add the attribute crossorigin="anonymous" in the <img> tag that displays the image before opening it in the editor.
ie: <img src="targetUri" crossorigin="anonymous" />
Explain the issue and solution
The main issue is related to caching and how the browser send the Origin header.
First you have to know that by default the browser does not send the Origin header when you load an image with the <img> tag that does not have the crossorigin="anonymous" attribute.
More info
What's happening is that the browser tries to load the image from the <img> tag before the image editor is opened, and the puts it into its cache.
So when you open the editor, it tries to load the image a second time, and you actually get a cached response of the first request that was made without the Origin header. Without this header, that cached response does not contain all the allow-control-* headers necessary to pass the CORS check, that why you get the error.
You can check this, by opening Chrome's inspector with "disable cache" checked. It should work.
The previous posts that suggested to include a parameter ?t=<random_number> had the effect to bypass the browser cache, but this solution is not possible when using pre-signed urls.
So adding crossorigin="anonymous" in the img tag should solve the problem.
I am trying to get an object from aws-s3 (a test file with dictionnary inside) with Vue.js and Amplify for a frontend project. I would like to see the content of the file on my interface.
I'm simply using Amplify library with this tag in my component.vue:
<template>
<amplify-s3-text text-key="file_name" />
</template>
I configured the file aws-exports.js like this:
const awsconfig = {
"aws_project_region": "eu-west-1",
"aws_cognito_identity_pool_id": "eu-west-1:xxxxxxxxxxxxxx",
"aws_cognito_region": "eu-west-1",
"aws_user_pools_id": "eu-west-xxxxx",
"aws_user_pools_web_client_id": "xxxxxxx",
"oauth": {},
"aws_user_files": 'enable',
"aws_user_files_s3_bucket": 'bucket_name',
"aws_user_files_s3_bucket_region": 'eu-west-1',
};
export default awsconfig;
I'm working on an EC2 instance so I use a forwarded port to view my app on localhost.
But I can't see anything in my interface. The error on the console is:
axios-http-handler Error: Request failed with status code 403
I am using an existing backend, so I don't want to use amplify/CLI.
I didn't find anything more in the official documentation (https://docs.amplify.aws/ui/storage/s3-text/q/framework/vue).
How can I display the content of this s3 file on my interface ?
I am running Meteor release METEOR#1.4.2.3
I recently installed a social media share package via Atmosphere.
meteor add ellisonleao:sharerjs.
You can also read more about it # http://www.ellison.rocks/sharer.js/
My template looks like this:
Template.detail.events({
"click .sharer": function() {
//add new buttons with share behaviour
$('.postedImagesWell').append(<button class="sharer button" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>);
window.Sharer.init();
}
});
Find below the template in code:
<template name="detail">
<div class="postedImagesWell">
<img class = "img-responsive img-rounded postedImages" id = "trial" src="{{this.photo.url}}" alt="thumbnail" >
</template>
when I run click on the Share on Facebook link. I see this error message in my browser:
Uncaught ReferenceError: React is not defined
I have done some research on how to resolve the following issue which resulted in having to install various packages, which have shown to be all futile. I have had to uninstalled the packages.
Any help on how to resolve the issue would be great!
When I load a library from a function it doesn't load and even crashes the page!
What's up with that??
HTML head:
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
// --- LOADING LIKE THIS WORKS FINE ---
// jQuery is completely loaded
function jqueryLoaded() {
$("body").css("background-color","orange");
}
google.load("jquery", "1.4.3");
google.setOnLoadCallback(jqueryLoaded);
// --- LOADING FROM AN EVENT DOES NOT WORK?? ---
// jQuery UI is completely loaded
function jqueryUILoaded() {
$("body").css("background-color","green");
}
function loadJqueryUI() {
alert("load jQuery UI now..");
google.load("jqueryui", "1.8.6");
google.setOnLoadCallback(jqueryUILoaded);
}
// with a setTimeout it doesn't work either..
// setTimeout("loadJqueryUI()", 2000);
</script>
HTML body:
<input type="button" value="load jQuery UI" onclick="loadJqueryUI()"/>
Okay, it seems that we can not load jQuery dynamically:
http://code.google.com/apis/loader/#Dynamic
The standard google.load functionality loads the API(s) when your page loads
The only Libraries supported by Google Loader, loaded dynamically and with callbacks are:
Google Maps API
Google Search API
Google Feeds API
Google Language API
Google Visualization API
Bummer!
I am going for a lazy-load polling plugin:
http://wonko.com/post/lazyload-200-released
Have you considered replacing INSERT-YOUR-KEY with, erm, your key?