<!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>Document</title>
<script>
let recorder
function start() {
let videoTarget = document.getElementById('audio');
// navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
//getDisplayMedia 录屏
navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
.then((stream) => {
recorder = new MediaRecorder(stream);
console.log(recorder,'recorder');
console.log(stream,'stream');
videoTarget.srcObject = stream;
videoTarget = (...arg) => {
console.log(arg);
}
recorder.ondataavailable = (event) => {
let url = URL.createObjectURL(event.data);
let link = document.createElement("a");
console.log(url,event,'event')
window.location.href = url
link.target = "_blank";
link.href = url;
link.click();
}
recorder.start();
});
}
function stop() {
console.log('结束录像');
recorder.stop();
}
</script>
</head>
<body>
<video id="audio" width="400" height="600" controls autoplay></video>
<input onclick="start()" type="button" value="开始" />
<input onclick="stop()" type="button" value="结束" />
</body>
</html>
录完会返回一个blob对象，可通过 formdata上传给后台