Develop Reference

RTSP player on Android devices

I am new in the world of programming android app. I am trying to make an android app that let me view an RTSP video stream of my Reolink E1 Pro camera. Then I will add more features that are not related to RTSP video so they are not important. I have tried both VLClib and Exoplayer. At the moment I am using Exoplayer as RTSP player and when I test the app with the Android Studio emulator, all the devices that I test, run the app with no problem. When I connect my real smartphone to the PC and try to run the application, everything is fine except for the fact that the stream doesn't start and therefore the result is the black screen in the Exoplayer player. In reality the screen does not remain black but presents a gif which is loaded as long as the video buffers but it will never end to buffer. The gif is only an ImageView placed on the Exoplayer player that is visible only during buffering time. The RTSP stream is a black screen during this period. Very very rarely, after infinite attempts with the same code, the stream starts but it is a set of distorted pixels that cannot even compose a correct frame. it's not a problem related to the RTSP stream because if I use the VLC app on my smartphone, I can see the stream perfectly without any problems always at the first try. Also using the Reolink app I can see perfectly the stream. When I try to use my app with my smartphone, in the Logcat of Android Studio, I can see an infinite succession of lines that say from RtpH264Reader: Received RTP packet with unexpected sequence number. Expected: 61465; received: 61531. Dropping packet.. The number change in all the lines. It's not the same number repeated.
This is the java code I am using:
Home.java
package fexaquarium.sytes.net;
import static android.view.View.GONE;
import static android.view.View.VISIBLE;
import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.net.Uri;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import com.bumptech.glide.Glide;
import com.google.android.exoplayer2.ExoPlayer;
import com.google.android.exoplayer2.MediaItem;
import com.google.android.exoplayer2.Player;
import com.google.android.exoplayer2.source.MediaSource;
import com.google.android.exoplayer2.source.rtsp.RtspMediaSource;
import com.google.android.exoplayer2.ui.AspectRatioFrameLayout;
import com.google.android.exoplayer2.ui.StyledPlayerView;
public class Home extends AppCompatActivity {
private ExoPlayer player;
private StyledPlayerView styledPlayerView;
private MediaSource source;
private ImageView fullscreenButton;
private ImageView playButton;
private ImageView bufferingGif;
private boolean fullscreen = false;
private boolean playing = false;
private LinearLayout linearLayout;
private boolean isLoggedIn;
#SuppressLint("AuthLeak") private final String url = "rtsp://user:password#myRTSPlink:port";
#SuppressLint("SourceLockedOrientationActivity")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (RememberUser.getUserName(Home.this).length() == 0) {
Intent login = new Intent(Home.this, Login.class);
startActivity(login);
} else {
isLoggedIn = true;
}
setContentView(R.layout.home);
//Binding elements
styledPlayerView = findViewById(R.id.styledVideoView);
fullscreenButton = styledPlayerView.findViewById(R.id.exo_fullscreen_icon);
playButton = styledPlayerView.findViewById(R.id.playButton);
bufferingGif = findViewById(R.id.bufferingGif);
linearLayout = findViewById(R.id.linearLayout);
//Setting RTSP video height
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int videoWidth = metrics.widthPixels;
int videoHeight = (int)((float) videoWidth * 1440 / 2560);
styledPlayerView.getLayoutParams().width = videoWidth;
styledPlayerView.getLayoutParams().height = videoHeight;
styledPlayerView.requestLayout();
player = new ExoPlayer.Builder(this).build();
//Toggle fullscreen
fullscreenButton.setOnClickListener(view -> {
if(fullscreen) {
fullscreenButton.setImageDrawable(ContextCompat.getDrawable(Home.this, R.drawable.ic_fullscreen));
styledPlayerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FIT);
styledPlayerView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
if(getSupportActionBar() != null){
getSupportActionBar().show();
}
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) styledPlayerView.getLayoutParams();
params.width = ViewGroup.LayoutParams.MATCH_PARENT;
params.height = videoHeight;
styledPlayerView.setLayoutParams(params);
linearLayout.setVisibility(VISIBLE);
fullscreen = false;
} else {
fullscreenButton.setImageDrawable(ContextCompat.getDrawable(Home.this, R.drawable.ic_fullscreen_exit));
styledPlayerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FIXED_WIDTH);
styledPlayerView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) styledPlayerView.getLayoutParams();
params.width = ViewGroup.LayoutParams.MATCH_PARENT;
params.height = ViewGroup.LayoutParams.MATCH_PARENT;
styledPlayerView.setLayoutParams(params);
linearLayout.setVisibility(GONE);
fullscreen = true;
}
});
//Toggle play/pause
playButton.setOnClickListener(view -> {
if(playing) {
playButton.setImageDrawable(ContextCompat.getDrawable(Home.this, R.drawable.ic_play));
player.setPlayWhenReady(false);
playing = false;
} else {
playButton.setImageDrawable(ContextCompat.getDrawable(Home.this, R.drawable.ic_pause));
player.setPlayWhenReady(true);
playing = true;
}
});
//Buffering
player.addListener(new Player.Listener() {
#SuppressLint("SwitchIntDef")
#Override
public void onPlaybackStateChanged(int playbackState) {
Player.Listener.super.onPlaybackStateChanged(playbackState);
switch (playbackState) {
case Player.STATE_BUFFERING:
bufferingGif.setVisibility(View.VISIBLE);
Glide.with(getApplicationContext()).asGif().load(R.drawable.buffering).into(bufferingGif);
break;
case Player.STATE_READY:
bufferingGif.setVisibility(View.INVISIBLE);
Glide.with(getApplicationContext()).clear(bufferingGif);
break;
}
}
});
Uri uri = Uri.parse(url);
source = new RtspMediaSource.Factory().createMediaSource(MediaItem.fromUri(uri));
player.setMediaSource(source);
player.setVolume(0);
styledPlayerView.setPlayer(player);
player.prepare();
}
#Override
public void onPause() {
super.onPause();
player.setPlayWhenReady(false);
}
#Override
public void onDestroy() {
super.onDestroy();
player.release();
}
#Override
public void onBackPressed() {
if (isLoggedIn) {
finishAffinity();
} else {
super.onBackPressed();
}
}
}
This is my layout:
home.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.078">
<com.google.android.exoplayer2.ui.StyledPlayerView
android:id="#+id/styledVideoView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:fitsSystemWindows="true"
app:controller_layout_id="#layout/exo_controls"
app:resize_mode="fill">
<ImageView
android:id="#+id/bufferingGif"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:src="#drawable/buffering"
android:visibility="invisible"
tools:ignore="ContentDescription" />
</com.google.android.exoplayer2.ui.StyledPlayerView>
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.994" >
<ImageView
android:id="#+id/btnHome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_home"
android:layout_gravity="center"
android:layout_weight="0.1"
android:background="#drawable/btn_pressed"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/btnMeasure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_measurements"
android:layout_gravity="center"
android:layout_weight="0.1"
android:background="#drawable/btn_pressed"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/btnSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_settings"
android:layout_gravity="center"
android:layout_weight="0.1"
android:background="#drawable/btn_pressed"
tools:ignore="ContentDescription" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
In the AndroidManifest.xml I set <uses-permission android:name="android.permission.INTERNET" />.
In the exo_controls.xml file, I have a simple RelativeLayout with the play/pause button and the fullscreen button.
There are definitely errors in my code since I don't know well neither android nor java. In any case, on the Android studio emulator I can get the app to work without problems but on my mobile I just can't. I discovered that it happens only when I use a remote connection. I wish I could see my RTSP streaming as smoothly as if I was using VLC or the Reolink app from a remote internet connection like my mobile phone connection. In my modem I opened the right port of the camera and I am using a free DDNS (No-Ip). I hope someone can help me because I searched on the internet but I can't find solutions to my problem and I would love to complete this little project.

Using remote config from firebase to change URL of videoView

What I need is: Change the URL of the video view whenever I change the remote config parameters!
I'm making a tv channel app using video view.
   to show the TV channels if the format of the url .m3u8 is used, but this link changes daily so IMPOSSIVEL I stay updating my application every day that change this link .... so I discovered (actually I remembered) that in firebase there is a option "remote config" that it is possible to change these links ...
   
  What do I want anyway? How can I do this by using the remote config
package tk.protvapp.protv;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.MediaController;
import android.widget.VideoView;
public class FoxActivity extends Activity {
VideoView myVideoView;
View v;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_fox);
myVideoView = (VideoView)this.findViewById(R.id.videofox1); MediaController mc = new MediaController(this); myVideoView.setMediaController(mc);
final String urlStream = "//Search the link in remote config for paste here";
myVideoView.start();
myVideoView.findFocus();
runOnUiThread(new Runnable() { #Override public void run() { myVideoView.setVideoURI(Uri.parse(urlStream)); } });
}
public void voltarhomefox(View v){
Intent intent = new Intent(FoxActivity.this, HomeActivity.class);
startActivity(intent);
}
}
My layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context="tk.protvapp.protv.FoxActivity">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="voltarhomefox"
android:text="VOLTAR" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/frameLayout">
<VideoView
android:id="#+id/videofox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</RelativeLayout>

How to use Firebase Remote Config for this?

How can I change whenever I need the Videoview URL using the Google Firebase Remote config method?
More details: I have a VideoView that uses URL to show video or stream but I want to be able to change these links whenever I need. Without having to create a new application update!
My activity:
package tk.protvapp.protv;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.MediaController;
import android.widget.VideoView;
public class FoxActivity extends Activity {
VideoView myVideoView;
View v;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_fox);
myVideoView = (VideoView)this.findViewById(R.id.videofox1); MediaController mc = new MediaController(this); myVideoView.setMediaController(mc);
final String urlStream = "//Search the link in remote config for paste here";
myVideoView.start();
myVideoView.findFocus();
runOnUiThread(new Runnable() { #Override public void run() { myVideoView.setVideoURI(Uri.parse(urlStream)); } });
}
public void voltarhomefox(View v){
Intent intent = new Intent(FoxActivity.this, HomeActivity.class);
startActivity(intent);
}
}
My Layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context="tk.protvapp.protv.FoxActivity">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="voltarhomefox"
android:text="VOLTAR" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/frameLayout">
<VideoView
android:id="#+id/videofox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
</RelativeLayout>

You can define a key in Remote Config Dashboard
video_url = "https://foo.com/video.mp4"
and fetch the value of video_url from your code using the getString("video_url") method.

Play mp4 video from url

I am using VideoView to play video from url. When I run app it gives error Can't play this video with below msg in logcat
Couldn't open file on client side; trying server side:java.io.FileNotFoundException: No content provider:aklearningsolutions.com/video/Nursery%20Rhymes.mp4
Unable to open content: aklearningsolutions.com/video/Nursery%20Rhymes.mp4
java.io.IOException: setDataSource failed.
at android.media.MediaPlayer.setDataSource(MediaPlayer.java:1095)
at android.media.MediaPlayer.setDataSource(MediaPlayer.java:1069)
at android.media.MediaPlayer.setDataSource(MediaPlayer.java:1023)
below is my activity file
package com.dp.videostore.Activity;
import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.TextureView;
import android.widget.MediaController;
import android.widget.VideoView;
import com.dp.videostore.R;
public class PlayerActivity extends AppCompatActivity {
VideoView videoView;
String url = "aklearningsolutions.com/video/Nursery Rhymes.mp4";
MediaController mc;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_player);
videoView = (VideoView)findViewById(R.id.video_view);
try {
mc = new MediaController(this);
mc.setAnchorView(videoView);
mc.setMediaPlayer(videoView);
videoView.setMediaController(mc);
Uri link = Uri.parse(url.replace(" ","%20"));
videoView.setVideoURI(link);
videoView.requestFocus();
videoView.start();
} catch (Exception e) {
e.printStackTrace();
}
}
}
Below is my xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.dp.videostore.Activity.PlayerActivity">
<VideoView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/video_view"/>
</RelativeLayout>
When i hit video link in web browser, video play very well in browser

Try putting the protocol into your URL. As it is, Android thinks you are using a ContentProvider
String url = "http://aklearningsolutions.com/video/Nursery Rhymes.mp4";

Video Player not Working

I have create a method for playing a video in a video player and called that method on a button click, but whenever I was click on the button then the activity page blink for a half second but the player wasn't appear on the screen. Plz help me Is there neccessary to create view or a layout for a video player for playing a video in xml file. I havn't create this.
import android.app.Activity;
import android.content.Intent;
import android.graphics.PixelFormat;
import android.net.Uri;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.MediaController;
import android.widget.VideoView;
public class OptionsmenuAct extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final Button play =(Button)findViewById(R.id.video);
Equity.setOnClickListener(new OnClickListener(){
public void onClick(View V){
videoPlayer("/Optionsmenu/assets/lic.3gp","lic",true);
}
});}
public void videoPlayer(String path, String fileName,boolean autoplay){
getWindow().setFormat(PixelFormat.TRANSLUCENT);
VideoView videoHolder = new VideoView(this);
videoHolder.setMediaController(new MediaController(this));
videoHolder.setVideoURI(Uri.parse(path+"/"+fileName));
videoHolder.requestFocus();
videoHolder.start();
if(autoplay){
videoHolder.start();
}
}
}
Plz tell me how's it will worked.
I have store my video file into assets folder.

You can use VideoView. See example of usage here.
Adding VideoView to layout XML file is as any other component, for example (taken from android site):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<VideoView
android:id="#+id/surface_view"
android:layout_width="320px"
android:layout_height="240px"
/>
</LinearLayout>