I am building an app on Ionic and have integrated the ngcordova API. I'm wondering if there is a way to select an image from a gallery in my app and then open the camera and overlay, position, resize, screenshot etc the image on top of the camera view?
Yes, it is possible to do that.
You can wrap a <video> item and a <canvas> item in a <div> container, then attach camera to video (use getUserMedia() API).
You can capture screenshots from your camera: try using drawImage API of canvas/context (see for example http://appcropolis.com/blog/web-technology/using-html5-canvas-to-capture-frames-from-a-video/).
The <div> container can be used to keep (via CSS) video and canvas elements together and manage resize/position properly.
The <canvas> element can be used to draw pictures overlayed to the video (using a CSS opacity value).
GetUserMedia API (and other WebRTC APIs) are available on Android thanks to Crosswalk which is an alternative WebView in an Ionic/Cordova project.
Related
I am developing a document scanner app in flutter, however of all the flutter apps I have seen, they are using the camera plugin which has a main issue that I found out here:
https://github.com/flutter/flutter/issues/45906#issuecomment-1124244943
I want to have a full resolution preview(for taking photos) rather than the video preview of the camera(which is also a little zoomed in). Any ideas?
I'm doing screen recording in Flutter using the below Plugin
https://pub.dev/packages/ed_screen_recorder
Now I'm trying to draw something over the mobile screen instead of within in the app, using Canvas while screen recording is going on. Can someone suggest some plugin or some working example of using canvas to draw on top of device screen in Flutter.
I did some complex 3d animations on blender and I want to play them on flutter. The problem is that when I export the animation into a video and I put it on my flutter app the transparent background is gone. I'm using video_player to play videos on flutter and the video extension I use is .webm because is the only one I know that can be readed on flutter and have a transparent background but the application puts a black background in the video.
The conclusion I get is that video player plugin is not the best idea to do it. So i've been searching about how flutter manage gifs and it's manage alpha channel perfectly because it can manage alpha channel on image. But the next problem is how to control the gif, for that I use gifimage plugin which works really well to reproduce an animation. Finally the last problem is to export from blender to a gif, blender can't export on gif format so you should export into a quicktime format with Qt animation codec and then convert it to gif. If for some reason the first frame of the gif stay as background of the gif you should edit the gif with photoshop for example and change in the timeline the first frame to not disappear to disappear.
Current player plugin uses ExoPlayer on Android. I found this issue on the repo.
How to take a panorama picture using Ionic ? i tried using the camera plugin on ionic but no luck. it just take a simple picture.
Extra Camera features such as panorama mode (with multiple images blending etc) are not yet exposed by platforms APIs unfortunately. You can not achieve it in Ionic since current plugins do not have those functions.
Android webview can be used as a UI element in Android, how do I render the whole webview at a specific place using Google Tango? Currently, one can place 3D objects, sprites.
It is possible but not with normal Android UI out of the box
If you build your tango application using unity you can use for example this https://www.assetstore.unity3d.com/en/#!/content/82379 to render the web view as part of the 3d space