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 ‘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青犀視頻自主研發的一套集流媒體點播、轉碼、管理、直播、錄像、檢索、時移回看于一體的一套完整的商用流媒體服務器軟件解決方案。