本文的主线 视频流 => 视频墙 => 截屏 => 录像
视频流
1
2
3
4
5
6
7
8
9
10
11
| docker run --name srs -p 1935:1935 -p 1985:1985 -p 8080:8080 \
-p 8000:8000/udp -p 10080:10080/udp -d registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5
brew install ffmpeg
ffmpeg -re -stream_loop -1 -i /opt/services/source.flv -c copy -f flv -y rtmp://localhost/live/1
ffplay http://localhost:8080/live/1.flv
|
视频墙
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
| <!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8" />
<style>
.centeredVideo {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<video id="videoElement1" class="centeredVideo" controls autoplay></video>
<video id="videoElement2" class="centeredVideo" controls autoplay></video>
<video id="videoElement3" class="centeredVideo" controls autoplay></video>
<video id="videoElement4" class="centeredVideo" controls autoplay></video>
<video id="videoElement5" class="centeredVideo" controls autoplay></video>
<video id="videoElement6" class="centeredVideo" controls autoplay></video>
<video id="videoElement7" class="centeredVideo" controls autoplay></video>
<video id="videoElement8" class="centeredVideo" controls autoplay></video>
<video id="videoElement9" class="centeredVideo" controls autoplay></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
<script>
for (var i = 1; i <= 6; i++) {
var videoElement = document.getElementById("videoElement" + i);
var flvPlayer = flvjs.createPlayer({
type: "flv",
url: "http://localhost:8080/live/" + i + ".flv",
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
for (var i = 7; i <= 9; i++) {
var videoElement = document.getElementById("videoElement" + i);
var flvPlayer = flvjs.createPlayer({
type: "flv",
url: "http://127.0.0.1:8080/live/" + i + ".flv",
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>
|
浏览器同域名请求的最大并发数限制通常为 6
截屏
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>
<head>
<meta content="charset=utf-8" />
<style>
.centeredVideo {
width: 250px;
height: 250px;
}
#canvasElement {
display: none;
}
</style>
</head>
<body>
<video id="videoElement" class="centeredVideo" controls autoplay></video>
<button id="screenshotButton">截屏</button>
<canvas id="canvasElement"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
<script>
var videoElement = document.getElementById("videoElement");
var canvasElement = document.getElementById("canvasElement");
var screenshotButton = document.getElementById("screenshotButton");
var flvPlayer = flvjs.createPlayer({
type: "flv",
url: "http://localhost:8080/live/1.flv",
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
screenshotButton.addEventListener("click", function () {
var context = canvasElement.getContext("2d");
canvasElement.width = videoElement.videoWidth;
canvasElement.height = videoElement.videoHeight;
context.drawImage(
videoElement,
0,
0,
canvasElement.width,
canvasElement.height
);
var screenshotURL = canvasElement.toDataURL("image/png");
var downloadLink = document.createElement("a");
downloadLink.href = screenshotURL;
downloadLink.download = "screenshot.png";
downloadLink.click();
});
</script>
</body>
</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
| <!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8" />
<style>
.centeredVideo {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<video id="videoElement" class="centeredVideo" controls autoplay></video>
<button id="startRecordButton">开始</button>
<button id="stopRecordButton">结束</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
<script>
var videoElement = document.getElementById("videoElement");
var startRecordButton = document.getElementById("startRecordButton");
var stopRecordButton = document.getElementById("stopRecordButton");
var flvPlayer = flvjs.createPlayer({
type: "flv",
url: "http://localhost:8080/live/1.flv",
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
videoElement.addEventListener("loadedmetadata", function () {
var videoStream = videoElement.captureStream();
var mediaRecorder = new MediaRecorder(videoStream);
var recordedChunks = [];
mediaRecorder.addEventListener("dataavailable", function (event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
});
mediaRecorder.addEventListener("stop", function () {
var blob = new Blob(recordedChunks, { type: "video/mp4" });
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url;
a.download = "recorded-video.mp4";
a.click();
});
startRecordButton.addEventListener("click", function () {
mediaRecorder.start();
});
stopRecordButton.addEventListener("click", function () {
mediaRecorder.stop();
recordedChunks = [];
});
});
</script>
</body>
</html>
|