录制视频UI别离

我正在参与「启航计划」

前言

Android 开发常见的录制视频的逻辑，往常咱们用的最多的便是直接跳转到体系的视频 App 里面。让体系帮咱们录制，这肯定是最便利作用最好的。

可是有些情况下咱们就被需求约束了，例如需求双端统一UI，例如有些兼容性问题导致时长无法最大约束，有些时分咱们难免就需求自界说录制视频的逻辑。

而网上一些的资源大多都是一些老的项目，页面与 Camera 逻辑耦合了，例如有的项目用的Camera1，有的用的Camera2, 有的用的之前的谷歌兼容库 CameraView 之类的，后面出了 CameraX 又怎么与咱们的录制视频页面绑定呢？又要重写一套，相对比较复杂。

所以就需求把 UI 与 Camera 逻辑别离出来，本文的 UI 作用是基于老版的微信录制页面仿制的

作用如下：

gif图片太大传不上来，咱们应该能理解这样的作用，和微信比较类似。

分化之后咱们需求做的步骤就分录制的按钮制作与动画，集成整个控件与Camera的封装控件，录制结束之后的播映逻辑。

接下来咱们一步步的往下走。

一、录制按钮

咱们的录制按钮其实便是分为一个外圈，一个内圈，一个进展圆环三个东西。

默许的状况外圈与内圈相差5个dp,咱们能够把全体的布局先测量并制作出来：

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (measuredWidth == -1) {
            measuredWidth = getMeasuredWidth();
            radius1 = measuredWidth * zoom / 2;
            radius2 = measuredWidth * zoom / 2 - dp5;
            oval.left = dp5 / 2;
            oval.top = dp5 / 2;
            oval.right = measuredWidth - dp5 / 2;
            oval.bottom = measuredWidth - dp5 / 2;
        }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        //制作外圈
        paint.setColor(colorGray);
        canvas.drawCircle(measuredWidth / 2, measuredWidth / 2, radius1, paint);
        //制作内圈
        paint.setColor(Color.WHITE);
        canvas.drawCircle(measuredWidth / 2, measuredWidth / 2, radius2, paint);
        //制作进展
        canvas.drawArc(oval, 270, girthPro, false, paintProgress);
    }

要点便是咱们点击按钮的时分有扩大的逻辑，结束录制有缩小的逻辑。所以咱们需求界说动画，在动画的回调中依据缩放的值动态的设置外圈与内圈的两个 radius 。

 public void startAnim(float start, float end) {
        if (buttonAnim == null || !buttonAnim.isRunning()) {
            buttonAnim = ValueAnimator.ofFloat(start, end).setDuration(animTime);
            buttonAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float value = (float) animation.getAnimatedValue();
                    radius1 = measuredWidth * (zoom + value) / 2;
                    radius2 = measuredWidth * (zoom - value) / 2 - dp5;
                    value = 1 - zoom - value;
                    oval.left = measuredWidth * value / 2 + dp5 / 2;
                    oval.top = measuredWidth * value / 2 + dp5 / 2;
                    oval.right = measuredWidth * (1 - value / 2) - dp5 / 2;
                    oval.bottom = measuredWidth * (1 - value / 2) - dp5 / 2;
                    invalidate();
                }
            });
            buttonAnim.start();
        }
    }

对于进展的制作，咱们是经过 setProgress 动态的设置当时的进展值，然后经过改写结束进展的展现。

    public void setProgress(float progress) {
        this.progress = progress;
        float ratio = progress / max;
        girthPro = 365 * ratio;
        postInvalidate();
    }

它自己自身是不做动画与页面逻辑的，仅仅提供了方法供对方调用，因为咱们之前温习过自界说 View 的制作，所以这儿代码逻辑并不复杂，悉数代码如下：

public class RecordedButton extends View {
    private int measuredWidth = -1;
    private Paint paint;
    private int colorGray;
    private float radius1;
    private float radius2;
    private float zoom = 0.8f; //初始化缩放比例
    private int dp5;
    private Paint paintProgress;
    private int colorBlue;
    /**
     * 当时进展 以视点为单位
     */
    private float girthPro;
    private RectF oval;
    private int max;
    private int animTime = 400;   //动画履行的时刻
    private Paint paintSplit;
    private boolean isDeleteMode;
    private Paint paintDelete;
    private ValueAnimator buttonAnim;
    private float progress;
    public RecordedButton(Context context) {
        super(context);
        init();
    }
    public RecordedButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public RecordedButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init() {
        dp5 = (int) getResources().getDimension(R.dimen.d_5dp);
        colorGray = getResources().getColor(R.color.gray);
        colorBlue = getResources().getColor(R.color.picture_color_blue);
        paint = new Paint();
        paint.setAntiAlias(true);
        paintProgress = new Paint();
        paintProgress.setAntiAlias(true);
        paintProgress.setColor(colorBlue);
        paintProgress.setStrokeWidth(dp5);
        paintProgress.setStyle(Paint.Style.STROKE);
        paintSplit = new Paint();
        paintSplit.setAntiAlias(true);
        paintSplit.setColor(Color.WHITE);
        paintSplit.setStrokeWidth(dp5);
        paintSplit.setStyle(Paint.Style.STROKE);
        paintDelete = new Paint();
        paintDelete.setAntiAlias(true);
        paintDelete.setColor(Color.RED);
        paintDelete.setStrokeWidth(dp5);
        paintDelete.setStyle(Paint.Style.STROKE);
        //设置制作巨细
        oval = new RectF();
    }
    /**
     * 开端动画，按钮的打开和缩回
     */
    public void startAnim(float start, float end) {
        if (buttonAnim == null || !buttonAnim.isRunning()) {
            buttonAnim = ValueAnimator.ofFloat(start, end).setDuration(animTime);
            buttonAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float value = (float) animation.getAnimatedValue();
                    radius1 = measuredWidth * (zoom + value) / 2;
                    radius2 = measuredWidth * (zoom - value) / 2 - dp5;
                    value = 1 - zoom - value;
                    oval.left = measuredWidth * value / 2 + dp5 / 2;
                    oval.top = measuredWidth * value / 2 + dp5 / 2;
                    oval.right = measuredWidth * (1 - value / 2) - dp5 / 2;
                    oval.bottom = measuredWidth * (1 - value / 2) - dp5 / 2;
                    invalidate();
                }
            });
            buttonAnim.start();
        }
    }
    /**
     * 设置最大进展
     */
    public void setMax(int max) {
        this.max = max;
    }
    /**
     * 设置进展
     */
    public void setProgress(float progress) {
        this.progress = progress;
        float ratio = progress / max;
        girthPro = 365 * ratio;
        postInvalidate();
    }
    /**
     * 清除残留的进展
     */
    public void clearProgress() {
        setProgress(0);
    }
    /**
     * 获取到当时按钮的动画
     */
    public ValueAnimator getButtonAnim() {
        return buttonAnim;
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (measuredWidth == -1) {
            measuredWidth = getMeasuredWidth();
            radius1 = measuredWidth * zoom / 2;
            radius2 = measuredWidth * zoom / 2 - dp5;
            oval.left = dp5 / 2;
            oval.top = dp5 / 2;
            oval.right = measuredWidth - dp5 / 2;
            oval.bottom = measuredWidth - dp5 / 2;
        }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        //制作外圈
        paint.setColor(colorGray);
        canvas.drawCircle(measuredWidth / 2, measuredWidth / 2, radius1, paint);
        //制作内圈
        paint.setColor(Color.WHITE);
        canvas.drawCircle(measuredWidth / 2, measuredWidth / 2, radius2, paint);
        //制作进展
        canvas.drawArc(oval, 270, girthPro, false, paintProgress);
    }
}

其中的一些特点都是固定的，后期咱们也能够抽取出来作为可装备选项。

二、自界说View封装

对一些录制状况的判别，录制页面的展现，录制按钮的操控等逻辑，咱们统一封装到一个独自的 View 中

咱们大致界说的布局如下：

预览的布局如下：

在一个录制的页面咱们分为几种状况，录制前，录制中，录制后。

录制前，咱们要隐藏显现对应的布局，初始化各种资源，对录制按钮做监听

录制中，咱们经过倒计时，经过定时改写的操作来调用 Camera 来录制，手动的结束录制或许抵达最大录制时长，就走到录制后逻辑。

录制后，咱们需求隐藏显现对应布局，预览已录制的视频，并开释摄像头与录制的资源。

录制前：

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RecorderVideoView, defStyle, 0);
        int mWidth = a.getInteger(R.styleable.RecorderVideoView_record_width, 320);// 默许320
        int mHeight = a.getInteger(R.styleable.RecorderVideoView_record_height, 240);// 默许240
        mRecordMaxTime = a.getInteger(R.styleable.RecorderVideoView_record_max_time, 10);// 默许为10秒
        a.recycle();
        //todo 设置自界说特点给CameraAction
        mCameraAction.setupCustomParams(mWidth, mHeight, mRecordMaxTime);
        /*
         * 自界说录像控件填充自界说的布局
         */
        LayoutInflater.from(context).inflate(R.layout.recorder_video_view, this);
        //找到其他的控件
        mVideoPlay = (MyVideoView) findViewById(R.id.vv_play);
        mRlbottom = (RelativeLayout) findViewById(R.id.rl_bottom);
        mIvfinish = (ImageView) findViewById(R.id.iv_finish);
        mIvclose = (ImageView) findViewById(R.id.iv_close);
        mShootBtn = (RecordedButton) findViewById(R.id.shoot_button);
        ViewGroup flCameraContrainer = findViewById(R.id.fl_camera_contrainer);
        // 初始化并添加Camera载体
        flCameraContrainer.addView(mCameraAction.initCamera(getContext()));
        createRecordDir();
        initListener();

然后咱们需求对事情做监听，结束录制的逻辑：

    private void initListener() {
        mShootBtn.setMax(mRecordMaxTime);
        mShootBtn.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    mShootBtn.startAnim(0, 0.2f);
                    mCurProgress = 0.5f;
                    startRecord(new RecorderVideoView.OnRecordFinishListener() {
                        @Override
                        public void onRecordFinish() {
                            mHandler.sendEmptyMessage(1);
                        }
                    });
                } else if (event.getAction() == MotionEvent.ACTION_UP) {
                    if (getTimeCount() > 1)
                        mHandler.sendEmptyMessage(1);
                    else {
                        /* 录制时刻小于1秒 录制失败 而且删去保存的文件  */
                        if (getVecordFile() != null) {
                            getVecordFile().delete();
                        }
                        mHandler.postDelayed(new Runnable() {
                            @Override
                            public void run() {
                                mShootBtn.startAnim(0.2f, 0);
                            }
                        }, 400);
                        stop();
                        Toast.makeText(getContext(), "视频录制时刻太短", Toast.LENGTH_SHORT).show();
                    }
                }
                return true;
            }
        });
        /*  点击取消 康复控件显现状况 删去文件 */
        mIvclose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVideoPlay.stop();
                clearWindow();
                mShootBtn.clearProgress();
                mVideoPlay.setVisibility(View.GONE);
                mCameraAction.isShowCameraView(true);
                mRlbottom.setVisibility(View.GONE);
                mShootBtn.setVisibility(View.VISIBLE);
                getVecordFile().delete();
            }
        });
        /*  点击确认 录制结束 能够挑选发送或许到另一个界面看视频 */
        mIvfinish.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(), "录制结束,视频保存的地址：" + getVecordFile().toString(), Toast.LENGTH_SHORT).show();
                if (mCompleteListener != null) {
                    mCompleteListener.onComplete();
                }
            }
        });
    }

录制中：

首要咱们界说一个 Handler 去触发状况，而且履行定时的一些操作：

 private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == 1) {
                finishRecode();
            } else if (msg.what == 2) {
                mCurProgress += 0.016;
                mShootBtn.setProgress(mCurProgress);
                mHandler.sendEmptyMessageDelayed(2, 16);
            } else if (msg.what == 100) {
                //履行倒计时，计算已录制的时刻
                mTimeCount++;
                if (mTimeCount >= mRecordMaxTime) {  // 抵达指定时刻，中止拍照
                    mShootBtn.setProgress(mRecordMaxTime);
                    stop();
                    if (mOnRecordFinishListener != null) {
                        mOnRecordFinishListener.onRecordFinish();
                    }
                } else {
                    mHandler.sendEmptyMessageDelayed(100, 1000);
                }
            }
        }
    };

当咱们开端录制的时分，调用 CameraAction接口 去录制视频，而且切换状况与开端倒计时：

    public void startRecord(final OnRecordFinishListener onRecordFinishListener) {
        //设置监听
        this.mOnRecordFinishListener = onRecordFinishListener;
        //动画履行
        mHandler.sendEmptyMessage(2);
        // 录制时刻记载
        mTimeCount = 0;
        mHandler.sendEmptyMessageDelayed(100, 1000);
        //  CameraAction调用录制
        mCameraAction.startCameraRecord();
    }

此时就会回调到 setProgress 设置进展了。

录制后：

当咱们手动的抬起手指，或许抵达录制时刻，咱们切换为录制后的状况。 展现隐藏布局，而且开释资源。

    private void finishRecode() {
        stop();
        /*  录制结束显现 操控控件的显现和隐藏  */
        mVideoPlay.setVisibility(View.VISIBLE);
        // todo CameraAction是否展现预览页面
        mCameraAction.isShowCameraView(false);
        mRlbottom.setVisibility(View.VISIBLE);
        mShootBtn.startAnim(0.2f, 0);
        ValueAnimator anim = mShootBtn.getButtonAnim();
        if (anim != null && anim.isRunning()) {
            anim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    mShootBtn.setVisibility(View.GONE);
                }
            });
        }
        //录制结束之后展现现已录制的路径下的视频文件
        mVideoPlay.setVideoPath(getVecordFile().toString());
        mVideoPlay.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
            @Override
            public void onPrepared(MediaPlayer mp) {
                mVideoPlay.setLooping(true);
                mVideoPlay.start();
            }
        });
        if (mVideoPlay.isPrepared()) {
            mVideoPlay.setLooping(true);
            mVideoPlay.start();
        }
    }

开释的资源的操作：

    /**
     * 中止拍照
     */
    public void stop() {
        mHandler.removeMessages(2);
        mHandler.removeMessages(100);
        mShootBtn.setProgress(0);
        stopRecord();
        releaseRecord();
        //todo CameraAction开释摄像头资源
        mCameraAction.releaseCamera();
    }
    /**
     * 中止录制
     */
    public void stopRecord() {
        //todo CameraAction录制的相关操控
        mCameraAction.stopCameraRecord();
    }
    /**
     * 开释资源
     */
    private void releaseRecord() {
        //todo CameraAction录制的相关操控
        mCameraAction.releaseCameraRecord();
    }
    /**
     * 销毁悉数的资源
     */
    public void destoryAll() {
        mShootBtn.clearProgress();
        mHandler.removeCallbacksAndMessages(null);
    }

这样就结束了录制视频的UI逻辑，而详细的 Camera 的操作，咱们能够经过接口的方法运用不同的策略来运用不同的 Camera API，例如我是运用的过时的 Camera1的Api。

interface ICameraAction {
    void setupCustomParams(int width ,int height  ,int recordMaxTime);
    void setOutFile(File file);
    File getOutFile();
    View initCamera(Context context);
    void initCameraRecord();
    void startCameraRecord();
    void stopCameraRecord();
    void releaseCameraRecord();
    void releaseCamera();
    void clearWindow();
    void isShowCameraView(boolean isVisible);
}

Camera1 的大致结束：

public class Camera1ActionImpl implements ICameraAction {
    @Override
    public View initCamera(Context context) {
        mSurfaceView = new SurfaceView(context);
        mSurfaceView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        mSurfaceHolder = mSurfaceView.getHolder();
        mSurfaceHolder.addCallback(new CustomCallBack());
        mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
        return mSurfaceView;
    }
    private class CustomCallBack implements SurfaceHolder.Callback {
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            initCameraAndRecord();
        }
        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
        }
        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
            releaseCamera();
        }
    }
private void initCameraAndRecord() {
        if (mCamera != null) {
            releaseCamera();
        }
        //打开摄像头
        try {
            mCamera = Camera.open();
        } catch (Exception e) {
            e.printStackTrace();
            releaseCamera();
        }
        if (mCamera == null)
            return;
        //设置摄像头参数
        setCameraParams();
        try {
            mCamera.setDisplayOrientation(90);   //设置拍照方向为90度（竖屏）
            mCamera.setPreviewDisplay(mSurfaceHolder);
            mCamera.startPreview();
            mCamera.unlock();
            //摄像头参数设置结束之后，初始化录制API装备
            initCameraRecord();
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (RuntimeException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

咱们就能把 UI 与 Camera 的逻辑别离，后期就能够替换为各种不同的 Camera 来结束。虽然结束相比比较简略，但详细代码还是太多，有爱好能够检查文章末尾的源码检查。

三、展现现已录制的视频

录制结束之后咱们就需求播映预览现已录制的视频，并让用户挑选是从头录制还是确认结束。

播映视频的方法有很多，因为咱们一般本地录制的视频都是 MP4 格局，所以运用原生的 VideoPlayer 或许 TextureView 都能简略快速的结束视频的预览。

例如我这儿运用的 MediaPlayer + TextureView结束的视频预览，大致的代码如下：

public class MyVideoView extends TextureView implements TextureView.SurfaceTextureListener {
    private MediaPlayer mMediaPlayer = null;
    private SurfaceTexture mSurfaceHolder = null;
    public void openVideo(Uri uri) {
        if (uri == null || mSurfaceHolder == null || getContext() == null) {
            // not ready for playback just yet, will try again later
            if (mSurfaceHolder == null && uri != null) {
                mUri = uri;
            }
            return;
        }
        mUri = uri;
        mDuration = 0;
        Exception exception = null;
        try {
            if (mMediaPlayer == null) {
                mMediaPlayer = new MediaPlayer();
                mMediaPlayer.setOnPreparedListener(mPreparedListener);
                mMediaPlayer.setOnCompletionListener(mCompletionListener);
                mMediaPlayer.setOnErrorListener(mErrorListener);
                mMediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
                mMediaPlayer.setOnSeekCompleteListener(mSeekCompleteListener);
                //			mMediaPlayer.setScreenOnWhilePlaying(true);
                mMediaPlayer.setVolume(mVolumn, mVolumn);
                mMediaPlayer.setSurface(new Surface(mSurfaceHolder));
            } else {
                mMediaPlayer.reset();
            }
            mMediaPlayer.setDataSource(getContext(), uri);
            mMediaPlayer.prepareAsync();
            mCurrentState = STATE_PREPARING;
        } catch (IOException ex) {
            exception = ex;
        } catch (IllegalArgumentException ex) {
            exception = ex;
        } catch (Exception ex) {
            exception = ex;
        }
        if (exception != null) {
            exception.printStackTrace();
            mCurrentState = STATE_ERROR;
            if (mErrorListener != null)
                mErrorListener.onError(mMediaPlayer, MediaPlayer.MEDIA_ERROR_UNKNOWN, 0);
        }
    }
}

一般咱们设置循环播映的话，一些暂停康复等操作都是可不必的，只需求开端与中止即可：

    public void start() {
        mTargetState = STATE_PLAYING;
        //可用状况{Prepared, Started, Paused, PlaybackCompleted}
        if (mMediaPlayer != null && (mCurrentState == STATE_PREPARED || mCurrentState == STATE_PAUSED || mCurrentState == STATE_PLAYING || mCurrentState == STATE_PLAYBACK_COMPLETED)) {
            try {
                if (!isPlaying())
                    mMediaPlayer.start();
                mCurrentState = STATE_PLAYING;
                if (mOnPlayStateListener != null)
                    mOnPlayStateListener.onStateChanged(true);
            } catch (IllegalStateException e) {
                tryAgain(e);
            } catch (Exception e) {
                tryAgain(e);
            }
        }
    }
    public void stop() {
        mTargetState = STATE_STOP;
        if (mMediaPlayer != null && (mCurrentState == STATE_PLAYING || mCurrentState == STATE_PAUSED)) {
            try {
                mMediaPlayer.stop();
                mCurrentState = STATE_STOP;
                if (mOnPlayStateListener != null)
                    mOnPlayStateListener.onStateChanged(false);
            } catch (IllegalStateException e) {
                tryAgain(e);
            } catch (Exception e) {
                tryAgain(e);
            }
        }
    }   

这样就能结束一个超简略的视频录制逻辑了。

后期咱们还能把一些装备都抽取出来，一些图片资源也能抽取出来，对于闪光灯与切换前后摄像头号逻辑都能加上。

跋文

本文的示例代码是基于Camera + SurfaceView + MediaRecorder 录制API结束的。

对于录制视频的方法有很多种，示例仅仅最简略的 MediaRecorder ，MidiaRecoder 本质上便是对 MediaCodec 的封装，它用起来确实便利，可是一些装备不是很便利更改，例如修改录制的提示音，不便利断点续录，等等有时分并不符合咱们的要求。

那咱们能够运用 CameraX 的录制也显得更便利，或许自己手动的运用 MediaCodec 生成视频流与音频流的编码格局，然后经过 MediaMuxer去封装格局为MP4。

乃至你觉得能够都能够用 ffmpeg 去编码音频与视频的编码格局，然后合成MP4。

乃至咱们还能直接运用第三方的一些jar包结束特效/美颜录制。

可挑选的太多了，所以咱们第一步把 UI 逻辑别离出来之后，后期咱们想要经过怎样的方法来结束视频录制都是很便利了的。

好了，关于本文的内容假如想检查源码能够点击这儿 【传送门】。你也能够重视我的这个Kotlin项目，我有时刻都会持续更新。

假如有更多的更好的其他方法，也希望咱们能谈论区沟通一下。

常规，我如有讲解不到位或错漏的当地，希望同学们能够指出。

我自己一路写下来，对应自界说View的体系我也是有了更多的理解，希望咱们跟着一路温习下来能有更多的收货。

假如感觉本文对你有一点点的启示，还望你能点赞支撑一下,你的支撑是我最大的动力。

Ok,这一期就此结束。