title: Why are the videos in my Video Recorder Android App looking distorted?
body: <p>I am creating an Android App that allows users to record a video (.mp4) with their device camera. I have created a custom video recorder (using SurfaceHolder and MediaRecorder) so the Camera app (that comes pre-installed with all Android devices) will not be used.</p>
  <p>Below is the Java code for the video recording activity (with comments). If you want to see the XML code, let me know.</p>
  <pre><code>package com.myname02.mediarecorderplayer;
  
  import androidx.appcompat.app.AppCompatActivity;
  
  import android.content.ContentValues;
  import android.content.Intent;
  import android.media.MediaRecorder;
  import android.net.Uri;
  import android.os.Bundle;
  import android.os.Environment;
  import android.provider.MediaStore;
  import android.util.Log;
  import android.view.SurfaceHolder;
  import android.view.SurfaceView;
  import android.view.View;
  import android.widget.FrameLayout;
  import android.widget.ImageButton;
  import android.widget.Toast;
  
  import java.text.SimpleDateFormat;
  import java.util.Date;
  //Video recorder activity
  public class video extends AppCompatActivity {
      MediaRecorder recorder;
      boolean rec;
      ImageButton imageButton;
      String RECORDED_FILE;
      SurfaceView surface;
      SurfaceHolder holder;
      //This method initializes different variables created above for buttons,
      //the MediaRecorder object, the SurfaceView and SurfaceHolder objects which is where
      //live camera output will be shown
      //The rec variable, which will determine whether or not a video is being recorded,
      //is also initialized to false
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_video);
          setTitle(&quot;Video Recorder&quot;);
          surface  = new SurfaceView(this);
          holder = surface.getHolder();
          holder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
          rec = false;
          FrameLayout frame = (FrameLayout) findViewById(R.id.videoLayout);
          frame.addView(surface);
          imageButton = (ImageButton) findViewById(R.id.record);
      }
      //This method either starts recording a video, or stops recording one, depending on the value of rec
      public void doRecord(View view) {
          rec = !rec;
          //If rec is true, which means the user wants to start recording
          if(rec) {
              //Change the record button to a stop button so that the user can stop the recording when finished
              imageButton.setImageResource(R.drawable.stop);
              //If the MediaRecorder object instance hasn't been initialized, initialize it
              if(recorder == null) {
                  recorder = new MediaRecorder();
              }
              //Set the audio and video source, output format, audio and video encoder,
              // and set the preview display as the SurfaceHolder
              recorder.setAudioSource(MediaRecorder.AudioSource.MIC);
              recorder.setVideoSource(MediaRecorder.VideoSource.CAMERA);
              recorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4);
              recorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);
              recorder.setVideoEncoder(MediaRecorder.VideoEncoder.MPEG_4_SP);
              recorder.setPreviewDisplay(holder.getSurface());
              //Get the current date and time and set that as the file name
              SimpleDateFormat timeStampFormat = new SimpleDateFormat(&quot;MM-dd-yy HH-mm-ss zzz&quot;);
              Date GetDate = new Date();
              String date = timeStampFormat.format(GetDate);
              //Store the  finished file in the MediaPlayer folder
              RECORDED_FILE = Environment.getExternalStorageDirectory() + &quot;/MediaPlayer/&quot; + date + &quot;.mp4&quot;;
              recorder.setPreviewDisplay(holder.getSurface());
              recorder.setOutputFile(RECORDED_FILE);
              //Start the recording with the MediaRecorder object instance,
              // or release the MediaRecorder instance and set it to null if the recording could not start successfully
              try {
                  recorder.prepare();
                  recorder.start();
              } catch (Exception e) {
                  Log.e(&quot;Video Recorder&quot;, &quot;Exception: &quot;, e);
                  recorder.release();
                  recorder = null;
              }
              //Display a message to state that the recording started
              Toast.makeText(getApplicationContext(),&quot;Recording started!&quot;, Toast.LENGTH_SHORT).show();
          }
          //If the user stops the recording
          else {
              //Show the record button instead of the stop button so that the user can start a new recording if they wish
              imageButton.setImageResource(R.drawable.record);
              if(recorder == null) {
                  return;
              }
              //Stop the MediaRecorder instance, reset it, release it, and set it to null so a new instance can be made
              //later for future recordings
              recorder.stop();
              recorder.reset();
              recorder.release();
              recorder = null;
              //Update the ContentValues object instance with information about the recording
              //These values are mostly a formality and do not affect the video experience, hence why
              //they are hardcoded to a large extent
              ContentValues values = new ContentValues(10);
              values.put(MediaStore.MediaColumns.TITLE, &quot;RecordedVideo&quot;);
              values.put(MediaStore.Audio.Media.ALBUM, &quot;Video Album&quot;);
              values.put(MediaStore.Audio.Media.ARTIST, &quot;Person&quot;);
              values.put(MediaStore.Audio.Media.DISPLAY_NAME, &quot;Recorded Video&quot;);
              values.put(MediaStore.Audio.Media.IS_RINGTONE, 1);
              values.put(MediaStore.Audio.Media.IS_MUSIC, 1);
              values.put(MediaStore.MediaColumns.DATE_ADDED,  System.currentTimeMillis()/1000);
              values.put(MediaStore.MediaColumns.MIME_TYPE, &quot;video/mp4&quot;);
              values.put(MediaStore.Audio.Media.DATA, RECORDED_FILE);
              Uri videoUri = getContentResolver().insert(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, values);
              if(videoUri == null) {
                  Log.d(&quot;SampleVideoRecorder&quot;, &quot;Video insert failed.&quot;);
                  return;
              }
              //Send these values to the Mediastore database, which contains details about different files on any
              //storage devices that are attached to the device
              sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, videoUri));
              //Send a message that says the video was saved
              Toast.makeText(getApplicationContext(),&quot;Video saved!&quot;, Toast.LENGTH_SHORT).show();
          }
      }
      //When the back button is pressed, this method will take the user back to the home page
      public void goHome(View view) {
          finish();
      }
  }
  </code></pre>
  <p>Below is a photo of the video output (the same poor quality is shown both in the Video Player of my app and when the video is played from the Files app).</p>
  <p><a href="https://i.stack.imgur.com/7EhEH.jpg" rel="nofollow noreferrer">Video Output</a></p>
  <p>My laptop gets slow and sometimes freezes when I try and take a screenshot from my laptop while Android Studio is running, so I took a picture from my phone.</p>
  <p>As you can see, there are a bunch of different green and purple bars and you can barely see me. While I was recording the video from my app, I could see myself clearly in the SurfaceView box. It was only after I stopped recording and the video saved that the video became distorted as shown in the photo above. I tried using the emulated view instead of my webcam (since I am using an emulator), thinking that maybe the problem was with my webcam and not the app. But I still got a similar result to the photo above.</p>
  <p>Does anyone know what the problem could be and why the video output is so poor?</p>