How to capture an animated View as video - android

I am using a react-native Image to show some images from some url on the web. Now, based on some condition I update the image urls in different interval.
I want to capture this whole transition into a video file. However, I cannot find a suitable android APIs (for native side) or react-native packages to achieve that.
I already did something similer to convert an android View into a Bitmap and then encode it into a jpeg image.
A basic example of what I already have is as follows:
componentDidMount() {
setInterval(() => {
this.setState({imgUrl: 'some new url' });
}, 2000);
}
render() {
return {
<View style={styles.mystyle}><Image source={this.state.imgUrl}><View>
}
}
Please help me out here. Thanks in advance.

This could help : https://github.com/ycswaves/react-native-screen-recorder
I've not tried this myself, just came across while doing a google search
Possible duplicate question : Is there any plugins for recording screen and voice in React Native with iOS

Related

react-native-video doesn't load videos with a dynamic uri

I'm working on an app where one part of the process is shooting a video, then uploading it. I'm using react-native-video to display the preview after the user has finished recording, and react-native-camera for the capturing process. I also use react-navigation to move between screens.
Currently I can get to the preview screen and set the video component's source uri from Redux. However, there is no player to be seen. The uri is in format "file:///path/video.mp4", so apparently it should be in the app cache as intended.
First the user is presented with a camera, where s/he can capture the video.
const recordVideo = async () => {
if (camera) {
const data = await camera.current.recordAsync()
if (data) {
dispatch(saveVideo(data)) <-- CONTAINS THE URI
navigation.navigate(CONFIRM)
}
}
When stopRecording() is called, the promise obviously resolves and the video's URI will be dispatched to Redux. Afterwards we navigate to the "confirmation screen", where the user can preview the video and choose whether to shoot another or go with this one.
My problem is, I can't get that preview video to play at all. I think I've tried pretty much everything within my power by now and I'm getting really tired of something so seemingly simple being so overly difficult to do. I've gotten the video to play a few times for some odd reason, so it's not the player's fault. At best what I've achieved is show the preview once, but when you go back and shoot another, there's no video preview anymore. Also, the "confirm" screen loads photos normally (that were taken in the same manner: camera -> confirm), but when it's the video's turn, it just doesn't work. The video component's onError handler also gives me this: {"error": {"extra": -2147483648, "what": 1}} which seems like just gibberish.
PS. yes, I've read through every related post here without finding a proper solution.
Use Exoplayer
Instead of using the older Media Player on Android, try using the more modern Exoplayer. If you're on React Native 0.60+, you can specify this in your react-native.config.js by doing the following:
module.exports = {
dependencies: {
"react-native-video": {
platforms: {
android: {
sourceDir: "../node_modules/react-native-video/android-exoplayer"
}
}
}
}
};
I was experiencing the same issue and this solution worked for us. Note, we're only supporting Android 5+ so not sure if this will work with devices older than that.
https://github.com/react-native-video/react-native-video/issues/1747#issuecomment-572512595

Ionic 4 Loading Local resource not working on IOS

I'm trying to load a image from users phone, crop it and then display. Im using the webview plugin to do that. It works as intended on android but not on IOS.
I've tried this from another question, which resloves to file not found error
itemSrc = itemSrc.replace(/^file:\/\//, '');
I also looked at NormalizeURL but that does not seem to work with Ionic 4
Heres some code
this.imagePicker.getPictures(options)
.then((results: string[]) => {
results.forEach(res => {
this.crop.crop(res, {quality: 50})
.then(
data =>{
//this is extracting the URL
this.user.photos.push(this.webview.convertFileSrc(data));
},
After that, the UI should display the cropped image, which it does on android, but not on IOS.
I used safari dev tools to inspect and this is the error:
[Error] Failed to load resource: unsupported URL (unsafe:ionic://localhost/_app_file_/Users/radmac/Library/Developer/CoreSimulator/Devices/8E6A6BFA-66FA-4DB3-B556-BCE9E2EFE33A/data/Containers/Data/Application/C39D8D99-0F67-4D33-9195-EE2B4D4E4707/tmp/cdv_photo_024.jpg, line 0)
So, I found the solution for this. Before that, You can read this blog post which is really helpful if you want to understand more about ionic native and images.
https://ionicframework.com/blog/storing-photos-with-the-cordova-camera-and-file-plugins/
the solution was to just wrap the webview converted src with dom sanitizer, like so,
const resolvedImg = this.webview.convertFileSrc(data);
this.user.photos.push(<string>this.sanitizer.bypassSecurityTrustUrl(resolvedImg));
Make sure to import the dom sanitizer.
import {DomSanitizer} from "#angular/platform-browser";
...
constructor(private sanitizer: DomSanitizer){
...
}

React Native Testing network images for a 404

I am using the Image component to show an image from the web.
Problem :
If the image does not exist on the web, I would like to use a default
image. There is a defaultImage option but isn't supported on android.
Is there a solution for both android and ios?
I would like to avoid having to send another HTTP/HTTPS request to
test for a 404.
There is an onError prop on the tag that you could use to Handle '404'.
For exemple using the state:
<Image
source={this.state.thumbnail}
onError={(e) => {
console.log(e.nativeEvent.error);
this.setState({thumbnail: thumbnailDefaultImage});
}
}
/>
See here for the different props : http://facebook.github.io/react-native/docs/image.html#onError

Way to "preload" Canvas animation before showing the page?

I have started experimenting with the WebView in order to display locally stored HTML files that play some fairly basic Canvas animations (using the CreateJS library).
They seem to play really well but some times, the page is loading and playing the animation before images are fully loaded (e.g. one animation has a fairly large background image ~1mb)
Is there a way to either "speed" things up, "preload/prefetch" the images (and other assets if need be) or simply wait till the app has loaded the images into its memory (if it does that) before displaying and starting the animation?
To add to that last question, is there a way to "pause" the animation and only play it once the images have fully loaded?
Thanks
Try with onload event which runs after all images or external resources are loaded:
$(window).load(function(){
//code
});
or you can try with load event for individual images and run your code when they have loaded:
$('img.imgClass').load(function(){
// The image loaded,,, code
});
The CreateJS suite includes PreloadJS, which is a pretty decent way of preloading content that is used by EaselJS, or any other content for that matter.
http://preloadjs.com
You can pre-fetch images, javascript, audio, JSON/text/XML, SVG, CSS, etc.
var queue = new createjs.PreloadJS();
queue.addEventListener("complete", handleComplete);
queue.loadManifest([
{id: "image", src:"image.png"},
{id: "image2", src: "image2.jpg"},
{id:"script", src:"script.js"}
]);
function handleComplete(event) {
var image = queue.getResult("image"); // Returns an image tag
}
There are some workarounds to preload audio (with multiple formats), or use tag loading to get around cross-domain issues. Check out the docs for more:
http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html
You can do it like this:
create a function that should do this:
loadData();
loadData = function()
{
preloader = new createjs.LoadQueue(true);
preloader.addEventListener("complete",this.handleComplete.bind(this));
var manifest = [
{src:"./images/yourIMAGE.PNG"},
];
preloader.loadManifest(manifest);
};
handleComplete = function()
{
console.log("Load complete!");
//other function
};
}
This is a way to do it. If you have questions just let me know.

Progressdialog for phonegap projects

I am very new to html5, css and javascript. i have knowledge in android development.
Now i have started working on phonegap projects.
In my project i want show a loader just like a progressdialog in android when application moves from one screen to another screen or loading something.
Can any one help me to do this in html5?
I had similar need . I was able to do it using navigator object. Please find below sample code
to load data in background
function someJSFunctionLoadingData() {
navigator.notification.activityStart("Your message....", "loading");
////// some activity
navigator.notification.activityStop();
}
Further to navigate around you could use introduce a small delay ( 2 secs) and let progress bar load during that time and then direct user to the url you need. Below is the example for same
function loadMyUrl(){
navigator.notification.activityStart("Loading some url....", "loading");
setTimeout(function loadMyUrl(){
navigator.app.loadUrl('file:///android_asse/www/someurl.html');
navigator.notification.activityStop();
}, 2000 );
}
I got above idea from this link
An easy solution would be to just create a css based spinner element and set it to hidden/visible when needed via your js.
I searched and found tons of examples online here is one for example.

Categories

Resources