Imitate WeChat to shoot small videos

     Recent technology news:

       Recently, Alibaba Culture and Entertainment Group announced that Tudou will be fully transformed into a short video platform, and plans to invest 2 billion to build the "Big Fish Project". At the same time, Taobao will launch Channel T to provide content creators on the Tudou platform with a three-tier cooperation model covering the second floor of Taobao, Taobao Platform, and short video full Taobao. In addition, Tudou also announced overseas plans, and will launch a short video app "tudoo" for the Asian market in May.  

     Control introduction:

      I don’t know if after WeChat was updated to version 6.0, WeChat integrated its photo and video recording functions into the same interface, and clicked and long-pressed to perform the functions of taking pictures and recording small videos respectively. I really have to sigh about those Daniel's ideas are wild. Although I am not as advanced as their ideas, I still tried my best to imitate their WeChat camera interface, and componentized them so that people who need them can use them easily.

First of all, let's introduce the function of this control. This is an open source control that imitates WeChat photography. The main functions are as follows:

• Click to take a photo.

• Switch between front and rear cameras.

• Long press to record video (video length is within 10 seconds).

• When long-pressing to record a video, slide your finger up to zoom in on the video.

• The recorded video can be browsed and played repeatedly.

• You can set the save path of the small video.

         Knowledge points involved

      

• Needless to say about custom View (buttons for taking pictures and recording videos):

  1.  CaptureButton (inherits View)

  2.  JCameraView (inheriting RelativeLayout)

• Camera

• MediaRecorder (record small video)

• VideoView (browse of small videos)

        Steps for usage

1. First, add dependencies in build.gradle

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

2. Add the following code to the outermost build.gradl of the project

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

3. Add the following permissions to the manifest file

//0.0.9 requires new permissions
<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();
}

Okay, you're done, run your own Demo and try it now!

Press and hold the shooting button to record a micro video, and click the shooting button to shoot a picture.

The camera picture in the upper right corner, switch the front and rear cameras.

After shooting, click the small tick to save the file, and click the small fork to shoot again.

Click the small triangle on the left to exit the program.