vue-cli3+videoJs 解決pc端rtmp視頻流實時播放

    公司要作一個攝像頭的實時預覽，而後視頻格式是rtmp格式的直播流，查了一下相關資料，這種格式的視頻流目前只有flash播放器能夠播放，videoJs繼承了視頻流的處理，果斷開工，一路走來一路坑，完工記錄一下。

    首先，videoJs6x以上版本好像淘汰flash了，各類報錯，換成5x版本就能夠了。第一步，安裝依賴包。

npm install video.js@5.6.0 -S複製代碼

    核心組件代碼以下：

<template>
    <div class="video">
        <video :id="videoId"
               class="video-js vjs-default-skin vjs-big-play-centered"
                 preload="auto"
                 autoplay
                 controls
                 style="width: 100%;height: 100%;"
                 data-setup='{"html5" : { "nativeTextTracks" : false }}'>
            <source :src="videoSrc" type="rtmp/flv">
        </video>
    </div>
</template>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
videojs.options.flash.swf = SWF_URL
export default {
    name:'QnvideoPlayer',
    props:{
        videoId:{
            type:String,
            default:'hot',
        },
        videoSrc:{
            type:String,
            default:'rtmp://202.69.69.180:443/webcast/bshdlive-pc'
        },
        videoShow:{
            type:Boolean,
            default:true,
        } 
   },
    data(){
        return {
           videoPlayer: undefined,
        }
    },
    created(){
    },
    mounted(){ 
       this.$nextTick(()=>{ 
           if(this.videoShow){
                this.selectVideo(); 
           }
       })
    },
    destroyed(){
        console.log('銷燬-----------------')
        this.disposeVideo();
    },
    methods: {
      selectVideo() {
            this.videoPlayer = videojs(this.videoId);// 關聯video標籤的id
            console.log(this.videoPlayer)
            this.videoPlayer.src({
               src: this.videoSrc,
               type: 'rtmp/flv'
            });
            this.videoPlayer.play();
            this.videoPlayer.pause();
        },
        disposeVideo(){
            if(this.videoPlayer){
                this.videoPlayer.dispose()
            } 
       } 
     },
    components:{            }, 
    watch:{
        videoShow(n){ 
           if(n){
               this.selectVideo();
            }else{
                this.disposeVideo();
            } 
       },
       videoSrc(){
            this.selectVideo();
       } 
   }
}
</script>
<style lang="less" scoped>
.video{
    width: 300px;
    height: 400px;
}
</style>

複製代碼

調試過程當中有兩個問題比較棘手：

1.        No compatible source was found for this media.

將如圖的flash改爲默認容許就能夠了

2.      ./node_modules/videojs-swf/dist/video-js.swf 1:4 Module parse failed: Unexpected character '�' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file

    這個是由於webpack識別不了.swf格式的文件，在vue.config.js裏面配置一下就能夠了,代碼以下：

configureWebpack:(config)=>{ 
       config.module.rules.push({ 
           test: /\.(swf|ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
            loader: 'file-loader', 
       })
},複製代碼

最後附上用於測試的播放rtmp直播流地址：

rtmp://202.69.69.180:443/webcast/bshdlive-pc

rtmp://58.200.131.2:1935/livetv/hunantv

若有問題，歡迎探討，若是滿意，請手動點贊，謝謝！🙏