问题： 在我的反应应用程序中，我使用 navigator.mediaDevices.getUserMedia 和 navigator.mediaDevices.getUserMedia 来记录浏览器的屏幕。在那里，即使我停止了 recordStop 中的所有曲目，停止共享按钮也会显示（请参阅下图）。
这是我的代码。
const VideoCall = ({ match }) => {
const [mediaR, setMediaR] = useState(null);
const [recordingStarted, setRecordingStarted] = useState(false)
const [recordingStoped, setRecordingStoped] = useState(false)
const startRecording = async () => {
let micNumber = 0;
var displayMediaOptions = {
video: {
cursor: "always"
},
audio: {
echoCancellation: true,
noiseSuppression: true,
sampleRate: 44100
}
};
try {
if ("getDisplayMedia" in navigator.mediaDevices) {
navigator.mediaDevices.getDisplayMedia(displayMediaOptions).then((screenStream) => {
navigator.mediaDevices.enumerateDevices().then((devices) => {
devices.forEach(function (device) {
if (device.kind == "audioinput") {
micNumber++;
}
});
if (micNumber == 0) {
console.log("No MIcs")
} else {
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (micStream) {
var composedStream = new MediaStream();
screenStream.getVideoTracks().forEach(function (videoTrack) {
composedStream.addTrack(videoTrack);
});
if (screenStream.getAudioTracks().length > 0) {
//merge the system audio with the mic audio
var context = new AudioContext();
var audioDestination = context.createMediaStreamDestination();
const systemSource = context.createMediaStreamSource(screenStream);
const systemGain = context.createGain();
systemGain.gain.value = 1.0;
systemSource.connect(systemGain).connect(audioDestination);
if (micStream && micStream.getAudioTracks().length > 0) {
const micSource = context.createMediaStreamSource(micStream);
const micGain = context.createGain();
micGain.gain.value = 1.0;
micSource.connect(micGain).connect(audioDestination);
}
audioDestination.stream.getAudioTracks().forEach(function (audioTrack) {
composedStream.addTrack(audioTrack);
});
} else {
//add just the mic audio
micStream.getAudioTracks().forEach(function (micTrack) {
composedStream.addTrack(micTrack);
});
}
setRecordingStarted(true)
let mediaRecorder = new MediaRecorder(composedStream);
let chunks = [];
mediaRecorder.ondataavailable = function (ev) {
chunks.push(ev.data)
}
mediaRecorder.onstop = (ev) => {
let blob = new Blob(chunks, { type: 'video/webm' });
chunks = [];
composedStream.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.webm';
a.click();
setTimeout(function () {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
setRecordingStarted(false)
setMediaR(null)
}, 1000)
}
mediaRecorder.start();
setMediaR(mediaRecorder)
composedStream.getVideoTracks()[0].onended = function () {
//do something
}
})
//
}
})
});
} else {
alert("Sorry!.Your browser does not support Recording Feature")
}
} catch (err) {
alert("Sorry!.Your browser does not support Recording Feature")
}
}
const stopRecording = async () => {
let currentRecorder = mediaR;
setRecordingStoped(true);
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
style={{ backgroundColor: 'transparent', textDecoration: 'underline' }}
to={`/campaign/info/${id}/patient/${userId}/chat/${campaignPatienId}`}>
Go to Chat Screen
</Link>
</div>
<div>
{startingTime ?
recordingStarted ? <button
type="button"
onClick={() => stopRecording()}
className="btn btn-default btn-sm-gray"
>
Stop Recording
</button> : <button
type="button"
onClick={() => startRecording()}
className="btn btn-default btn-sm-gray"
>
Start Recording
</button> : null}
</div>
</div>
</div>
<div style={{ height: '95%', width: '100%' }}>
</div>
</div>
</div>
)
}
export default withRouter(VideoCall)
当我在弹出窗口选择屏幕时勾选共享音频选项时，我发现问题来了。我尝试了很多方法来找出在录制停止时从代码中清除该问题的方法。但我无法这样做。有人可以帮我解决这个问题吗？谢谢