HTML使用VLC WEB插件播放RTSP视频，并实现视频截图

LiveWeb视频管理平台

于 2023-07-06 17:17:14 发布

阅读量651

点赞数

文章标签：音视频

本文链接：https://blog.csdn.net/xiehuanbin/article/details/131581220

版权

需要使用RTSP直播摄像头，实现方案是使用VLC页面插件播放。另外需要实现视频的截屏功能，实现方案是使用ffmpeg.exe实现。

页面视频直播实现代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VLC视频预览</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/latest/win32/axvlc.cab" width="720" height="540">
          <param name='mrl' value='rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp' />
          <param name='volume' value='50' />
          <param name='autoplay' value='true' />
          <param name='loop' value='false' />
          <param name='fullscreen' value='false' />
    </object>
<![endif]-->
<!--[if !IE]><!-->
 
	<!-- 视频预览 使用大华摄像头，不同品牌摄像头RTSP有所区别，这里不做说明-->
    <object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="600" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.2.2/npapi-vlc-2.2.2.tar.xz">
        <param name='mrl' value='rtsp://admin:admin@192.168.1.103:554/cam/realmonitor?channel=1&subtype=1&proto=Dahua3' />
        <param name='volume' value='50' />
        <param name='autoplay' value='true' />
        <param name='loop' value='false' />
        <param name='fullscreen' value='false' />
    </object>
<!--<![endif]-->
</body>
</html>

使用ffmpeg截图
使用ffmpeg.exe实现截图，需要先下载当前应用，下载地址如下：

链接：https://pan.baidu.com/s/1MEvUXPMe6bDOsQYt5LMIxA 提取码：y177

实现代码只说明一个DEMO，具体业务实现根据自己需要调整。
```
/**
 * 使用ffmpeg.exe的命令执行截图，不要添加任何JAR包。
 * 
 * @author: andy.jia
 * @description:
 * @version:
 * @data:2020年6月13日
 *
 */
public class CutImgUtil {
 
	public static String transfer(String inFile, String outFile) {
		String size = "600x480"; // 图片大小
		String ffmpeg = "D:\\ffmpeg-win64-static\\bin\\ffmpeg.exe";
		String command = ffmpeg + " -i " + inFile
				+ " -vframes 1 -y -f image2 -t 1 -s " + size + " " + outFile;
		try {
			Process process = Runtime.getRuntime().exec(command);
			InputStreamReader ir = new InputStreamReader(
					process.getInputStream());
			LineNumberReader input = new LineNumberReader(ir);
 
			while ((input.readLine()) != null) {
			}
		} catch (java.io.IOException e) {
 
		}
		return outFile;
	}
 
	public static void main(String[] args) {
 
		String rtsp = "rtsp://admin:admin@192.168.1.104:554/cam/realmonitor?channel=1&subtype=1&proto=Dahua3";
 
		CutImgUtil.transfer(rtsp, "D:\\file\\" + System.currentTimeMillis()
				+ ".jpg");
	}
 
}
```
以上均测试没有问题。

RTSP配置规则
大华产品 rtsp://username:password@ip:port/cam/realmonitor?channel=1&subtype=0

username: 用户名
password: 密码
ip: 为设备IP
port: 端口号默认为554，默认554时可不填写
channel: 通道号，起始为1。例如通道2，则为channel=2
subtype: 码流类型，主码流（subtype=0），辅码流（subtype=1）
示例： rtsp://admin:admin@127.0.0.1:554/camera/monitor?channel=1&subtype=1

海康-预览取流-旧版规则（2012年之前的设备只持旧版规则） rtsp://<username>:<password>@<ipaddress>:<port>/<videotype>/ch<id>/<streamtype>/av_stream

username: 用户名
password: 密码
ipaddress: 设备IP
port: 端口号默认为554，默认可不填写
videotype：视频编码格式，如：h264、mpeg4
ch: 通道号，起始为1。例如通道1，则为ch1
streamtype: 码流类型，主码流（main），辅码流（sub）
示例： rtsp://admin:admin@127.0.0.1:554/h264/ch1/main/av_stream
示例： rtsp://admin:admin@127.0.0.1:554/mpeg4/ch2/sub/av_stream

海康-预览取流-新版规则 rtsp://<username>:<password>@<ipaddress>:<port>/Streaming/Channels/<id>(?parm1=value1&parm2=value2)

username: 用户名
password: 密码
ipaddress: 设备IP
port: 端口号默认为554，默认可不填写
id：通道号+0+码流类型码流类型：1-主码流、2-子码流、3-第三码流；如 1202 表示第12通道子码流
parms 其他入参如 transportmode=unicast (默认单播）transportmode=multicast (多播)

LiveWeb视频管理平台

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML使用VLC WEB插件播放RTSP视频，并实现视频截图

海康-预览取流-旧版规则（2012年之前的设备只持旧版规则） rtsp://:@://ch//av_stream。海康-预览取流-新版规则 rtsp://:@:/Streaming/Channels/(?subtype: 码流类型，主码流（subtype=0），辅码流（subtype=1）
复制链接

扫一扫