如果是视频这些媒体元素，无法正常显示
qiushaocloud opened this issue · 6 comments
qiushaocloud commented
Describe the bug
希望想办法能解决下
Steps to reproduce
No response
System Info
chromeLogs
No response
Validations
- Read the FAQ.
- Read the Contributing Guidelines.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.
wqcstrong commented
截图看下
qiushaocloud commented
媒体资源为 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
感谢反馈。出于多方面原因的考虑，Page 页面渲染的内容不是 “截屏、录屏”，是把客户端当前的 outerHTML 放在调试端的 iframe 中渲染的，另外 iframe 也是禁止执行 js。
wqcstrong commented
关于 Page 的其他信息请参考：https://www.pagespy.org/#/docs/faq#page-principle
qiushaocloud commented
好吧，那希望录屏功能可以支持
我提供个思路：
服务器端起 webrtc 服务且支持流的录制
客户端通过点击共享屏幕，获取到屏幕流后，使用WebRtc和服务器进行SDP协商后就能实时共享屏幕
如果客户端加载了离线组件，则服务器可以先进行流的临时录制，等用户进行上传后才转成真实的录制文件，以供回放使用