當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html video使用MediaRecorder实现录屏功能

發布時間：2024/3/24 编程问答 53 豆豆

生活随笔收集整理的這篇文章主要介紹了 html video使用MediaRecorder实现录屏功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

video視頻的錄制

準備h5可以播放的test.mp4 , mp4需要是h264錄制的

實現步驟

onloadedmetadata 在video加載完視頻源之后攔截

使用video.captureStream 對視頻流進行抓取 , 并生成MediaRecorder對象 .

mediaRecorder對象使用 ondataavailable將二進制數據寫入videoData

根據videoData生成blob對象

根據blob對象生成錄制的視頻 videoUrl ,并進行播放

　ps: RecIntervalListener 類只是為了增加渲染效果非核心代碼

完整GIF 示例代碼

<html><head><title>video錄屏</title><style type="text/css">.block-area {display: inline-block;width: 800px;height: 600px;margin-left: 100px;overflow-y: auto;border: 1px solid #ccc;}.block-area video {margin-left: 100px;width: 600;height: 300;}blockquote {margin-left: 0;margin-right: 0;padding: 0 15px;color: #424242;border-left: 4px solid #ddd;}.captureHoverArea {position: absolute;z-index: 100;left: 600px;top: 145px;color: red;display: none;}.captureHoverArea button {background-color: red;border-color: red;border-radius: 50%;width: 15px;height: 15px;}</style> </head><body><blockquote><h3>ps:請使用server模式測試</h3></blockquote><div class="captureHoverArea"><label id="blinkRec"><button></button><b> REC </b></label><label id="recorderTime"></label></div><div class="block-area"><h4>原始視頻:<button id="btnStart" onclick="startCapture()">Start</button><button id="btnStop" disabled='disabled' onclick="endCapture()">Stop</button></h4><video id="mainVideo" playsinline="" webkit-playsinline="1" controls="1" onloadedmetadata="initMediaRecorder()"><source src="test.mp4" type="video/mp4"></video></div><div class="block-area"><h4>錄制結果:<span id="captureResult" style="display:none"><span id="captureTime"></span><button id="btnResult" onclick="showCapture()">ShowCapture</button></span></h4><video id="displayVideo" autoplay="autoplay" playsinline="" webkit-playsinline="1" controls="1"></video></div> </body><script>var mainVideo = document.getElementById("mainVideo");var displayVideo = document.getElementById("displayVideo");var videoData = [];var recListener;var mediaRecorder;/*** 錄屏記錄器 * 樣式效果代碼*/class RecIntervalListener {constructor() {this.start = new Date();this.end = null;this.btnStart = document.getElementById("btnStart");this.btnStop = document.getElementById("btnStop");this.recorderTime = document.getElementById("recorderTime");this.blinkRec = document.getElementById("blinkRec");this.captureTime = document.getElementById("captureTime");this.repeat = setInterval(() => {this.recorderTime.innerText = parseInt(new Date() - this.start) / 1000 + "s"});this.repeatBlink = setInterval(() => {this.toggleBlink()}, 400);this.toggleRecArea(true)this.toggleDisableButton(true);}/** 停止*/stop() {this.end = new Date();clearInterval(this.repeat);clearInterval(this.repeatBlink);this.toggleRecArea(false)this.toggleDisableButton(false);this.captureTime.innerText = `Capture Video:${recListener.getLastTime()} s`;}/** 獲取最后時間*/getLastTime() {return parseInt(this.end - this.start) / 1000}/** 控制錄屏顯示隱藏*/toggleRecArea(isShow) {let displayHoverArea = isShow ? 'inline' : 'none'let displayCaptureResult = isShow ? 'none' : 'inline'document.querySelector('.captureHoverArea').style.display = displayHoverArea;document.getElementById("captureResult").style.display = displayCaptureResult;}/** 控制錄屏標識閃爍*/toggleBlink() {this.blinkShow = !this.blinkShow;let displayAttr = this.blinkShow ? 'hidden' : ''this.blinkRec.style.visibility = displayAttr;}/** 控制按鈕是否可用*/toggleDisableButton(isStart) {if (isStart) {this.btnStart.setAttribute('disabled', 'disabled');this.btnStop.removeAttribute('disabled');} else {this.btnStart.removeAttribute('disabled');this.btnStop.setAttribute('disabled', 'disabled');}}}/** 攔截二進制流數據*/var initMediaRecorder = function () {// Record with 25 fpsmediaRecorder = new MediaRecorder(mainVideo.captureStream(25));mediaRecorder.ondataavailable = function (e) {videoData.push(e.data);};}/** 錄制*/function startCapture() {videoData = [];mainVideo.play();mediaRecorder.start();recListener = new RecIntervalListener();};/** 停止*/function endCapture() {mediaRecorder.stop();mainVideo.pause();recListener.stop();};/** 播放錄制*/function showCapture() {return new Promise(resolve => {setTimeout(() => {// Wrapping this in setTimeout, so its processed in the next RAFlet blob = new Blob(videoData, {'type': 'video/mp4'});let videoUrl = window.URL.createObjectURL(blob);displayVideo.src = videoUrl;resolve();}, 0);});}; </script></html>

總結

以上是生活随笔為你收集整理的html video使用MediaRecorder实现录屏功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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