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.
It's not something about CORS, because your stream is RTMP, which is not supported by browser now (at 2021.12).
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.