实现web前端录屏并下载到本地(利用RecorderRTC.js)
生活随笔
收集整理的這篇文章主要介紹了
实现web前端录屏并下载到本地(利用RecorderRTC.js)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
直接上源碼,我的代碼借鑒了這個老哥用Vue.js寫的https://blog.csdn.net/blueXh/article/details/88955821
html:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Screen Record</title><link rel="stylesheet" href="index.css"> </head> <body><button id="start" onclick="startRecording()">錄屏</button> <button id="stop" onclick="stopRecording()">停止錄屏</button><video id="video" controls autoplay></video><script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script><script src="index.js"></script> </body> </html>index.js:
let video = document.getElementById("video");let videoStart = false;let recorder;function invokeGetDisplayMedia(success, error) {let displaymediastreamconstraints = {video: {displaySurface: 'monitor', // monitor, window, application, browserlogicalSurface: true,cursor: 'always' // never, always, motion}};// above constraints are NOT supported YET// that's why overridnig themdisplaymediastreamconstraints = {video: true};if (navigator.mediaDevices.getDisplayMedia) {navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);}else {navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);}}function captureScreen(callback) {this.invokeGetDisplayMedia((screen) => {this.addStreamStopListener(screen, () => {//});callback(screen);}, function (error) {console.error(error);alert('Unable to capture your screen. Please check console logs.\n' + error);});}function addStreamStopListener(stream, callback) {stream.addEventListener('ended', function () {callback();callback = function () { };}, false);stream.addEventListener('inactive', function () {callback();callback = function () { };}, false);stream.getTracks().forEach(function (track) {track.addEventListener('ended', function () {callback();callback = function () { };}, false);track.addEventListener('inactive', function () {callback();callback = function () { };}, false);});}function startRecording() {captureScreen(screen=>{video.srcObject = screen;recorder = RecordRTC(screen, {type: 'video',mimeType: 'video / webm; codecs = h264',});recorder.startRecording();// release screen on stopRecordingrecorder.screen = screen;videoStart = true;});}//結(jié)束時下載到本地function stopRecordingCallback() {video.src = video.srcObject = null;video.src = URL.createObjectURL(recorder.getBlob());console.log(video.src);let downloadLink = document.createElement('a');downloadLink.href = URL.createObjectURL(recorder.getBlob());downloadLink.download ="錄屏.mp4";downloadLink.click();recorder.screen.stop();recorder.destroy();recorder = null;videoStart = false;}function stopRecording() {recorder.stopRecording(this.stopRecordingCallback);}缺點是視頻無聲音，而且下載的視頻可能會因為編碼格式的問題本地無法播放，不過在網(wǎng)頁的video上和騰訊視頻打開都能播放，但已經(jīng)足夠了，對于聲音的話我的想法是同時錄制視頻和音頻，然后將它們進行合并，你們有什么好的想法？
總結(jié)
以上是生活随笔為你收集整理的实现web前端录屏并下载到本地(利用RecorderRTC.js)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于setTimeout函数中的this
- 下一篇： 1万个小时法则