问题描述
问题:
在我的 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 分钟的视频。
解决方法
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);
}