《浏览器播放RTSP方案》之 VLC插件播放RTSP视频流

目前网页对于RTSP流直接播放不支持,目前有插件和转流两种方式,这里针对vlc插件播放做一个简单的梳理。

查看官网教程 vlcWebPlugin, 得知其浏览器支持情况:
浏览器支持
这是因为因为谷歌启用了新的插件PPAPI,认为新的更安全,所以NPAPI设置在chrome45及以后不再支持。

鉴于开发者主要使用chrome,所以我们需要首先安装一个v44版本的chrome浏览器。而且我们电脑上基本已经有一个最新版本的chrome浏览器了,所以这里需要同时安装不同版本的chrome。

多版本chrome安装

参考文章 一台电脑安装多个版本google Chorme方案,进行对应版本安装。主要分为两步:

  1. 版本文件下载和解压
  2. 安装路径 user-data-dir 设置

安装vlc软件

vlc官网 下载vlc软件进行安装,安装过程中需要勾选插件支持:
请添加图片描述

开启浏览器的NPAPI设置

浏览器地址栏输入: chrome://flags/#enable-npapi,找到 启用NPAPI插件 ,点击 启用

编写测试页

新建一个index.html文件,如下:

// index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test VLC Plugins</title>
</head>
<body>
  <!--[if IE]>
   <object type='application/x-vlc-plugin' id='vlc' events='True'
       classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.x" width="720" height="540">
          <param name='mrl' value='rtsp://admin:admin@10.10.10.10/264/' />
          <param name='volume' value='50' />
          <param name='autoplay' value='true' />
          <param name='loop' value='false' />
          <param name='fullscreen' value='false' />
    </object>
<![endif]-->
  <!--[if !IE]><!-->
  <object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540"
    pluginspage="http://www.videolan.org"
    codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
    <param name='mrl' value='rtsp://admin:admin@10.10.10.10/264/' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='controls' value='false' />
    <param name='fullscreen' value='true' />
  </object>
  <!--<![endif]-->
</body>
</html>

此时,我们用chrome44打开,页面还是会出现插件图标,鼠标悬浮,提示如下:
vlc插件许可

右键 运行此插件, 视频即可正常播放。那么有没有方式可以打开立即播放呢,
这就需要设置该插件 始终允许运行

插件设置

地址栏输入: chrome://plugins/, 找到 VLC Web Plugin,勾选 始终允许运行

其他问题

  1. 安装chrome44版本后打开始终显示
    请添加图片描述
    可以在快捷方式的目标地址后加入
    –no-sandbox, 如下:
    --no-sandbox

最后

希望这篇文章对你们有用, happy coding~

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值