整合vxgPlayer使chrome支持vxg_media_player播放rtsp视频

梦里梦外; 2023-05-21 10:23 24阅读 0赞

> 目前有一个关于接入海康监控进行视频融合的项目需求，按理说在前端技术发展如此迅速的今天，使用web播放一个视频应该是不算什么难事，只是万事都有意外，因很多视频厂家的监控数据都不是普通的mp4啥的，所以使用普通的object 或者video 是播放不了的，必须需要一些额外的插件进行支持，今天我们就来加载一个rtsp格式的视频

### 文章目录 ###

*   *   *  一、安装合适的浏览器
         *  二、安装VXG Media Player
         *  三、下载vxgPlayer插件
         *  四、创建项目测试

### 一、安装合适的浏览器 ###

首选安装一个合适的浏览器,我选择的是`72.0.3626.119`版本的（因插件不支持高版本chrome）  
![浏览器版本][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]  
也可以安装`60.0.3080`版本的（只是我试过后来的cesium不支持过低版本浏览器）所以最后决定使用了`72.0.3626.119`版本的

`72.0.3626.119`版本浏览器资源[云盘下载][Link 1]提取码: 8bha

`60.0.3080`版本浏览器资源[云盘下载][Link 2]提取码: oy20

这里安装低版本浏览器需要注意的是要设置一下不允许自动更新，否则安装成功后浏览器自动会更新为最新版本  
![设置禁止更新][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]

### 二、安装VXG Media Player ###

下载`VXG Media Player` [云盘下载][Link 3] 提取码：dc4h

然后将其解压至任意目录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]  
选择右上角按钮> 扩展程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]  
点击加载已解压的扩展程序（就是一步解压的文件目录）  
![加载已解压的扩展程序][20200420213223591.png]

### 三、下载vxgPlayer插件 ###

现在我们需要下载一个vxgPlayer.js插件，直接去[大佬的github https://github.com/VideoExpertsGroup/VXG.Chrome-RTSP-Player][github https_github.com_VideoExpertsGroup_VXG.Chrome-RTSP-Player]下载后根据其readme执行一下打包操作即可生成一个dist目录  
![在这里插入图片描述][20200420214135833.png]  
其中`vxgplayer-1.8.2.min.js` 和\`\`vxgplayer-1.8.2.min.css\`就是我们所需的插件

如果怕麻烦可以直接[云盘下载][Link 4] 提取码：uiga

### 四、创建项目测试 ###

创建一个测试项目，引入上面获取的js与css

同时将`pnacl`目录拷入![在这里插入图片描述][20200420215111193.png]  
[pnacl云盘下载][pnacl] 提取码：hvk6

在页面中增加

【注意】其中`nmf-src`就是`pnacl`下的文件,这个一定要对，不如会有如下错误  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 4]

最后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();

最后效果![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 5]  
好啦完整代码是这样子的

<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][html5_rtsp_player]这个测试当时需要安装https://streamedian.com/最后没有成功

也花费了大量时间去寻求其他解决方案，都没有找到好的方法，所以在此记录希望为有同样需求的小伙伴提供一点思路，如大家有更好解决方案请分享谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: /images/20230521/9e5bbf5132434b94b150c0c62c7ee60e.png
[Link 1]: https://pan.baidu.com/s/1-I7Qr88SMIeK1XJUZDopUw
[Link 2]: https://pan.baidu.com/s/19c0ENxRZMI-Lgsk-IwAdcw
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]: /images/20230521/a4d5d2d2de31450e84be309eea1cea70.png
[Link 3]: https://pan.baidu.com/s/1j2mj34YMPkuJXCjJbo5MmA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]: /images/20230521/91ce15cd23d84a779c9667ec63498a33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]: /images/20230521/068a751aed97483dbf80af18543605ab.png
[20200420213223591.png]: /images/20230521/36bf6cc48a7943f18913a2eb7381006c.png
[github https_github.com_VideoExpertsGroup_VXG.Chrome-RTSP-Player]: https://github.com/VideoExpertsGroup/VXG.Chrome-RTSP-Player
[20200420214135833.png]: /images/20230521/91034b22c7224654b5b159981611dabe.png
[Link 4]: https://pan.baidu.com/s/1Bqj5vir07Bs8fWN-k_wVjQ
[20200420215111193.png]: /images/20230521/acac29e3c751491581edf39c9b6d1390.png
[pnacl]: https://pan.baidu.com/s/1fkt-1qnWo0DtDcBM9W0oVg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 4]: /images/20230521/5ca072f74b4342558db47a72ad0b2a16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 5]: /images/20230521/6993cde692754a4c939c49a0cd2d1f8d.png
[html5_rtsp_player]: https://github.com/Streamedian/html5_rtsp_player