electron录制屏幕+声音并保存在本地

最新推荐文章于 2024-09-13 08:26:22 发布

rongyi2233

最新推荐文章于 2024-09-13 08:26:22 发布

阅读量6.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： electron 文章标签： javascript

本文链接：https://blog.csdn.net/rongyi2233/article/details/106565637

electron 专栏收录该内容

1 篇文章

订阅专栏

const electron = require('electron');
const {
	desktopCapturer
} = require('electron');
const fs=require("fs");
let source;
/*获取当前屏幕和应用窗口源信息*/
desktopCapturer.getSources({
	types: ['window', 'screen']
}, (error, sources) => {
	if(error) throw error;
	console.log(sources); // sources 当前屏幕和应用窗口的数组
	source = sources[0];
	
	/*首先根据选择的录制源是窗口还是摄像头以不同的方式获取视频流；*/
	let sourceId = source.id; // 所选择的屏幕或窗口 sourceId
	console.log(sourceId);
	let stream = navigator.mediaDevices.getUserMedia({
		audio: false,
		 video: {
		    mandatory: {
		      chromeMediaSource: 'desktop',
		      chromeMediaSourceId: sourceId,
		      maxWidth: window.screen.width,
		      maxHeight: window.screen.height,
		    }
		  }
	});

	/*因为无法通过直接设置 audio: true 来获取音频，所以需要另外加入麦克风的音轨。*/

	stream
		.then(Mediastream => {
			let audioTracks = navigator.mediaDevices
				.getUserMedia({
					audio: true,
					video: false
				})
				.then(mediaStream =>{
					//mediaStream.getAudioTracks()[0];
					Mediastream.addTrack(mediaStream.getAudioTracks()[0]);
					createRecorder(Mediastream); // createRecorder() 函数实现见下文
				});
		})
		.catch(err => console.error('startRecord error', err));
});

/*createRecorder() 函数初始化录制；*/

let recorder = null;
let i=0;
function createRecorder(stream) {
  recorder = new MediaRecorder(stream);
  recorder.start(10000);
  // 如果 start 没设置 timeslice，ondataavailable 在 stop 时会触发
  recorder.ondataavailable = event => { 
  console.log(event);
    let blob = new Blob([event.data], {
      type: 'video/mp4',
    });
    saveMedia(blob);
  };
  recorder.onerror = err => {
    console.error(err);
  };
};
/*stopRecorder() 函数结束录制并保存至本地 mp4 文件；*/
function stopRecord() {
  recorder.stop();
}

function saveMedia(blob) {
  let reader = new FileReader();
  reader.onload = () => {
    let buffer = new Buffer(reader.result);
    fs.writeFile('test'+i+'.mp4', buffer, {}, (err, res) => {
      if (err) return console.error(err);
    });
    i++;
  };
  reader.onerror = err => console.error(err);
  reader.readAsArrayBuffer(blob);
}


$("#stop").click(function(){
	stopRecord();
});

可以录制成10s一段的小段视频并保存在项目目录，有个问题是只有第一个视频可以正常播放，后面录制的无法打开，目前没有找到原因，知道原因的大神说下～