前端錄制視頻

js export class VideoRecording { // 錄視頻 mediaRecorder: MediaRecorder | null; stream: MediaStream | null; chunks: any[]; endCallback: any[]; constructor() { this.mediaRecorder = null; // 錄音對象 this.stream = null; // 軌道 this.chunks = []; // 錄制緩存 this.endCallback = []; // 結束回調 } create() { // 創(chuàng)建一個錄制任務 return new Promise((resolve, reject) => { this.resetState(); navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => { this.stream = stream; const mime = MediaRecorder.isTypeSupported("video/webm\;codecs=h264") ? "video/webm\;codecs=h264" : "video/webm"; this.mediaRecorder = new MediaRecorder(stream, { mimeType: mime }); resolve({format: mime === "video/webm\;codecs=h264" ? 'mp4': 'webm'}); }).catch((err) => { reject(err); }); }); } start() { // 開始 return new Promise((resolve, reject) => { this.judgeMediaRecorderIs().then((mediaRecorder: MediaRecorder) => { mediaRecorder.start(); mediaRecorder.addEventListener('dataavailable', (e) => { this.chunks.push(e.data); this.endCallback.forEach((resolve) => { resolve(); this.endCallback.shift(); }); }); resolve(''); }).catch((err) => { reject(err); }); }); } stop() { // 結束 return new Promise((resolve, reject) => { this.judgeMediaRecorderIs().then((mediaRecorder: MediaRecorder) => { if (mediaRecorder.state === 'inactive') { return reject({code: 0, message: '已結束'}); }; mediaRecorder.stop(); this.stream.getTracks().forEach((track) => { track.stop(); }) this.endCallback.push(resolve); }).catch((err) => { reject(err); }); }); } download() { // 下載 return new Promise((resolve, reject) => { this.handleChunksToBolb().then((blob: Blob) => { let url = URL.createObjectURL(blob); let a = document.createElement('a'); a.href = url; a.download = MediaRecorder.isTypeSupported("video/webm\;codecs=h264") ? 'video.mp4' : 'video.webm'; a.click(); resolve(url); }).catch((err) => { reject(err); }); }); } viewRecording() { // 獲取本地播放url return new Promise((resolve, reject) => { this.handleChunksToBolb().then((blob: Blob) => { let url = URL.createObjectURL(blob); resolve(url); }).catch((err) => { reject(err); }); }); } toFile() { // 錄音緩存轉file return new Promise((resolve, reject) => { this.handleChunksToBolb().then((blob: Blob) => { let filename = MediaRecorder.isTypeSupported("video/webm\;codecs=h264") ? 'video.mp4' : 'video.webm'; let fileType = filename.includes('.mp4') ? 'video/mp4' : 'video/webm'; resolve(new File([blob], filename, { type: fileType })); }).catch((err) => { reject(err); }); }); } handleChunksToBolb() { // 錄音緩存轉bolb return new Promise((resolve, reject) => { this.judgeChunksIs().then((chunks: any) => { let blob = new Blob(chunks, { type: MediaRecorder.isTypeSupported("video/webm\;codecs=h264") ? 'video/mp4' : chunks[0].type }) resolve(blob); }).catch((err) => { reject(err); }); }); } judgeChunksIs() { // 判斷是否有錄音緩存 return new Promise((resolve, reject) => { let chunks = this.chunks; if (chunks.length === 0) { return reject({code: 0, message: '沒有錄制的緩沖'}); }; return resolve(chunks); }); } judgeMediaRecorderIs() { // 判斷是否創(chuàng)建錄制任務 return new Promise((resolve, reject) => { let mediaRecorder = this.mediaRecorder; if (!mediaRecorder) { return reject({code: 0, message: '請先創(chuàng)建一個錄制對象'}); }; resolve(mediaRecorder); }); } setEndCallback(callback) { // 存錄音結束回調 this.endCallback.push(callback); } resetState() { // 重置狀態(tài) this.chunks = []; this.mediaRecorder = null; this.stream = null; } };

實用方法

js let myVideoRecording = new VideoRecording(); @params res: { format: 'mp4', type: String; value: 'mp4' | 'webm'; 說明：當前支持的錄制格式; } myVideoRecording.create().then((res: {format: 'mp4'}) => { // 開始錄制 myVideoRecording.start(); // 可選擇自己注冊一個結束回調, 也可以調用stop()結束成功后執(zhí)行下載、播放url、轉file let endRecording = () => { // 下載到本地 myVideoRecording.download(); // 本地播放url myVideoRecording.viewRecording().then((srcObject) => {}); // 轉file可上傳到后臺服務器 myVideoRecording.toFile().then((file) => {}); }; // 存結束錄音回調函數 myVideoRecording.setEndCallback(endRecording); // 手動結束錄屏，then后才可以下載、獲取本地播放url、轉file對象 myVideoRecording.stop().then(() => { // 下載到本地 myVideoRecording.download(); // 本地播放url myVideoRecording.viewRecording().then((srcObject) => {}); // 轉file可上傳到后臺服務器 myVideoRecording.toFile().then((file) => {}); }); });

總結

以上是生活随笔為你收集整理的js前端录制视频mp4本地播放转file的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。