rtsp2web 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -0
- package/dist/rtsp2web.js +5156 -0
- package/dist/rtsp2web.js.map +1 -0
- package/dist/rtsp2web.min.js +9 -0
- package/dist/rtsp2web.min.js.map +1 -0
- package/package.json +68 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# rtsp2web
|
|
2
|
+
|
|
3
|
+
`rtsp2web` 是一个提供在 `web` 页面中直接播放 `rtsp` 视频流解决方案的工具。
|
|
4
|
+
|
|
5
|
+
**【前言】**
|
|
6
|
+
[refer](./refer) 是一个小的独立的 `demo` 程序，学习它对你有很大的帮助（都有注释的）。
|
|
7
|
+
|
|
8
|
+
# how to use
|
|
9
|
+
```
|
|
10
|
+
// 安装依赖
|
|
11
|
+
npm i
|
|
12
|
+
// 运行示例
|
|
13
|
+
npm run example
|
|
14
|
+
// 打开 example/index.html 看视频
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
# how to use with detail
|
|
18
|
+
`npm i rtsp2web`
|
|
19
|
+
|
|
20
|
+
```js
|
|
21
|
+
// main.js
|
|
22
|
+
const RTSP2web = require('rtsp2web')
|
|
23
|
+
|
|
24
|
+
// 服务端长连接占据的端口号
|
|
25
|
+
const port = 9999
|
|
26
|
+
new RTSP2web({
|
|
27
|
+
port
|
|
28
|
+
})
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
运行 `node main.js`
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
// index.html
|
|
35
|
+
<!DOCTYPE html>
|
|
36
|
+
<html lang="en">
|
|
37
|
+
<head>
|
|
38
|
+
<meta charset="utf-8">
|
|
39
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
40
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
|
|
41
|
+
<script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
|
|
42
|
+
<title>播放rtsp</title>
|
|
43
|
+
</head>
|
|
44
|
+
<body>
|
|
45
|
+
<canvas id="canvas_1" style="width: 600px; height: 600px;"></canvas>
|
|
46
|
+
<canvas id="canvas_2" style="width: 600px; height: 600px;"></canvas>
|
|
47
|
+
</body>
|
|
48
|
+
<script>
|
|
49
|
+
var rtsp1 = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
|
|
50
|
+
var rtsp2 = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
|
|
51
|
+
window.onload = () => {
|
|
52
|
+
// 将rtsp视频流地址进行btoa处理一下
|
|
53
|
+
new JSMpeg.Player("ws://localhost:9999/flv?url="+btoa(rtsp1), {
|
|
54
|
+
canvas : document.getElementById("canvas_1")
|
|
55
|
+
})
|
|
56
|
+
new JSMpeg.Player("ws://localhost:9999/flv?url="+btoa(rtsp2), {
|
|
57
|
+
canvas : document.getElementById("canvas_2")
|
|
58
|
+
})
|
|
59
|
+
}
|
|
60
|
+
</script>
|
|
61
|
+
</html>
|
|
62
|
+
```
|
|
63
|
+
打开 `index.html`。
|