如何解决使用 CORS 代理从嵌入的 YouTube 视频中截取屏幕截图的问题
我有一个在 iframe 中嵌入了 youtube 视频的网站。我想要实现的是让用户从视频中截取屏幕截图。我知道这是不可能的，因为 iframe，所以我试图找到一种方法将它加载到视频标签中。我通过使用 youtube-dl --get-url 命令获取视频的直接链接来做到这一点。然后我使用画布截取了屏幕截图，但是在尝试将其另存为图像时，我遇到了一个 cors 问题，试图用 cors 代理解决它。下面你可以看到我到现在为止所做的。
我在做
youtube-dl.exe --youtube-skip-dash-manifest -g "https://www.youtube.com/watch?v=sVPYIRF9RCQ&ab_channel=AndyMatthewsAndyMatthews"
结果：
然后可以将此 URL 添加到 HTML video-tag 并且它起作用。 然后我将视频绘制到画布元素中以截取屏幕截图。
直到这里一切都按预期工作。
现在我正在尝试将画布保存为图像
var canvas = document.getElementById("canvasPostcard");
var dataURL = canvas.toDataURL("image/png");
但是有一个cors问题。 我在视频标签中添加了 crossorigin="anonymous" 但视频根本不播放。
然后我使用了cors代理服务器来绕过这个问题。 我在 cloudflare 的一个工人中创建并像这样在本地运行它
但是我加载资源失败：服务器响应状态为 403 ()
如果我使用另一个 URL，例如 http://127.0.0.1:8787/?url=https://in.gr 它可以正常工作。
你知道这里的问题是什么吗？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
