前端 - vue项目中用flv.js插件实现websocket形式的数据拉流，呈现视频在页面上，但是一直报类型错误，不知道为啥？

Question

vue项目中用flv.js插件实现websocket形式的数据拉流，呈现在页面上，但是一直报类型错误，不知道为啥。
组件代码如下：
<template>
<div>

<div class="row" style=" height:500px;width: auto;background-color: #1c84c6">
    <video ref="videoElement" class="centeredVideo" id="myPlayer" preload="auto" type="flv" controls autoplay muted
        style="width: 100%;height: 100%" @click="handleClick"></video>
</div>

</div>
</template>
<script>
import flvjs from "flv.js/dist/flv.js";
export default {

props: ['videoUrl'],
components: {

},
data() {
    return {
        flvPlayer: null,

    }
},
computed: {

},
created() {

},
mounted() {
    this.init();

},
destroyed() {
    this.stop();

},
methods: {
    init() {
        console.log('初始化我看下地址', this.videoUrl);
        let videoElement = this.$refs.videoElement
        if (flvjs.isSupported()) {
            this.flvPlayer = flvjs.createPlayer({
                type: 'flv',                    //媒体类型
                url: this.videoUrl,    //flv格式媒体URL ws://121.36.167.167/webSocket/webSocket/140588574059936/662431624
                isLive: true,                    //数据源是否为直播流
                hasAudio: false,                //数据源是否包含有音频
                hasVideo: true,                    //数据源是否包含有视频
                enableStashBuffer: true        //是否启用缓存区
            }, {
                enableWorker: false,             //不启用分离线程
                enableStashBuffer: false,         //关闭IO隐藏缓冲区
                autoCleanupSourceBuffer: true     //自动清除缓存
            });
            this.flvPlayer.attachMediaElement(videoElement);    //将播放实例注册到节点
            this.flvPlayer.load();                     //加载数据流
            setTimeout(() => {
                this.flvPlayer.play();                    //播放数据流

            }, 2000);
        }

    },
    stop() {
        this.flvPlayer.pause();                        //暂停播放数据流                            
        this.flvPlayer.unload();                        //取消数据流加载
        this.flvPlayer.detachMediaElement();            //将播放实例从节点中取出
        this.flvPlayer.destroy();                    //销毁播放实例
    },
    handleClick() {
        console.log('我被点击了')
    }

},

}
</script>
<style scoped></style>
页面调试后报这些错误，不知道为啥：

然后websocket传输的数据如下显示：

希望能显示视频画面

Answer 1

报错提示很明确:不支持的媒体类型, 说明你的websocket流并不是flv格式的视频流;
flv.js解析的是flv格式的视频流,确保你的视频流格式是flv，如果不是flv仍然想要用flv.js，可以通过ffmpeg等转码工具转码
视频测试demo地址: http://bilibili.github.io/flv.js/demo