网页播放rtsp视频流，rtsp播放，网页摄像头播放
程序员文章站
2022-07-01 09:53:44
...
网页显示摄像头的RTSP视频主要有两种方案：
一种是vlc，通过安装vlc3.0播放器，然后使用国产360浏览器来播放，不支持chrome等现代浏览器。
第二种是：vxg播放器
vxg是目前找到的最完美的解决方式
安装方式：
1，在谷歌商店安装vxg插件,需要*，或者在某些网站直接下载插件安装：
2，访问vxg的支持页面（api）：
https://www.videoexpertsgroup.com/nacl_player_api/#jsapi
3，下载压缩包
https://www.videoexpertsgroup.com/nacl_player_api/vxgplayer-1.8.54.zip
4，网页使用：
<!DOCTYPE html>
<html>
<head>
<title>Media Player PNaCl</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta name="author" content="videoexpertsgroup" />
<meta name="copyright" lang="ru" content="videoexpertsgroup" />
<meta name="description" content="Demo VXG Media Player for Chrome" />
<meta name="keywords" content="" />
<!-- vxgplayer -->
<script type="text/javascript" src="vxgplayer-1.8.54.min.js"></script>
<link href="vxgplayer-1.8.54.min.css" rel="stylesheet" />
<!-- demo page -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div class="content-absolute">
<div class="content">
<div id="vxg_media_player1" class="vxgplayer" width="300" height="240"
url="rtsp://192.168.1.11/user=admin&password=&channel=1&stream=0.sdp" aspect-ratio latency="10"
autostart controls avsync></div>
</div>
</div>
</div>
</body>
</html>5，放在服务器环境下，比如apache
6，打开浏览器访问该页面的服务器路径
7，附上重要api：看不懂自己翻译咯
- id - unique id of player
- class must be 'vxgplayer' - for automatically init all players after load body
- width - width of player, integer
- height - height of player, integer
- url - link to rtsp video
- nmf-src - link to plugin, default value: 'pnacl/Release/media_player.nmf'
- nmf-path - link to plugin, default value: 'media_player.nmf'
- latency - latency, integer
- autohide - autohide panel of the controls after, seconds
- volume - volume, float, Possible values: 0..1
- avsync - If attribute exists then avsync true. If attribute does not exist then avsync false
- controls - Panel with controls. If attribute exists then show controls. If attribute does not exist then hide controls
- debug - Debug mode. If attribute exists then you will see a lot of messages in js console. If attribute does not exist, it will be silent
- mute - Mute audio. If attribute exists then mute. If attribute does not exist then no mute
- useragent-prefix - Set prefix for user agency
- aspect-ratio - If attributes aspect-ratio or aspect-ratio-mode exist then aspectRatio true
- aspect-ratio-mode - 1:Fit-to-Screen(default); 2:Crop; 0:Off. If attribute exists then aspectRatio true
- auto-reconnect - If attribute auto-reconnect exists then the player will be auto reconnected on any error
- connection-timeout - set connection timeout value in milliseconds
- connection-udp - allow UDP connection (by default is off), 0:Off, 1:On
- custom-digital-zoom - if this option exists then digital zoom in control disabled and it is allowing method "setCustomDigitalZoom"