模仿微信拍摄小视频

近日科技快讯：

近日，阿里巴巴文化娱乐集团宣布土豆网全面转型为短视频平台，准备投入20亿打造“大鱼计划”，原UC订阅号、优酷自频道账号统一升级为大鱼号。同时，淘宝将推出Channel T，为土豆平台内容的创作者提供了覆盖淘宝二楼、淘宝台、短视频全淘融入的三层合作模式。此外，土豆还公布了海外计划，5月将推出面向亚洲市场的短视频App“tudoo”。

控件介绍：

不知道是不是在微信更新到6.0版本之后，微信将它的拍照和录制视频的功能集合到同一个界面，通过点击与长按来分别执行拍照和录制小视频的功能，真的不得不感叹那些大牛的想法是多么天马行空。虽然我没有他们的想法那么超前，但是我还是尽了自己的能力去模仿他们的微信拍照界面，并且将它们组件化，让需要用到的人轻松使用。

首先先介绍一下该控件的功能，这是一个模仿微信拍照的开源控件，主要的功能有如下：

点击拍照。
前后摄像头的切换。
长按录视频（视频长度为10秒内）。
长按录视频的时候，手指上滑可以放大视频。
录制完视频可以浏览并且重复播放。
可以设置小视频保存路径。

涉及的知识点

自定义View肯定不用多说啦 (拍照与录制视频的按钮) ：

1. CaptureButton (继承View)

2. JCameraView (继承RelativeLayout)
Camera (拍照)
MediaRecorder (录制小视频)
VideoView (小视频的浏览)

使用步骤

1.首先，在build.gradle中添加依赖

  compile 'cjt.library.wheel:camera:0.1.9'

2.在项目最外层的build.gradl中添加以下代码

allprojects {
    repositories {
        jcenter()
        maven {
            url 'https://dl.bintray.com/cjt/maven'
        }
    }
}

3.在清单文件中加入以下权限

//0.0.9需要新增权限
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

4.在drawable文件夹下建ic_camera_enhance_black_24dp.xml文件，添加以下代码

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M9,3L7.17,5L4,5c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,7c0,-1.1 -0.9,-2 -2,-2h-3.17L15,3L9,3zM12,18c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,17l1.25,-2.75L16,13l-2.75,-1.25L12,9l-1.25,2.75L8,13l2.75,1.25z"/>
</vector>

5.在drawable文件夹下建ic_repeat_black_24dp.xml文件，添加以下代码

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M7,7h10v3l4,-4 -4,-4v3L5,5v6h2L7,7zM17,17L7,17v-3l-4,4 4,4v-3h12v-6h-2v4z"/>
</vector>

6.在布局文件中添加以下代码

<com.cjt2325.cameralibrary.JCameraView
    android:id="@+id/cameraview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:iconMargin="20dp"
    app:iconWidth="30dp"
    app:iconSrc="@drawable/ic_camera_enhance_black_24dp"/>

7.将相机所在的Activity设为全屏，在当前Activity中添加以下代码

View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN);
ActionBar actionBar = getSupportActionBar();
actionBar.hide();

8.初始化JCameraView空间

//(0.1.4+)动态权限获取
CheckPermissionsUtil checkPermissionsUtil = new CheckPermissionsUtil(this);
checkPermissionsUtil.requestAllPermission(this);
//将mJCameraView抽成成员变量
JCameraView mJCameraView = (JCameraView) findViewById(R.id.cameraview);
//(0.0.7+)设置视频保存路径（如果不设置默认为Environment.getExternalStorageDirectory().getPath()）
mJCameraView.setSaveVideoPath(Environment.getExternalStorageDirectory().getPath());
//(0.0.8+)设置手动/自动对焦，默认为自动对焦
mJCameraView.setAutoFoucs(false);
mJCameraView.setCameraViewListener(new JCameraView.CameraViewListener() {
    @Override
    public void quit() {
        //返回按钮的点击时间监听
        MainActivity.this.finish();
    }
    @Override
    public void captureSuccess(Bitmap bitmap) {
        //获取到拍照成功后返回的Bitmap
        FileUtil.saveBitmap(bitmap);//将拍摄的照片或视频保存到sd卡下
        Toast.makeText(MainActivity.this, "获取到照片Bitmap:" + bitmap.getHeight(), Toast.LENGTH_SHORT).show();
    }
    @Override
    public void recordSuccess(String url) {
        //获取成功录像后的视频路径
        Toast.makeText(MainActivity.this, "获取到视频路径:" + url, Toast.LENGTH_SHORT).show();
    }
});

9.将JCameraView的生命周期与Activity的生命周期设置为同步

@Override
protected void onResume() {
    super.onResume();
    mJCameraView.onResume();
}
@Override
protected void onPause() {
    super.onPause();
    mJCameraView.onPause();
}

好了大功告成，马上运行自己的Demo试一下吧！

长按拍摄按钮，进行微视频的录制，点击拍摄按钮，进行图拍的拍摄。

右上角的相机图片，切换前后摄像头。

拍摄完成后，点击小勾勾，进行文件保存，点击小叉叉重新拍摄。

点击拍摄左侧的小三角，退出程序。

模仿微信拍摄小视频

猜你喜欢