如何下载使用getDisplayMedia api录制的视频

Question

问题：在我的React应用程序中，当我将词干设置为视频标记并播放时，我使用navigator.mediaDevices.getDisplayMedia在应用程序中设置了屏幕录制。但当我尝试将其保存到本地机器时，它只节省了0分钟的视频。

这是我的密码。

const VideoCall = ({ match }) => {
const { params: { campaignPatienId, userId, id, meetingId, videoId } } = match;
const [mediaR,setMediaR] = useState(null);
const [recordingStarted,setRecordingStarted] = useState(false)

const handleRecording = async () =>{
const videoElem = document.querySelector("video");
var displayMediaOptions = {
video: {
cursor: "always"
},
audio: {
echoCancellation: true,
noiseSuppression: true,
sampleRate: 44100
}
};
try {
navigator.mediaDevices.getDisplayMedia(displayMediaOptions).then((strem)=>{
console.log(strem,"stream")
videoElem.srcObject = strem;
setRecordingStarted(true)
let mediaRecorder = new MediaRecorder(strem);

let chunks = [];
videoElem.onloadedmetadata= (e) =>{
videoElem.play();
}
mediaRecorder.ondataavailable = function (ev) {
console.log({ev})
chunks.push(ev.data)
}
mediaRecorder.onstop = (ev) => {
// window.clearTimeout(timoutStop);
let blob = new Blob(chunks, { type: "video/mp4" });
console.log(blob,"blob")
chunks = [];
strem.getTracks().forEach(function (track) {
track.stop();
});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'test.mp4';
a.click();
window.URL.revokeObjectURL(url);
}
mediaRecorder.start();
setMediaR(mediaRecorder)
});

} catch(err) {
console.error("Error: " + err);
}
}

const stopRecording = async () =>{
let currentRecorder = mediaR;
if (currentRecorder.state != "inactive") {
await currentRecorder.stop();
}
}

return (
<div className="row" style={{ height: '100%', width: '100%' }}>
<div className="col-md-12" >
<div className="row">
<div className="colHeader">
<h3>Chat with Client</h3>
<div class="create-user-button" >
<Link
to="/mychat">
Go to Chat Screen
</Link>
</div>
<div>
{recordingStarted ?  <button
type="button"
onClick={() => stopRecording()}
className="btn btn-default scoreOverview"
>
Download
</button>:  <button
type="button"
onClick={() => handleRecording()}
className="btn btn-default scoreOverview"
>
Record Video Call
</button>}

</div>
</div>
</div>
<video id="video" autoplay width="100%"></video>


</div>
</div>
)
}
export default withRouter(VideoCall)

有人能帮我解决这个问题吗。我尝试了很多，但它总是下载0分钟的视频。

Answer 1

WebRTC(getDisplayMedia(通常记录为webm。

我有一个在record.a.video 上运行的示例应用程序

在代码中(看起来与您的相似，但针对mimetype(：https://github.com/dougsillars/recordavideo/blob/main/public/index.js#L652

function download() {
var blob = new Blob(recordedBlobs, {type: 'video/webm'});
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
}