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

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，哈哈哈哈哈哈哈。

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

SpringBoot集成ffmpeg实现视频转码播放
背景之前构建过文件预览服务,对于视频部分前端播放组件限制只能为mp4格式,为了支持更多视频格式决定对方案进行升级,由于视频格式较多,针对每一种格式定制选择播放器不太现实,决定对视频源统一转码,转码后 ...
Android集成FFmpeg并实现视频转码
通过编译FFmpeg并集成到Android App中实现视频转码,也可以直接执行FFmpeg命令实现视频拼接.剪切.添加水印.旋转等操作,或者在C++中引入各模块头文件直接调用FFmpeg的API满足 ...
「Python｜音视频处理｜场景案例」如何使用ffmpeg下载m3u8视频到本地并保存成mp4
本文主要介绍如何使用ffmpeg批量下载视频到本地并保存成指定格式. 文章目录场景说明解决方案源代码场景说明当我们希望将网页上的视频下载到本地的时候,我们可能获取到的视频地址是指向.m3u8 ...
html ace编辑器,Springboot 集成 Ace editor前端编辑器
一.引入Ace editor 本质上Ace editor只是一个js而已.而该js引用了其他js(如扩展.主题等js),因此将ace editor.js引入项目时最好复制整个文件夹,不能只复制一个ac ...
腾讯视频下载的qlv格式转换为MP4格式
今天突然在腾讯视频上看到一个比较好的视频,下载下来想随时观看,无赖格式是qlv用其他播放器无法播放,只能用腾讯视频播放器,这样很不方便,然后就在万能百度上搜索了一下方法,确实可以将qlv转换为mp4格 ...
Unity3D windows平台视频录制录屏插件 UnityRecorder
1:Asset Store 搜索下载 :UnityRecorder 2.打开 Window-> General-> Recorder -> Recorder Window 3.添加新 ...
webm格式视频怎么转换成mp4
当我们接触的视频格式多了,对每种格式视频所具备的属性也就了解的清楚了.其实很多视频格式,如果我们想要做到随时随地的进行播放,并不是一个拿起来就能操作的事项.因为很多视频格式.因为自身的兼容性,以及格式 ...
mkv视频格式转换mp4格式？
mkv视频格式转换mp4格式?在多种多样的视频格式中有种格式叫mkv,mkv跟mp4都是比较常用的视频格式.mkv是一种多媒体包格式,可以为多种音视频提供外壳,缺点也较为明显,大多数无法直接播放这样的 ...
SpringBoot集成swagger3（powernode CD2207）（内含教学视频+源代码）
SpringBoot集成swagger3(powernode CD2207)(内含教学视频+源代码) 教学视频+源代码下载链接地址:https://download.csdn.net/download ...
前端H5怎么切换语言_H5前端和移动APP开发知识点和配套视频
随着互联网.移动互联网的发展,HTML5成为了客户端软件开发的主流技术,HTML5实际上是由:HTML5语言.CSS3.JAVASCRIPT语言组成. 尚学堂的HTML5前端课程由国内知名技术专家刘兴 ...

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

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

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

最新文章

热门文章