如果是视频这些媒体元素，无法正常显示

qiushaocloud commented 2 months ago

Describe the bug

希望想办法能解决下

Steps to reproduce

No response

System Info

chrome

Logs

No response

Validations

[X] Read the FAQ.
[X] Read the Contributing Guidelines.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

wqcstrong commented 2 months ago

截图看下

qiushaocloud commented 2 months ago

媒体资源为 m3u8 时，视频时这样的

媒体资源为 mp4 时，视频没跟着同步播放

下面是我的测试 demo，地址参数 playUrl=m3u8 和 playUrl=mp4 控制播放的资源 http://localhost:13080/client-pages/other-demos/spy-test-demo.html?playUrl=m3u8 http://localhost:13080/client-pages/other-demos/spy-test-demo.html?playUrl=mp4

测试 demo 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spy Hls Test Demo</title>
    <!-- 引入 hls.js -->
    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

    <!-- 引入 PageSpy 插件 -->
    <script crossorigin="anonymous" src="http://localhost:6752/page-spy/index.min.js"></script>
    <!-- 插件（非必须，但建议使用） -->
    <script crossorigin="anonymous" src="http://localhost:6752/plugin/data-harbor/index.min.js"></script>
    <script crossorigin="anonymous" src="http://localhost:6752/plugin/rrweb/index.min.js"></script>
    <script>
        window.$harbor = new DataHarborPlugin();
        window.$rrweb = new RRWebPlugin();

        [window.$harbor, window.$rrweb].forEach(p => {
          PageSpy.registerPlugin(p)
        })

        window.$pageSpy = new PageSpy();
    </script>

    <style>
        #videoPlayer {
            width: 100%;
            max-width: 600px;
        }
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <h1>HLS 播放器</h1>
    <video id="videoPlayer" controls></video>
    <div class="controls">
        <button id="playButton">播放</button>
        <button id="pauseButton">暂停</button>
    </div>

    <script>
        const videoPlayer = document.getElementById('videoPlayer');
        const playButton = document.getElementById('playButton');
        const pauseButton = document.getElementById('pauseButton');

        const urlParams = new URLSearchParams(window.location.search);
        let playUrl = 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4';
        if (urlParams.get('playUrl')) {
            playUrl = urlParams.get('playUrl');
            playUrl === 'mp4' && (playUrl = 'https://img.qunliao.info/4oEGX68t_9505974551.mp4');
            playUrl === 'm3u8' && (playUrl = 'https://ali-m-l.cztv.com/channels/lantian/channel002/1080p.m3u8');
        }

        if (playUrl.indexOf('.m3u8') > -1 && Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(playUrl);
            hls.attachMedia(videoPlayer);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                videoPlayer.play();
            });
        } else {
            videoPlayer.src = playUrl;
            videoPlayer.addEventListener('loadedmetadata', function () {
                videoPlayer.play();
            });
        }

        playButton.addEventListener('click', () => {
            videoPlayer.play();
        });

        pauseButton.addEventListener('click', () => {
            videoPlayer.pause();
        });
    </script>
</body>
</html>

wqcstrong commented 2 months ago

感谢反馈。出于多方面原因的考虑，Page 页面渲染的内容不是 “截屏、录屏”，是把客户端当前的 outerHTML 放在调试端的 iframe 中渲染的，另外 iframe 也是禁止执行 js。

wqcstrong commented 2 months ago

关于 Page 的其他信息请参考：https://www.pagespy.org/#/docs/faq#page-principle

qiushaocloud commented 2 months ago

好吧，那希望录屏功能可以支持

我提供个思路：服务器端起 webrtc 服务且支持流的录制客户端通过点击共享屏幕，获取到屏幕流后，使用WebRtc和服务器进行SDP协商后就能实时共享屏幕如果客户端加载了离线组件，则服务器可以先进行流的临时录制，等用户进行上传后才转成真实的录制文件，以供回放使用

wqcstrong commented 2 months ago

这个 issue 我先关了，关于提供的思路可以在 #223 讨论

HuolalaTech / page-spy-web