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? Do you know any other tool to play streaming 360 video on HTML5?
I would be really thankful for any help or suggestion.
Aucun commentaire:
Enregistrer un commentaire