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

淩亂°似流年 2023-10-13 12:46 68阅读 0赞

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

*  **页面视频直播实现代码**

1.      <!DOCTYPE html>
        <html>
        <head>
        <meta charset="UTF-8">
        <title>VLC视频预览</title>
        </head>
        <body>
         
        
        
         
        	
            <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>
        
        </body>
        </html>
2.  使用ffmpeg截图
3.  使用[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 (多播)
4.

[ffmpeg]: https://so.csdn.net/so/search?q=ffmpeg&spm=1001.2101.3001.7020