WebRTC记录音视频流( 二 ) _视频流

let recordedBlobs;const recordedVideo = document.querySelector('video#recorded');const playButton = document.querySelector('button#play');playButton.addEventListener('click', () => {const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });recordedVideo.src = https://www.isolves.com/it/rj/ysp/2022-02-17/null;recordedVideo.srcObject = null;recordedVideo.src = window.URL.createObjectURL(superBuffer);recordedVideo.controls = true;recordedVideo.play();});HTML<link rel="stylesheet" href=https://www.isolves.com/it/rj/ysp/2022-02-17/"./index.css">

CSS

button {margin: 0 3px 10px 0;padding-left: 2px;padding-right: 2px;width: 99px;}button:last-of-type {margin: 0;}video {vertical-align: top;--width: 25vw;width: var(--width);height: calc(var(--width) * 0.5625);}video:last-of-type {margin: 0 0 20px 0;}video#gumVideo {margin: 0 20px 20px 0;}

JAVAScript

let mediaRecorder;let recordedBlobs;const recordedVideo = document.querySelector('video#recorded');const recordButton = document.querySelector('button#record');recordButton.addEventListener('click', () => {if (recordButton.textContent === '开始记录') {startRecording();} else {stopRecording();recordButton.textContent = '开始记录';playButton.disabled = false;}});const playButton = document.querySelector('button#play');playButton.addEventListener('click', () => {const superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });recordedVideo.src = https://www.isolves.com/it/rj/ysp/2022-02-17/null;recordedVideo.srcObject = null;recordedVideo.src = window.URL.createObjectURL(superBuffer);recordedVideo.controls = true;recordedVideo.play();});function handleDataAvailable(event) {if (event.data && event.data.size > 0) {recordedBlobs.push(event.data);}}function startRecording() {recordedBlobs = [];try {mediaRecorder = new MediaRecorder(window.stream);} catch (e) {console.error('创建MediaRecorder时异常:', e);}recordButton.textContent = '停止记录';playButton.disabled = true;mediaRecorder.ondataavailable = handleDataAvailable;mediaRecorder.start();}function stopRecording() {mediaRecorder.stop();}function handleSuccess(stream) {recordButton.disabled = false;window.stream = stream;const gumVideo = document.querySelector('video#gum');gumVideo.srcObject = stream;}async function init(constraints) {try {const stream = await navigator.mediaDevices.getUserMedia(constraints);handleSuccess(stream);} catch (e) {console.error('navigator.getUserMedia error:', e);}}document.querySelector('button#start').addEventListener('click', async () => {document.querySelector('button#start').disabled = true;const constraints = {audio: {},video: {width: 1280, height: 720}};await init(constraints);});