rtsp 视频源

测试视频源

  1. rtsp://admin:hz12345678hz@192.168.0.122:554/Streaming/Channels/101
  2. rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov

通过 VLC 创建 rtsp 视频源

原理：通过 VLC 软件，将本地视频文件发布成 rtsp 视频源

  1. 下载并安装 VLC 软件

    http://www.videolan.org/

  2. 打开 VLC，媒体-流

    image-20210421171459972

  3. 添加本地视频文件，点击「串流」

    image-20210421171829287

  4. 点击「下一个」

  5. 新目标选择 「RTSP」，点击「添加」

    image-20210421172609010

    输入路径 /hello 点击「下一个」

    image-20210421172107247

  6. 点击「下一个」

  7. 点击「流」

  8. 另外打开一个 VLC 窗口，点击 媒体-打开网络串流，输入网络 URL rtsp://localhost:8554/hello，点击「播放」

VLC web插件播放

支持基于老版本 Chrome 内核的浏览器，如老版本 Chrome 或老版本 360 急速浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		html, body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			background: #191919 !important;
			overflow: hidden;
		}
		.content {
			width: 60%;
			margin: 50px auto;
			text-align: center;
		}
	</style>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
	<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
</head>
<body>
<div class="content">
	<object classid="clsid:E23FE9C6-778E-49D4-B537-38FCDE4887D8" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
			width="640" height="480" events="True">
		<param name="ShowDisplay" value="True" />
		<param name="Loop" value="False" />
		<param name="AutoPlay" value="True" />
		<embed id="vlc" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
			   width="640" height="480" src="rtsp://admin:hz12345678hz@192.168.0.122:554/Streaming/Channels/101">
		</embed>
	</object>
</div>
</body>
</html>

调起 VLC 客户端软件播放

制作 VLC 注册工具

准备文件

  • vlc_2.2.4.0.exe 文件

  • run.bat

    1
    2
    REGEDIT /S rtsp.reg
    start vlc_2.2.4.0.exe /s

  • rtsp.reg

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Windows Registry Editor Version 5.00
    [HKEY_CLASSES_ROOT\rtsp]
    @="URL:rtsp Protocol Handler"
    "URL Protocol"=""
    [HKEY_CLASSES_ROOT\rtsp\DefaultIcon]
    @="C:\\Program Files (x86)\\VideoLAN\\VLC\\vlc.exe"
    [HKEY_CLASSES_ROOT\rtsp\shell]
    [HKEY_CLASSES_ROOT\rtsp\shell\open]
    [HKEY_CLASSES_ROOT\rtsp\shell\open\command]
    @="\"C:\\Program Files (x86)\\VideoLAN\\VLC\\vlc.exe\" \"%1\""

制作 exe 客户端软件 vlc_rtsp.exe

参考《Windows-winrar打包exe》

播放示例

安装 vlc_rtsp.exe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在任意浏览器页面中打开 VLC 客户端软件播放 rtsp 视频流</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
    <style>
        #tips {
            font-size: 13px;
            color: #ccc;
            padding: 20px;
        }
        .problem {
            font-size: 13px;
            color: #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
<script>
    $(function () {
        //rtsp 地址
        var rtsp = "rtsp://admin:hz12345678hz@192.168.0.122:554/Streaming/Channels/101";

        $('#play').click(function () {
            let eleLink = document.createElement('a');
            eleLink.style.display = 'none';
            eleLink.href = rtsp;
            // 受浏览器安全策略的因素，动态创建的元素必须添加到浏览器后才能实施点击
            document.body.appendChild(eleLink);
            // 触发点击
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
        });

        $(".problem button").click(function() {
            $('#tips').toggle();
        });
    });
</script>
<a href="rtsp://admin:hz12345678hz@192.168.0.122:554/Streaming/Channels/101">播放方式一</a>
<div id="play"><button type="button" class="btn btn-primary">播放方式二</button></div>
<div class="problem"><button type="button" class="btn btn-warning">播放存在问题 ?</button></div>
<div id="tips" style="display: none;">
    <p>如果点击播放没有反应，则点击下载软件，默认安装</p>
    <p><a style="color: #ac8989;" href="vlc_rtsp.exe"  download="vlc_rtsp.exe">下载软件</a>
    </p>
</div>
</body>
</html>

360急速+VLC 插件+VLC 客户端软件播放整合方案

说明

  • open360.html 为调起 360 极速浏览器逻辑页面
  • index.html 为 播放 rtsp 视频页面「360 极速浏览器中」
  • rtsp.exe 包含 VLC 客户端软件、360 极速浏览器文件和相关注册文件

原理

  1. 调用 360 极速浏览器播放 rtsp「没有不支持则下载安装 rtsp.exe」
  2. 如果页面中 VLC 插件播放不了，则调起本地 VLC 软件播放

步骤

  1. 调用 360 极速浏览器open360.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>调用本地 360 浏览器打开rtsp播放页面</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
        <style>
            #tips {
                font-size: 13px;
                color: #ccc;
                padding: 20px;
            }
            .problem {
                font-size: 13px;
                color: #ccc;
                padding: 10px;
            }
        </style>
    </head>
    <body>
    <script>
        $(function () {
            //rtsp 地址
            var rtsp = "rtsp://admin:hz12345678hz@192.168.0.122:554/Streaming/Channels/101";
            //rtsp 播放页面
            var url = "open360://192.168.43.51:8081/Web/RTSP/index.html?url="+encodeURIComponent(rtsp);

            $('#open360').click(function () {
                let eleLink = document.createElement('a');
                eleLink.style.display = 'none';
                eleLink.href = url;
                // 受浏览器安全策略的因素，动态创建的元素必须添加到浏览器后才能实施点击
                document.body.appendChild(eleLink);
                // 触发点击
                eleLink.click();
                // 然后移除
                document.body.removeChild(eleLink);
            });

            $(".problem button").click(function() {
                $('#tips').toggle();
            });
        });
    </script>
    <div id="open360"><button type="button" class="btn btn-primary">播放</button></div>
    <div class="problem"><button type="button" class="btn btn-warning">播放存在问题 ?</button></div>
    <div id="tips" style="display: none;">
        <p>如果点击播放没有反应，则点击下载软件，默认安装</p>
        <p><a style="color: #ac8989;" href="rtsp.exe"  download="rtsp.exe">下载软件</a>
        </p>
    </div>
    </body>
    </html>

  2. 在 360 极速浏览器中播放index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<style>
    		html, body {
    			width: 100%;
    			height: 100%;
    			margin: 0;
    			padding: 0;
    			background: #191919 !important;
    			overflow: hidden;
    		}
    		.content {
    			width: 60%;
    			margin: 50px auto;
    			text-align: center;
    		}
    		#tips {
    			font-size: 13px;
    			color: #ccc;
    			padding: 20px;
    		}
    		.problem {
    			font-size: 13px;
    			color: #ccc;
    			padding: 10px;
    		}
    	</style>
    	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    	<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
    </head>
    <body>
    <div class="content">
    	<object classid="clsid:E23FE9C6-778E-49D4-B537-38FCDE4887D8" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
    			width="640" height="480" events="True">
    		<param name="ShowDisplay" value="True" />
    		<param name="Loop" value="False" />
    		<param name="AutoPlay" value="True" />
    		<embed id="vlc" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="640" height="480" src="">
    		</embed>
    	</object>

    	<div class="problem"><button type="button" class="btn btn-warning">播放存在问题 ?</button></div>
    	<div id="tips" style="display: none;">
    		<p>提示插件不受支持，请点击播放按钮</p>
    		<p><a id="openVlc" href=""><button type="button" class="btn btn-small btn-primary">播放</button></a></p>
    	</div>
    </div>
    <script>
    	const parseQueryString = ()=>{
    		var json = {};
    		let url = location.href;
    		var arr = url.substr(url.indexOf('?') + 1).split('&');
    		arr.forEach(item=>{
    			var tmp = item.split('=');
    			json[tmp[0]] = tmp[1];
    		});
    		return json;
    	}

    	var query = parseQueryString();

    	let src = decodeURIComponent(query.url);
    	$("#vlc").attr("src", src);
    	$("#openVlc").attr("href", src);

    	$(".problem button").click(function() {
    		$('#tips').toggle();
    	});
    </script>
    </body>
    </html>

其它方案

https://github.com/Streamedian/html5_rtsp_player

缺点

只能播放客户机所在局域网范围内的视频流或公网视频流，无法通过公网播放内网视频流