Develop Reference

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

getUserMedia frozen at first frame on Android Chrome

I have a working code on desktop browsers supporting getUserMedia Api, I can correctly see a video preview of my webcam in the div videoPreview. However, when running on Android device, this same code takes a picture with my front camera when I accept to share it in Chrome browser, then the preview keeps frozen on this first frame.
navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
navigator.getMedia(
// constraints
{video:true, audio:false},
// success callback
function (mediaStream) {
var video = document.getElementById('videoPreview');
video.src = window.URL.createObjectURL(mediaStream);
video.play();
},
//handle error
function (error) {
console.log(error);
}
)

For those encountering same problem : I fixed it by adding autoplay attribute to my <video> tag.
Was stuck with this for a while, I hope this will help someone else.

A colleague of mine and myself had the same issue today: working code didn't work anymore and the camera was frozen. Surprisingly (or not), a reboot fixed that problem.

Possible to reduce SoundManager 2 lag on Android?

I've implemented SoundManager 2 on my webpage which all works fantastically well in every browser I've thrown at it so far.
When I test on desktop, there is very little lag between clicking the div and hearing the sound played.
However, on Android there is always a lag of about a second the first time the sound is played. After that, there is hardly any lag at all.
Is it possible to reduce or remove the first time played lag on Android?
Here is the code I'm using
$(document).ready(function() {
soundManager.setup({
url: 'www.mysite.com/swf/',
preferFlash: false,
onready: function() {
soundManager.setup({
defaultOptions: {
autoLoad: true,
autoPlay: false
}
});
soundManager.createSound({
id: 'mysound',
url: 'www.mysite.com/sounds/mysound.mp3',
volume: 50
});
}
});
$(document).on("click",".wrapper",function(e){
soundManager.play('mysound');
}
}
I've tried manually loading the sound like this
var preload = soundManager.createSound({
id: 'mysound',
url: 'www.mysite.com/sounds/mysound.mp3',
volume: 50
});
preload.load();
But that made no difference!
Anybody had this working without a lag on Android?

I believe the problem is to do with android's policy of only allowing sound to play in response to a user input.
eg: Autoplay audio on mobile safari
This is a limitation in mobile browsers.
the reason you have lag is from the fact that the sound has to load the first time you click. Your preloading does not work, as it is not run in response to user input, and is therefore blocked.
A solution would be to implement a welcome screen that loads the sound upon hitting an 'enter' button, as the top comment of the above link describes.
If you only need this to work on one browser you can navigate to
chrome://flags/#disable-gesture-requirement-for-media-playback
on your android phone and click Enable

Android HTML5 Video in Fullscreen Mode

I'm trying to get my video stream to work on android in fullscreen mode. For iOS I use a native <video> tag, which works perfectly.
I can play the video on my android, but I don't have a fullscreen button. I also tried to create a own template for the android devices and simply set the width and height of the player to the window size (Fake Fullscreen). The problem I have here is, that when I rotate the device, the resize doesn't work correctly, so that i can scroll over the video.
Heres what I tried:
$(document).ready(function() {
$(window).on('resize orientationchange', function() {
$('#myPlayer').width( $(window).width() ).height( $(window).height() );
});
}
Can anyone help me to get this to work on Android?
I hope you can understand my question, my english isn't that good ...

HTML5 video full screen on mobile browsers (android)
seems the same question.
The events you need are: webkitbeginfullscreen (enter fullscreen) and webkitendfullscreen (exit fullscreen)
var player = document.getElementsByTagName("video")[0];
player.addEventListener('webkitbeginfullscreen', onVideoBeginsFullScreen, false);
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);

Sound playing and forward swiping animation flickering problem in android phonegap and jqtouch?

I am developing an app using phonegap for android. It consists of around 25 images and similar number of mp3 files. Each mp3 file has duration not more than 10 seconds. The requirement of app is whenever a image is shown on screen its related mp3 file should be played. I am using jqtouch swipe action to move from one page to another. I am facing following problems both on emulator and real device(samsung galaxy 3)-
After 15-20 images sound stops playing both on emulator and galaxy 3. In logcat I got following error
ERROR/AudioFlinger(34): not enough memory for AudioTrack size=49216
I am using following code to play mp3 files
if(mp3file!=null){
mp3file.stop();
mp3file = null;
}
mp3file = new Media("/android_asset/www/name_of_file.mp3",
function() {
console.log("playAudio():Audio Success");
},
function(err) {
},
function(status) {
});
mp3file.play();
I think error is due to audiomanager objects from phonegap api of each mp3 file remaining in memory.
I want to know how to destroy media object created in javascript. You can play, stop, pause. But is there any method in phonegap for android to destroy it so that it does not remain in memory after it has done playing.
Another problem that I am facing is related with left swipe action in jqtouch to view next image. If I am currently viewing image1 and if I try to view image2 by left swipe action, image2 is shown for short amount of time and after that image1 is shown for a moment and after that again image2 is shown. In short the transition from image1 to
image2 is not smooth and it has flickering effects. However if i go from image2 to image1 using right swipe transition is smooth.
Thanks

I got some help with another developer on this.The trick is to make a function declare mp3file outside the function then call stopRecord() on it.(even though you're not doing recording).I tested this with a simple button playing the sound over and over and it worked 75 times before I got tired of playing with it.
Let me know it works for you.
var mp3file;
function playAudio(){
if(mp3file!=null){
mp3file.stop();
mp3file.stopRecord();
mp3file=null;
}
mp3file = new Media("/android_asset/www/yourmp3.mp3",
function() {
console.log("playAudio():Audio Success");
},
function(err) {
},
function(status) {
});
mp3file.play();
}