Add screenshot button to video annotator #1004
Conversation
Use proivde inject to acess data
lehecht
changed the title
|
@mzur |
|
On your local instance you could use the BIIGLE landing page video. |
There was a problem hiding this comment.
I think I prefer not to use provide/inject here as it hides where the data is coming from. Maybe this is a chance to refactor the screenshot button a bit so it gets all data it needs through props. E.g. if it gets the image/video ID as a prop, it does not even need the image/video changed event any more.
The map.init event must stay, though, as the map object must not be passed as a prop. It should never be made reactive.
| fetch(this.videoFileUri.replace(':id', video.id)) | ||
| .then((res) => { | ||
| res.blob().then(function (blob) { | ||
| let urlCreator = window.URL || window.webkitURL; | ||
| self.video.src = urlCreator.createObjectURL(blob); | ||
| }); | ||
| }) | ||
| .catch((e) => { | ||
| // Access on non-CORS enabled file causes TypeError | ||
| this.hasCrossOriginError = e instanceof TypeError; | ||
| self.video.src = self.videoFileUri.replace(':id', video.id); | ||
| }); |
There was a problem hiding this comment.
This tries to download the whole video. Usually the video is fetched dynamically through a series of HTTP range requests, which is crucial here.
You need another method to detect CORS. Maybe create a small canvas element and try to read some data from the video into it?
| imageInfo['currentId'] = biigle.$require('annotations.imageId'); | ||
| imageInfo['ids'] = biigle.$require('annotations.imagesIds'); | ||
| imageInfo['filenames'] = biigle.$require('annotations.imagesFilenames'); | ||
| imageInfo['type'] = 'image'; |
I also thought about it, but then I would need to refactor the video and image |
|
If it's not too much, I think it is fine to pass the props through the settings tab. Alternatively you could |
Closes #956.