| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Screen Capture and Recording Example</title> |
| <style> |
| #screenVideo, #recordedVideo { |
| width: 80%; |
| margin: 10px 0; |
| } |
| #error { |
| color: red; |
| font-weight: bold; |
| } |
| </style> |
| </head> |
| <body> |
| <button id="startCapture">开始屏幕捕获</button> |
| <button id="stopCapture" disabled>停止捕获</button> |
| <button id="startRecording" disabled>开始录制</button> |
| <button id="stopRecording" disabled>停止录制</button> |
| <br/> |
| <video id="screenVideo" autoplay></video> |
| <video id="recordedVideo" controls style="display:none;"></video> |
| <p id="error"></p> |
| |
| <script> |
| const startButton = document.getElementById('startCapture'); |
| const stopButton = document.getElementById('stopCapture'); |
| const startRecordingButton = document.getElementById('startRecording'); |
| const stopRecordingButton = document.getElementById('stopRecording'); |
| const screenVideo = document.getElementById('screenVideo'); |
| const recordedVideo = document.getElementById('recordedVideo'); |
| const errorElement = document.getElementById('error'); |
| |
| let captureStream = null; |
| let mediaRecorder = null; |
| let recordedChunks = []; |
| |
| const handleError = (err) => { |
| console.error('Error: ' + err); |
| errorElement.textContent = 'Error: ' + err; |
| }; |
| |
| startButton.addEventListener('click', async () => { |
| try { |
| captureStream = await navigator.mediaDevices.getDisplayMedia({ video: true }); |
| screenVideo.srcObject = captureStream; |
| startButton.disabled = true; |
| stopButton.disabled = false; |
| startRecordingButton.disabled = false; |
| errorElement.textContent = ''; |
| } catch (err) { |
| handleError(err); |
| } |
| }); |
| |
| stopButton.addEventListener('click', () => { |
| let tracks = captureStream.getTracks(); |
| tracks.forEach(track => track.stop()); |
| screenVideo.srcObject = null; |
| startButton.disabled = false; |
| stopButton.disabled = true; |
| startRecordingButton.disabled = true; |
| stopRecordingButton.disabled = true; |
| errorElement.textContent = ''; |
| }); |
| |
| startRecordingButton.addEventListener('click', () => { |
| recordedChunks = []; |
| try { |
| mediaRecorder = new MediaRecorder(captureStream); |
| mediaRecorder.ondataavailable = event => { |
| if (event.data.size > 0) { |
| recordedChunks.push(event.data); |
| } |
| }; |
| mediaRecorder.onstop = () => { |
| const blob = new Blob(recordedChunks, { type: 'video/webm' }); |
| recordedVideo.src = URL.createObjectURL(blob); |
| recordedVideo.style.display = 'block'; |
| }; |
| mediaRecorder.start(); |
| startRecordingButton.disabled = true; |
| stopRecordingButton.disabled = false; |
| errorElement.textContent = ''; |
| } catch (err) { |
| handleError(err); |
| } |
| }); |
| |
| stopRecordingButton.addEventListener('click', () => { |
| mediaRecorder.stop(); |
| startRecordingButton.disabled = false; |
| stopRecordingButton.disabled = true; |
| }); |
| </script> |
| </body> |
| </html> |
