H5+springboot（集成ffmpeg）实现前端视频录制以及webm格式转mp4

H5+springboot（集成ffmpeg）实现前端视频录制以及webm格式转mp4

1、前端实现（仅供参考）

献上代码：

    
    
    
    
    
    
    

    
    


    

    


    

        

            
        
        

            

                开始录制
                停止录制
            
            


            
        
    

引入文件解释：

FileSaver.js 文件保存本地js，这个js是在网上查找的，如果客观找不到或者嫌弃，可以直接使用a 标签，下载本地。
adapter-latest.js video标签适配浏览器。
MediaStreamRecorder.js 这个js文件是二次封装，参考GitHub  https://github.com/streamproc/MediaStreamRecorder 直接找到源文件 放在自己工程中。
jquery-3.5.1.min.js 这个就不多说了。

备注：前端目前支持webm格式视频，如果要使用mp4格式需要自己转换，在前端去转换格式会消耗很大的cpu，所以视频格式转换放在后台。客官可以在保存本地视频文件地方自己发送ajax或者其他请求方式上传至后台服务，这里就不多说了。

2、后台springboot 简略代码（仅供参考）

献上代码：

public static void main(String[] args) {
        System.out.println("测试======");
        String filePath="/Users/dongxr/Desktop/video-5322.webm";
        File file=new File(filePath);
        FFmpegFrameGrabber frameGrabber = new FFmpegFrameGrabber(file);
        String fileName = null;
        Frame captured_frame = null;
        FFmpegFrameRecorder recorder = null;
        try {
            frameGrabber.start();
            fileName = file.getAbsolutePath() + "__.mp4";
            recorder = new FFmpegFrameRecorder(fileName, frameGrabber.getImageWidth(), frameGrabber.getImageHeight(), frameGrabber.getAudioChannels());
            recorder.setVideoCodec(avcodec.AV_CODEC_ID_H264);
            recorder.setFormat("mp4");
            recorder.setSampleRate(frameGrabber.getSampleRate());
            recorder.setFrameRate(frameGrabber.getFrameRate());
            recorder.setVideoBitrate(10 * 1024 * 1024);
            recorder.start();
            boolean bool=false;
            while ((captured_frame = frameGrabber.grabFrame()) != null) {
                try {
                    System.out.println("时长2==="+captured_frame.timestamp);
                    recorder.setTimestamp(frameGrabber.getTimestamp());
                    recorder.record(captured_frame);
                } catch (Exception e) {
                    System.out.println(e);
                }
            }
            recorder.stop();
            recorder.release();
            frameGrabber.stop();
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

maven依赖引入：

            org.bytedeco
            javacv-platform
            1.5
        

因为我是mac，引入最新的javac 一直提示opencv依赖下载失败，所以这里我就选择了低版本的依赖。

备注：这里只是把前端生成本地的webm格式的视频文件转换为mp4格式的。

嘻哈---我认为写博客还是直接点比较好，毕竟大家都喜欢ctrl+c. ctrl+v，哈哈哈哈哈哈哈。