使用 clappr 播放流式 RTMP 视频被 CORS 阻止

Question

我正在尝试使用 clappr 在 HTML 上播放流媒体视频，但是尝试通过浏览器（任何浏览器）的 rtmp 加载流时，显示此错误：

Access to video at 'rtmp://my.domain.com/vod/mp4:360_bridge.mp4' from origin 'https://my.domain.com' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

我知道 CORS 策略会阻止 rtmp，因为即使资源在同一台服务器上，它的端口 (1935) 与 Web 上的端口 (443) 不同。

此外，阅读错误，我了解到我的服务器返回 Access-Control-Allow-Origin * 并不重要，（我知道这不是最佳做法），浏览器将阻止资源加载因为 rtmp 不在支持的协议之列。

为什么我要使用 clappr？因为我要播放的流是 360 度视频，而 clapper 是一种在网络上播放 360 度视频的非常简单的方法。

clappr的版本是0.3.13。我的服务器是 Ubuntu 20.04 和 Apache 2.4.41。

Clappr-video360 plugin Clappr V0.3.13 download

我的代码其实很简单：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
    <title>CLappr video</title>
</head>
<body>
    <div id="player"></div>

    <script src="../../public/assets/js/clappr.js"></script>
    <script src="../../public/assets/js/clappr-video360.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/video-dev/clappr-rtmp-plugin@latest/dist/rtmp.min.js"></script>

    <script>
        var video = 'rtmp://my.domain.com/vod/mp4:360_bridge.mp4'

        var PlayerInstance = new Clappr.Player({
            source: video,
            plugins: {
                container: [Video360],
                'playback': [RTMP]
            },
            parentId: '#player',
        })

        PlayerInstance.getPlugin('click_to_pause').disable();
    </script>
</body>

我做了很多研究，用不同的浏览器进行了测试，尝试在 Chrome 和 Opera 中禁用 cors 策略，但即使是我的测试也找不到解决方案。

我怎样才能阻止这个错误的发生？

如果有任何帮助或建议，我将不胜感激。

Answer 1

不是CORS的问题，因为你的流是RTMP，现在浏览器不支持（2021.12）

var video = 'rtmp://my.domain.com/vod/mp4:360_bridge.mp4'

对于点播，您可以使用 HTTP-MP4，或 HTTPS-MP4，或 HLS。请搜索一下，使用 <video> 标签播放它很容易。

直播请使用HTTP-FLV、HLS或DASH等，请看this post。

使用 clappr 播放流式 RTMP 视频被 CORS 阻止

Play streaming RTMP video with clappr is blocked by CORS

rtmp

cors

clappr