即使所有曲目关闭，停止共享按钮也不会消失？

问题描述

问题： 在我的反应应用程序中，我使用 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)

当我在弹出窗口选择屏幕时勾选共享音频选项时，我发现这个问题即将出现。我尝试了很多方法来找出在录制停止时从代码中清除该问题的方法。但我无法这样做。有人可以帮我解决这个问题吗？谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）