JavaScript记录屏幕错误在移动设备上

Question

问题摘要： JavaScript解决方案在浏览器（Chrome，Edge，Firefox）的桌面版本上工作，而不是移动浏览器（Chrome，Safari）。

用于录制屏幕的 /基于vanilla-javascript的屏幕 - 屏幕 - recorder-29fff1cc7b00“ rel =“ nofollow noreferrer”>这个很棒的例子我能够构建一个在桌面浏览器上正常工作的原型。

但是，当对移动浏览器（iOS上的Chrome/Safari）进行测试时，有一个错误：

typeError：未定义不是功能（靠近 '... navigator.mediadevices.getDisplayMedia ...'）

下面是屏幕上按钮的HTML代码：

        <input id="btnStartRecording" class="btn btn-lg btn-primary col-4" onclick="startRecord()" value="Start Recording" type="button">
        <input id="btnStopRecording" class="btn btn-lg btn-primary col-4 invisible" onclick="stopScreen()" value="Stop Recording" type="button">
        <a id="btnDownloadRecording" href="#" class="btn btn-lg btn-primary col-4 text-white invisible">Download Video</a>

下面是一个隐藏的视频元素，可以保存录音，而录制脚本：

    <div>
        <video controls="true" style="display: none" id="videoResult" src=""></video>
    </div>
    <script> // client side recording script https://javascript.plainenglish.io/vanilla-javascript-based-screen-recorder-29fff1cc7b00
        let completeBlob = null
        let recorder = null
        let chunks = [];
        let stream = null
        async function startRecord() {
            chunks = []; // need to reset chucks each time recording is started

            try {

                stream = await navigator.mediaDevices.getDisplayMedia({
                    video: {
                        mediaSource: 'screen'
                    },
                })

                recorder = new MediaRecorder(stream);
                recorder.ondataavailable = (e) => chunks.push(e.data);
                recorder.start();
                recorder.onstop = onstop

                $("#btnStartRecording").addClass("invisible");
                $("#btnStopRecording").removeClass("invisible");
                $("#btnDownloadRecording").addClass("invisible");

            } catch (error) {

                navigator.getUserMedia = navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia || navigator.msGetUserMedia; 

                if (navigator.getUserMedia) {
                    navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
                        function (streamobj) {

                            recorder = new MediaRecorder(streamobj);
                            recorder.ondataavailable = (e) => chunks.push(e.data);
                            recorder.start();
                            recorder.onstop = onstop

                            $("#btnStartRecording").addClass("invisible");
                            $("#btnStopRecording").removeClass("invisible");
                            $("#btnDownloadRecording").addClass("invisible");

                            //var video = document.querySelector('video');
                            //video.srcObject = stream;
                            //video.onloadedmetadata = function (e) {
                            //    video.play();
                            //};
                        },
                        function (err) {
                            window.alert("#1 " + err)
                        }
                    );
                }
                else {
                    window.alert("#2 " + error)
                }
            }
        }


        async function stopScreen() {
            recorder.stop();
            //document.getElementById("stopBtn").style.display = "none";
            $("#btnStartRecording").removeClass("invisible");
            $("#btnStopRecording").addClass("invisible");
            stream.getTracks().forEach(function (track) {
                track.stop();
            });
        }

        function onstop() {
            console.log("onstop");
            completeBlob = new Blob(chunks, {
                type: chunks[0].type
            });
            $("#btnDownloadRecording").removeClass("invisible");
            let downloadButton = document.getElementById('btnDownloadRecording');
            let video = document.getElementById('videoResult');
            //video.style.display = 'block'
            video.src = URL.createObjectURL(completeBlob);
            //downloadButton.style.display = 'unset'
            downloadButton.href = URL.createObjectURL(completeBlob);
            downloadButton.download = Date.now() + '.mp4';
        }
    </script>

不熟悉API，我使用了一些我使用了一些因此，诸如 this 作为hange navigator.mediadevices.mediadevices.getdisplaymedia的参考。 “捕获”部分。但是显然，它仍然在移动设备上不起作用。访问后，执行 window.alert（“＃2” +错误）行，这意味着 if（navigator.getusermedia）评估为false。

进一步的挖掘找到 >说只有Safari有效，但我在Safari上进行了测试，并且使用相同的错误消息失败。

任何帮助都将受到赞赏！