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

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

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

AccesstoXMLHttpRequestat’ws://192.168.99.118:8080/ws-flv/hls/w1nW5g4Mg.flv?k=w1nW5g4Mg.745b0bf8ef27f7f4ca’ from origin ‘http://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端口即可。

 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青犀视频自主研发的一套集流媒体点播、转码、管理、直播、录像、检索、时移回看于一体的一套完整的商用流媒体服务器软件解决方案。