1、先看效果

vlc播放器目前支持在ie浏览器，以前低版本的火狐和谷歌也是可以的，不过现在新版本的已经不行了。以下是web端项目中在ie浏览器可以看到的画面。

2、下载vlc播放器

关于下载的话必须要下载32位的播放器，64位的在浏览器不支持，反正我的不可以，具体原因还不清楚。

这是我使用的版本，去官网下载即可：https://get.videolan.org/vlc/3.0.16/win32/vlc-3.0.16-win32.exe

3、代码实现播放

            <object
              type="application/x-vlc-plugin"
              id="vlc"
              events="True"
              width="34%"  //宽度
              height="30%"  //高度
            >
              <param
                name="mrl"
                value="rtsp://帐号:密码@IP:端口（默认为554）/cam/realmonitor"  //自己摄像头的rtsp地址
              />
            </object>

4、抓图

 

var result = vlc.video.takeSnapshot();  //调用此方法即可，默认下载地址在桌面上

以上的话就能实现在web端播放摄像头监控实时画面及抓图操作，使用搜狗和360的兼容模式也是可以的。

关于如何在object标签上覆盖内容，实现抓图按钮的放置在下一篇。

完结！