整合vxgPlayer使chrome支持vxg_media_player播放rtsp視頻

 

目前有一個關於接入海康監控進行視頻融合的項目需求，按理說在前端技術發展如此迅速的今天，使用web播放一個視頻應該是不算什么難事，只是萬事都有意外，因很多視頻廠家的監控數據都不是普通的mp4啥的，所以使用普通的object 或者video 是播放不了的，必須需要一些額外的插件進行支持，今天我們就來加載一個rtsp格式的視頻

 

文章目錄

• 一、安裝合適的瀏覽器
• 二、安裝VXG Media Player
• 三、下載vxgPlayer插件
• 四、創建項目測試

 

一、安裝合適的瀏覽器

首選安裝一個合適的瀏覽器,我選擇的是72.0.3626.119版本的（因插件不支持高版本chrome）

也可以安裝60.0.3080版本的（只是我試過后來的cesium不支持過低版本瀏覽器）所以最后決定使用了72.0.3626.119版本的

72.0.3626.119版本瀏覽器資源雲盤下載提取碼: 8bha

60.0.3080版本瀏覽器資源雲盤下載提取碼: oy20

這里安裝低版本瀏覽器需要注意的是要設置一下不允許自動更新，否則安裝成功后瀏覽器自動會更新為最新版本

二、安裝VXG Media Player

下載VXG Media Player 雲盤下載 提取碼：dc4h

然后將其解壓至任意目錄

選擇右上角按鈕> 擴展程序

點擊加載已解壓的擴展程序（就是一步解壓的文件目錄）

三、下載vxgPlayer插件

現在我們需要下載一個vxgPlayer.js插件，直接去大佬的github https://github.com/VideoExpertsGroup/VXG.Chrome-RTSP-Player下載后根據其readme執行一下打包操作即可生成一個dist目錄

其中vxgplayer-1.8.2.min.js 和``vxgplayer-1.8.2.min.css`就是我們所需的插件

如果怕麻煩可以直接雲盤下載 提取碼：uiga

四、創建項目測試

創建一個測試項目，引入上面獲取的js與css

    <script type="text/javascript" src="../video_play_plugins/vxgplayer-1.8.40.min.js"></script> 
    <link rel="stylesheet" href="../video_play_plugins/vxgplayer-1.8.40.min.css">

　　

同時將pnacl目錄拷入
pnacl雲盤下載 提取碼：hvk6

在頁面中增加

          <div class="vxgplayer" id="vxg_media_player1"
                 url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" autostart controls
                 avsync nmf-src="/video_play_plugins/pnacl/Release/media_player.nmf" nmf-path="media_player.nmf"
                 width="300" height="300">
            </div>

　　

【注意】其中nmf-src就是pnacl下的文件,這個一定要對，不如會有如下錯誤

最后methods中增加

          window.vxgplayer('vxg_media_player1').stop();
                window.vxgplayer('vxg_media_player1').src("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
                window.vxgplayer('vxg_media_player1').play();

　　

最后效果
好啦完整代碼是這樣子的

　　

<template>
    <div class="test-page">
       <span> 測試video 視頻資源獲取與播放</span>
        <div @click="playVideo" class="btn-vis">點擊播放視頻</div>
        <div class="video-warp" v-show="videoWarpShow">
            <div @click="closeV" class="close">x</div>
            <div class="vxgplayer" id="vxg_media_player1"
                 url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" autostart controls
                 avsync nmf-src="video_play_plugins/pnacl/Release/media_player.nmf" nmf-path="media_player.nmf"
                 width="300" height="300">
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: "testVlcPlay",
        data(){
            return{
                videoWarpShow:false
            }
        },
        methods:{
            playVideo(){
                this.videoWarpShow = true;
                // 設置url 播放 ---添加到事件隊列在下一個tick執行，避免 TypeError: t.module.postMessage is not a function
                this.$nextTick(() => {
	                window.vxgplayer('vxg_media_player1').stop();
	                window.vxgplayer('vxg_media_player1').src("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
	                window.vxgplayer('vxg_media_player1').play();
				})
            },
        },
        destroy(){
            window.vxgplayer('vxg_media_player1').dispose();
        }
    }
</script>

　　

ok 到這里問題算是解決了，當初也是用過什么Streamedian，html5_rtsp_player這個測試當時需要安裝https://streamedian.com/最后沒有成功

也花費了大量時間去尋求其他解決方案，都沒有找到好的方法，所以在此記錄希望為有同樣需求的小伙伴提供一點思路，如大家有更好解決方案請分享謝謝。