使用Android实现微信小视频录制功能详细介绍

广告:宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取~~~

使用Android实现微信小视频录制功能详细介绍

这篇文章主要介绍了Android 微信小视频录制功能实现详解的相关资料,这里提供了具体的实现思路及代码,需要的朋友可以参考下

Android 微信小视频录制功能

开发之前

这几天接触了一下和视频相关的控件, 所以, 继之前的微信摇一摇, 我想到了来实现一下微信小视频录制的功能, 它的功能点比较多, 我每天都抽出点时间来写写, 说实话, 有些东西还是比较费劲, 希望大家认真看看, 说得不对的地方还请大家在评论中指正. 废话不多说, 进入正题.

开发环境

最近刚更新的, 没更新的小伙伴们抓紧了

Android Studio 2.2.2

JDK1.7

API 24

Gradle 2.2.2

相关知识点

视频录制界面 SurfaceView 的使用

Camera的使用

相机的对焦, 变焦

视频录制控件MediaRecorder的使用

简单自定义View

GestureDetector(手势检测)的使用

用到的东西真不少, 不过别着急, 咱们一个一个来.

开始开发

案例分析

大家可以打开自己微信里面的小视频, 一块简单的分析一下它的功能点有哪些 ?

基本的视频预览功能

长按 “按住拍” 实现视频的录制

录制过程中的进度条从两侧向中间变短

当松手或者进度条走到尽头视频停止录制 并保存

从 “按住拍” 上滑取消视频的录制

双击屏幕 变焦 放大

根据上述的分析, 我们一步一步的完成

搭建布局

布局界面的实现还可以, 难度不大

<?xml version="1.0" encoding="utf-8"?><FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent">  <TextView    android:id="@+id/main_tv_tip"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="bottom|center_horizontal"    android:layout_marginBottom="150dp"    android:elevation="1dp"    android:text="双击放大"    android:textColor="#FFFFFF"/>  <LinearLayout    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <SurfaceView      android:id="@+id/main_surface_view"      android:layout_width="match_parent"      android:layout_height="0dp"      android:layout_weight="3"/>    <LinearLayout      android:layout_width="match_parent"      android:layout_height="0dp"      android:layout_weight="1"      android:background="@color/colorApp"      android:orientation="vertical">      <RelativeLayout        android:id="@+id/main_press_control"        android:layout_width="match_parent"        android:layout_height="match_parent">        <com.lulu.weichatsamplevideo.BothWayProgressBar          android:id="@+id/main_progress_bar"          android:layout_width="match_parent"          android:layout_height="2dp"          android:background="#000"/>        <TextView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_centerInParent="true"          android:text="按住拍"          android:textAppearance="@style/TextAppearance.AppCompat.Large"          android:textColor="#00ff00"/>      </RelativeLayout>    </LinearLayout>  </LinearLayout></FrameLayout>
登录后复制

视频预览的实现

step1: 得到SufaceView控件, 设置基本属性和相应监听(该控件的创建是异步的, 只有在真正”准备”好之后才能调用)

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);
登录后复制

step2: 实现接口的方法, surfaceCreated方法中开启视频的预览, 在surfaceDestroyed中销毁

//////////////////////////////////////////////// SurfaceView回调/////////////////////////////////////////////@Overridepublic void surfaceCreated(SurfaceHolder holder) {  mSurfaceHolder = holder;  startPreView(holder);}@Overridepublic void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {}@Overridepublic void surfaceDestroyed(SurfaceHolder holder) {  if (mCamera != null) {    Log.d(TAG, "surfaceDestroyed: ");    //停止预览并释放摄像头资源    mCamera.stopPreview();    mCamera.release();    mCamera = null;  }  if (mMediaRecorder != null) {    mMediaRecorder.release();    mMediaRecorder = null;  }}
登录后复制

step3: 实现视频预览的方法

/** * 开启预览 * * @param holder */private void startPreView(SurfaceHolder holder) {  Log.d(TAG, "startPreView: ");  if (mCamera == null) {    mCamera = Camera.open(Camera.CameraInfo.CAMERA_FACING_BACK);  }  if (mMediaRecorder == null) {    mMediaRecorder = new MediaRecorder();  }  if (mCamera != null) {    mCamera.setDisplayOrientation(90);    try {      mCamera.setPreviewDisplay(holder);      Camera.Parameters parameters = mCamera.getParameters();      //实现Camera自动对焦      List<String> focusModes = parameters.getSupportedFocusModes();      if (focusModes != null) {        for (String mode : focusModes) {          mode.contains("continuous-video");          parameters.setFocusMode("continuous-video");        }      }      mCamera.setParameters(parameters);      mCamera.startPreview();    } catch (IOException e) {      e.printStackTrace();    }  }}
登录后复制

Note: 上面添加了自动对焦的代码, 但是部分手机可能不支持

自定义双向缩减的进度条

有些像我一样的初学者一看到自定义某某View, 就觉得比较牛X. 其实呢, Google已经替我们写好了很多代码, 所以我们用就行了.而且咱们的这个进度条也没啥, 不就是一根线, 今天咱就来说说.

step1: 继承View, 完成初始化

private static final String TAG = "BothWayProgressBar";//取消状态为红色bar, 反之为绿色barprivate boolean isCancel = false;private Context mContext;//正在录制的画笔private Paint mRecordPaint;//上滑取消时的画笔private Paint mCancelPaint;//是否显示private int mVisibility;// 当前进度private int progress;//进度条结束的监听private OnProgressEndListener mOnProgressEndListener;public BothWayProgressBar(Context context) {   super(context, null);}public BothWayProgressBar(Context context, AttributeSet attrs) {  super(context, attrs);  mContext = context;  init();}private void init() {  mVisibility = INVISIBLE;  mRecordPaint = new Paint();  mRecordPaint.setColor(Color.GREEN);  mCancelPaint = new Paint();  mCancelPaint.setColor(Color.RED);}
登录后复制

Note: OnProgressEndListener, 主要用于当进度条走到中间了, 好通知相机停止录制, 接口如下:

public interface OnProgressEndListener{  void onProgressEndListener();}/** * 当进度条结束后的 监听 * @param onProgressEndListener */public void setOnProgressEndListener(OnProgressEndListener onProgressEndListener) {  mOnProgressEndListener = onProgressEndListener;}
登录后复制

step2 :设置Setter方法用于通知我们的Progress改变状态

/** * 设置进度 * @param progress */public void setProgress(int progress) {  this.progress = progress;  invalidate();}/** * 设置录制状态 是否为取消状态 * @param isCancel */public void setCancel(boolean isCancel) {  this.isCancel = isCancel;  invalidate();}/** * 重写是否可见方法 * @param visibility */@Overridepublic void setVisibility(int visibility) {  mVisibility = visibility;  //重新绘制  invalidate();}
登录后复制

step3 :最重要的一步, 画出我们的进度条,使用的就是View中的onDraw(Canvas canvas)方法

@Overrideprotected void onDraw(Canvas canvas) {  super.onDraw(canvas);  if (mVisibility == View.VISIBLE) {    int height = getHeight();    int width = getWidth();    int mid = width / 2;    //画出进度条    if (progress < mid){      canvas.drawRect(progress, 0, width-progress, height, isCancel ? mCancelPaint : mRecordPaint);    } else {      if (mOnProgressEndListener != null) {        mOnProgressEndListener.onProgressEndListener();      }    }  } else {    canvas.drawColor(Color.argb(0, 0, 0, 0));  }}
登录后复制

录制事件的处理

录制中触发的事件包括四个:

长按录制

抬起保存

上滑取消

双击放大(变焦)

现在对这4个事件逐个分析: 前三这个事件, 我都放在了一个onTouch()回调方法中了 对于第4个, 我们待会谈 我们先把onTouch()中局部变量列举一下:

@Overridepublic boolean onTouch(View v, MotionEvent event) {  boolean ret = false;  int action = event.getAction();  float ey = event.getY();  float ex = event.getX();  //只监听中间的按钮处  int vW = v.getWidth();  int left = LISTENER_START;  int right = vW - LISTENER_START;  float downY = 0;  // ...}
登录后复制

长按录制

长按录制我们需要监听ACTION_DOWN事件, 使用线程延迟发送Handler来实现进度条的更新

switch (action) { case MotionEvent.ACTION_DOWN:   if (ex > left && ex < right) {     mProgressBar.setCancel(false);     //显示上滑取消     mTvTip.setVisibility(View.VISIBLE);     mTvTip.setText("↑ 上滑取消");     //记录按下的Y坐标     downY = ey;     // TODO: 2016/10/20 开始录制视频, 进度条开始走     mProgressBar.setVisibility(View.VISIBLE);     //开始录制     Toast.makeText(this, "开始录制", Toast.LENGTH_SHORT).show();     startRecord();     mProgressThread = new Thread() {       @Override       public void run() {         super.run();         try {           mProgress = 0;           isRunning = true;           while (isRunning) {             mProgress++;             mHandler.obtainMessage(0).sendToTarget();             Thread.sleep(20);           }         } catch (InterruptedException e) {           e.printStackTrace();         }       }     };     mProgressThread.start();     ret = true;   }   break;   // ...   return true;}
登录后复制

Note: startRecord()这个方法先不说, 我们只需要知道执行了它就可以录制了, 但是Handler事件还是要说的, 它只负责更新进度条的进度

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);0
登录后复制

抬起保存

同样我们这儿需要监听ACTION_UP事件, 但是要考虑当用户抬起过快时(录制的时间过短), 不需要保存. 而且, 在这个事件中包含了取消状态的抬起, 解释一下: 就是当上滑取消时抬起的一瞬间取消录制, 大家看代码

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);1
登录后复制

Note: 同样的, 内部的stopRecordUnSave()和stopRecordSave();大家先不要考虑, 我们会在后面介绍, 他俩从名字就能看出 前者用来停止录制但不保存, 后者停止录制并保存

上滑取消

配合上一部分说得抬起取消事件, 实现上滑取消

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);2
登录后复制

Note: 主要原理不难, 只要按下并且向上移动一定距离 就会触发,当手抬起时视频录制取消

双击放大(变焦)

这个事件比较特殊, 使用了Google提供的GestureDetector手势检测 来判断双击事件

step1: 对SurfaceView进行单独的Touch事件监听, why? 因为GestureDetector需要Touch事件的完全托管, 如果只给它传部分事件会造成某些事件失效

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);3
登录后复制

step2: 重写GestureDetector.SimpleOnGestureListener, 实现双击事件

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);4
登录后复制

step3: 实现相机的变焦的方法

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);5
登录后复制

Note: 至此我们已经完成了对所有事件的监听, 看到这里大家也许有些疲惫了, 不过不要灰心, 现在完成我们的核心部分, 实现视频的录制

实现视频的录制

说是核心功能, 也只不过是我们不知道某些API方法罢了, 下面代码中我已经加了详细的注释, 部分不能理解的记住就好^v^

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);6
登录后复制

实现视频的停止

大家可能会问, 视频的停止为什么单独抽出来说呢? 仔细的同学看上面代码会看到这两个方法: stopRecordSave和stopRecordUnSave, 一个停止保存, 一个是停止不保存, 接下来我们就补上这个坑

停止并保存

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);7
登录后复制

停止不保存

mSurfaceView = (SurfaceView) findViewById(R.id.main_surface_view); //设置屏幕分辨率mSurfaceHolder.setFixedSize(videoWidth, videoHeight);mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);mSurfaceHolder.addCallback(this);8
登录后复制

Note: 这个停止不保存是我自己的一种想法, 如果大家有更好的想法, 欢迎大家到评论中指出, 不胜感激

以上就是使用Android实现微信小视频录制功能详细介绍的详细内容,更多请关注9543建站博客其它相关文章!

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:微信小程序验证码获取倒计时效果代码分享
下一篇:css颜色有几种写法

发表评论

关闭广告
关闭广告