Search code examples
corsrtmpclappr

Play streaming RTMP video with clappr is blocked by CORS

I am trying to play streaming video on HTML using clappr, but whet trying to load the stream through rtmp the browser, (any browser), shows this error:

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.

I understand that the CORS policy blocks the rtmp because is a different port (1935) than the one on the web (443) even when the resource is in the same server.

Also, reading the error, I understand that it does not matter that my server is returning Access-Control-Allow-Origin *, (I know it's not the best practice), the browser will prevent the resource from loading because rtmp is not among the supported protocols.

Why am I using clappr? Because the stream I'm trying to play is a 360 video, and clapper is a pretty easy way to play 360 video on the web.

The version of clappr is 0.3.13. My server is an Ubuntu 20.04 with Apache 2.4.41.

Clappr-video360 plugin Clappr V0.3.13 download

My code is actually simple:

<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>

I have been researching a lot, tested with different browsers, tried disabling the cors policy in Chrome and Opera, but cannot find a solution even for my testing.

How can I do to stop this error to happen?

I would be really thankful for any help or suggestion.

Solution

  • It's not something about CORS, because your stream is RTMP, which is not supported by browser now (at 2021.12).

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

    For vod, you can use HTTP-MP4, or HTTPS-MP4, or HLS. Please do some search, it's easy to use <video> tag to play it.

    For live streaming, please use HTTP-FLV, HLS or DASH etc, please see this post.