使用 clappr 播放流式 RTMP 视频被 CORS 阻止
Posted
技术标签:
【中文标题】使用 clappr 播放流式 RTMP 视频被 CORS 阻止【英文标题】：Play streaming RTMP video with clappr is blocked by CORS 【发布时间】：2021-12-24 08:54:50 【问题描述】：我正在尝试使用clappr 在 html 上播放流式视频，但尝试通过 rtmp 浏览器（任何浏览器）加载流时显示此错误：
访问“rtmp://my.domain.com/vod/mp4:360_bridge.mp4”上的视频 来自原点“https://my.domain.com”已被 CORS 策略阻止： 跨源请求仅支持协议方案：http， 数据、铬、铬扩展、铬不受信任、https。
我了解 CORS 策略会阻止 rtmp，因为即使资源位于同一服务器中，它也是与 Web 上的端口 (443) 不同的端口 (1935)。
另外，阅读错误，我知道我的服务器返回 Access-Control-Allow-Origin * 并不重要，（我知道这不是最佳做法），浏览器会阻止资源加载，因为 rtmp不在支持的协议中。
我为什么要使用 clappr？因为我要播放的视频流是 360 度视频，而 clapper 是在网络上播放 360 度视频的一种非常简单的方法。
clappr 的版本是 0.3.13。 我的服务器是带有 Apache 2.4.41 的 Ubuntu 20.04。
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 策略，但即使我的测试也找不到解决方案。
如何阻止此错误发生？
如果有任何帮助或建议，我将不胜感激。
【问题讨论】：
【参考方案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。
【讨论】：
感谢您的回答，我一直在研究RTMP的错误方式，现在我明白了这个协议和Flash之间的关系以及为什么两者都死了。我会按照你的指示学习如何从视频标签中播放。 不客气，协议见this post，媒体服务器见here以上是关于使用 clappr 播放流式 RTMP 视频被 CORS 阻止的主要内容，如果未能解决你的问题，请参考以下文章
ExoPlayer 无法播放 Adobe 实时流编码器流式传输的音频/视频 (RTMP)
官方文档Nginx模块Nginx-Rtmp-Module学习笔记流式播放Live HLS视频
可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗？