0

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

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

4

0 回答 0