1、前端实现（仅供参考）
献上代码：
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>视频流采集</title> <script src="../js/jquery/jquery-3.5.1.min.js"></script> <script src ="../js/file/FileSaver.js"></script><!-- video适配浏览器--> <script src = "https://webrtc.github.io/adapter/adapter-latest.js"></script> <script src="../js/mediaStreamRecorder/MediaStreamRecorder.js"></script><!-- css--> <style type="text/css"> body { width: 100%; height: 100%; } .container { position: absolute; display: flex; flex-direction: row; left: 0px; width: 100%; height: 100%; } .container .left { width: 50%; height: 100%; background: #b5e3ad; } .left video { width: 100%; height: 100%; left: 0px; bottom: 0px; } .container .right { width: 50%; height: 100%; } .right .btn_block { display: flex; flex-direction: row; justify-content: center; align-items: center; background: #898c8c; margin-top: 0px; width: 100%; height: 50px; } .btn_block button { width: 90px; height: 40px; margin-right: 20px; margin-left: 20px; font-size: 12px; font-weight: bold; } .right .remark { width: 100%; height: 100%; background: #d99540; margin-bottom: 0px; } </style><!-- js--> <script type="application/javascript"> $(function (){ console.log('音视频采集'); let videoPlayer = document.getElementById('player'); //开始录制 let mediaRecorder; $('#beginAction').click(function (){ console.log('开始录制'); if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){ console.log('getUserMedia is not supported'); }else{ const constraints = { video: true, audio: true }; navigator.getUserMedia(constraints, onMediaSuccess, onMediaError); } }); function onMediaSuccess(stream){ videoPlayer.srcObject=stream; videoPlayer.play(); // mediaRecorder = new MediaStreamRecorder(stream); mediaRecorder.mimeType = 'video/webm'; let _blob; mediaRecorder.ondataavailable = function (blob) { console.log('获取视频流数据... ...'+blob); _blob=blob; }; mediaRecorder.onstop=function (err){ console.log("已下载至本地") let fileName='video-'+Math.floor(Math.random()*100000)+'.webm'; let file = new File([_blob], fileName, { type: 'video/webm' }); saveAs(file); }; mediaRecorder.start(100); } function onMediaError(e){ console.error('media error', e); } //停止 $('#stopAction').click(function (){ mediaRecorder.stop(); if(!videoPlayer.srcObject){ return; } let player = videoPlayer.srcObject; let tracks = player.getTracks(); tracks.forEach(track => { track.stop() }); }); //查看当前浏览器支持媒体类型 const types = ["video/webm", "audio/webm", "video/webm;codecs=vp8", "video/webm;codecs=daala", "video/webm;codecs=h264", "audio/webm;codecs=opus", "video/mpeg"]; for (let i in types) { console.log( "Is " + types[i] + " supported? " + (MediaRecorder.isTypeSupported(types[i]) ? "Maybe!" : "Nope :(")); } }); </script></head><body> <div class="container"> <div class="left"> <video autoplay playsinline id = "player" width="400" height="350"></video> </div> <div class="right"> <div class="btn_block"> <button id="beginAction">开始录制</button> <button id="stopAction">停止录制</button> </div> <div class="remark"> </div> </div> </div></body></html>引入文件解释：
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依赖引入：
<dependency> <groupId>org.bytedeco</groupId> <artifactId>javacv-platform</artifactId> <version>1.5</version> </dependency>因为我是mac，引入最新的javac 一直提示opencv依赖下载失败，所以这里我就选择了低版本的依赖。
备注：这里只是把前端生成本地的webm格式的视频文件转换为mp4格式的。
嘻哈---我认为写博客还是直接点比较好，毕竟大家都喜欢ctrl+c. ctrl+v，哈哈哈哈哈哈哈。