使用webAPI录制视频

经测试， 只在谷歌和火狐浏览器里起效。

代码：

const streamVideo = document.querySelector('.stream')const playVideo = document.querySelector('.play');let chunk;const download = document.querySelector('#download');let recorder;let mediaStream;document.querySelector('.start').addEventListener('click', start);document.querySelector('.end').addEventListener('click', end);document.querySelector('.play-video').addEventListener('click', play);// MediaRecorder 测试const constraints = { ?audio: false, ?video: true,};function start() { ?navigator.mediaDevices.getUserMedia(constraints) ???.then(stream => { ?????mediaStream = stream; ?????streamVideo.srcObject = stream; ?????streamVideo.play(); ?????recorder = new MediaRecorder(stream); ?????recorder.ondataavailable = e => { ???????chunk = e.data; ???????download.href = URL.createObjectURL(chunk); ?????}; ?????recorder.start(); ???})}function end() { ?streamVideo.pause(); ?recorder.stop(); ?mediaStream.getTracks().forEach(track => { ???track.stop(); ?});}function play() { ?playVideo.src = URL.createObjectURL(chunk); ?playVideo.play();}

完整代码;
在线演示， 使用谷歌或火狐浏览器打开

js录制视频并保存

原文地址：https://www.cnblogs.com/scarecrowlxb/p/9573976.html