Created
October 16, 2023 07:04
-
-
Save Messiahhh/35a33a899460cab5e7d2eef3ecc9cc4a to your computer and use it in GitHub Desktop.
屏幕录制以及前端合成
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <button id="start">开始录制</button> | |
| <button id="end">结束录制</button> | |
| <script> | |
| const startBtn = document.querySelector('#start') | |
| const endBtn = document.querySelector('#end') | |
| startBtn.addEventListener('click', () => { | |
| main(); | |
| }) | |
| async function main() { | |
| const systemMedia = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }) | |
| const userMedia = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) | |
| const systemVideoMedia = new MediaStream(systemMedia.getVideoTracks()) | |
| const systemAudioMedia = new MediaStream(systemMedia.getAudioTracks()) | |
| const webcamMedia = new MediaStream(userMedia.getVideoTracks()) | |
| const audioMedia = new MediaStream(userMedia.getAudioTracks()) | |
| const audioContext = new AudioContext(); | |
| const source1 = audioContext.createMediaStreamSource(systemAudioMedia) | |
| const source2 = audioContext.createMediaStreamSource(audioMedia) | |
| const destination = audioContext.createMediaStreamDestination(); | |
| source1.connect(destination) | |
| source2.connect(destination) | |
| const screenVideo = document.createElement('video') | |
| const webcamVideo = document.createElement('video') | |
| screenVideo.srcObject = systemMedia; | |
| webcamVideo.srcObject = webcamMedia | |
| screenVideo.play() | |
| webcamVideo.play() | |
| const canvas = document.createElement('canvas'); | |
| const settings = systemMedia.getVideoTracks()[0].getSettings() | |
| // const canvas = new OffscreenCanvas(settings.width, settings.height) | |
| const ctx = canvas.getContext('2d') | |
| console.log(screenVideo) | |
| canvas.width = settings.width; | |
| canvas.height = settings.height; | |
| document.body.appendChild(canvas) | |
| const canvasMedia = canvas.captureStream(); | |
| const canvasRecorder = new MediaRecorder(new MediaStream([...canvasMedia.getVideoTracks(), ...destination.stream.getAudioTracks(),])) | |
| function draw() { | |
| setTimeout(() => { | |
| ctx.drawImage(screenVideo, 0, 0, canvas.width, canvas.height) | |
| ctx.drawImage(webcamVideo, 0, 0) | |
| draw() | |
| }, 1000 / 30); | |
| // window.requestAnimationFrame(() => { | |
| // ctx.drawImage(screenVideo, 0, 0, canvas.width, canvas.height) | |
| // ctx.drawImage(webcamVideo, 0, 0) | |
| // draw() | |
| // }) | |
| } | |
| draw() | |
| canvasRecorder.start() | |
| canvasRecorder.addEventListener('dataavailable', (evt) => { | |
| const anchor = document.createElement('a'); | |
| anchor.href = URL.createObjectURL(evt.data); | |
| anchor.download = 'result.webm' | |
| anchor.click() | |
| }) | |
| endBtn.addEventListener('click', () => { | |
| canvasRecorder.stop(); | |
| }) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment