RTMP协议视频直播点播平台EasyDSS播放WS-FLV视频流报AccesstoXMLHttpRequestat‘ws错误

TSINGSEE青犀视频团队研发在更新升级视频平台时，都增加了WS-FLV的播放格式，之前的博文解决过EasyGBS新版ws_flv视频流无法播放问题，EasyDSS视频直播点播平台更新后也支持ws_flv视频流播放。

开发EasyDSS支持ws_flv视频流时，内部在做测试，也遇到了跟EasyGBS一样的问题——ws_flv视频流无法播放，但这个原因并不相同。我习惯于打开开发模式检查，果然发现了报错：

Accesstoat’ws://192.168.99.118:8080/ws-flv/hls/w1nW5g4Mg.flv?k=w1nW5g4Mg.745b0bf8ef27f7f4ca’ from origin ‘//192.168.99.118:8080’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

分析问题

错误信息显示，我们要播放的视频流为跨域视频流，意味着不能直接访问资源，也就无法播放视频。之前写过关于跨域的文章，大家可以参考下：EasyNVR如何解决视频流Ajax跨域访问的问题。

解决问题

跨域问题的解决比较简单，找到对应的播放组件把IP端口改为代理的服务器IP端口即可。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

onChange(val) { this.onClose()   if (val === 'WS-FLV'||this.isH264) {   this.isShow = false   } else {   this.isShow = true   }   this.videoUrl = undefined   setTimeout(() => {   if (val === 'WS-FLV') {   if (location.protocol.indexOf('https') !== -1) {   this.videoUrl = `wss://${'demo.easydss.com:10080'}` + this.sessionData['WS-FLV']   } else {   this.videoUrl = `ws://${'demo.easydss.com:10080'}` +this.sessionData['WS-FLV']   }   this.player = new WasmPlayer('','vod-dlg');   this.player.play(this.videoUrl, 1)   } else if (val === 'FLV') {   this.videoUrl = this.sessionData['HTTP-FLV']   if (this.isH264) {   this.player = new WasmPlayer('','vod-dlg');   this.player.play(this.videoUrl, 1)   }   } else if (val === 'RTMP') {   this.videoUrl = this.sessionData['RTMP']   } else {   this.videoUrl = this.sessionData['HLS']   if (this.isH264) {   this.player = new WasmPlayer('','vod-dlg');   this.player.play(this.videoUrl, 1)   }   }   }, 300);   },

　　

 

修改IP端口之后，则服务器不再接收跨域地址，视频流就会正常显示：

EasyDSS流媒体解决方案是由TSINGSEE青犀视频自主研发的一套集流媒体点播、转码、管理、直播、录像、检索、时移回看于一体的一套完整的商用流媒体服务器软件解决方案。