H5+springboot（集成ffmpeg）实现前端视频录制以及webm格式转mp4
生活随笔
收集整理的這篇文章主要介紹了
H5+springboot（集成ffmpeg）实现前端视频录制以及webm格式转mp4
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
H5+springboot（集成ffmpeg）實(shí)現(xiàn)前端視頻錄制以及webm格式轉(zhuǎn)mp4
1、前端實(shí)現(xiàn)（僅供參考）
獻(xiàn)上代碼：
<!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');//開(kāi)始錄制let mediaRecorder;$('#beginAction').click(function (){console.log('開(kāi)始錄制');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('獲取視頻流數(shù)據(jù)... ...'+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()});});//查看當(dāng)前瀏覽器支持媒體類型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">開(kāi)始錄制</button><button id="stopAction">停止錄制</button></div><div class="remark"></div></div></div> </body> </html>引入文件解釋：
FileSaver.js 文件保存本地js，這個(gè)js是在網(wǎng)上查找的，如果客觀找不到或者嫌棄，可以直接使用a 標(biāo)簽，下載本地。 adapter-latest.js video標(biāo)簽適配瀏覽器。 MediaStreamRecorder.js 這個(gè)js文件是二次封裝，參考GitHub https://github.com/streamproc/MediaStreamRecorder 直接找到源文件 放在自己工程中。 jquery-3.5.1.min.js 這個(gè)就不多說(shuō)了。備注：前端目前支持webm格式視頻，如果要使用mp4格式需要自己轉(zhuǎn)換，在前端去轉(zhuǎn)換格式會(huì)消耗很大的cpu，所以視頻格式轉(zhuǎn)換放在后臺(tái)?？凸倏梢栽诒４姹镜匾曨l文件地方自己發(fā)送ajax或者其他請(qǐng)求方式上傳至后臺(tái)服務(wù)，這里就不多說(shuō)了。
2、后臺(tái)springboot 簡(jiǎn)略代碼（僅供參考）
獻(xiàn)上代碼：
public static void main(String[] args) {System.out.println("測(cè)試======");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("時(shí)長(zhǎng)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>因?yàn)槲沂莔ac，引入最新的javac 一直提示opencv依賴下載失敗，所以這里我就選擇了低版本的依賴。
備注：這里只是把前端生成本地的webm格式的視頻文件轉(zhuǎn)換為mp4格式的。
嘻哈---我認(rèn)為寫博客還是直接點(diǎn)比較好，畢竟大家都喜歡ctrl+c. ctrl+v，哈哈哈哈哈哈哈。
?
?
總結(jié)
以上是生活随笔為你收集整理的H5+springboot（集成ffmpeg）实现前端视频录制以及webm格式转mp4的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 2018黑马39期WEB前端视频教程
- 下一篇： web 前端学习之制作网页视频