javascript视频逐帧请求

最新推荐文章于 2024-05-02 15:34:56 发布

wzy-666

最新推荐文章于 2024-05-02 15:34:56 发布

阅读量457

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/C_C666/article/details/126473335

版权

定时器实现

// 获取某帧图像
function getFrame(id) { // frameID
    return new Promise((resolve) => {
        http.get('url' + id, () => {
            resolve()
        }).end();
    })
}

function fun1(from = 0, to = 100) {
    var N = to - from;
    var i = from
    var timer = setInterval(() => {
        f(i)
        i++;
        if (i >= to) {
            clearInterval(timer)
        }
    }, 1000 / frameRate);
}

缺点

容易堵塞，导致整体速度下降。

0请求用时：165ms
1请求用时：313ms
9请求用时：185ms
7请求用时：223ms
6请求用时：239ms
8请求用时：209ms
2请求用时：303ms
3请求用时：288ms
4请求用时：275ms
5请求用时：260ms
13请求用时：338ms
18请求用时：244ms
17请求用时：262ms
19请求用时：228ms
11请求用时：371ms
15请求用时：312ms
10请求用时：393ms
14请求用时：329ms
12请求用时：360ms
16请求用时：301ms
23请求用时：455ms
22请求用时：471ms
21请求用时：486ms
29请求用时：359ms
27请求用时：398ms
20请求用时：508ms
30请求用时：344ms
28请求用时：386ms
25请求用时：432ms
31请求用时：328ms
26请求用时：420ms
32请求用时：312ms
24请求用时：452ms
44请求用时：599ms
45请求用时：582ms
46请求用时：561ms
37请求用时：732ms
42请求用时：642ms
48请求用时：533ms
49请求用时：520ms
47请求用时：550ms
43请求用时：629ms
36请求用时：1257ms
40请求用时：1198ms
41请求用时：1172ms
39请求用时：1215ms
34请求用时：1291ms
35请求用时：1277ms
38请求用时：1232ms
33请求用时：1311ms
64请求用时：1443ms
62请求用时：1486ms
68请求用时：1367ms
67请求用时：1387ms
69请求用时：1349ms
55请求用时：1613ms
61请求用时：1510ms
63请求用时：1470ms
52请求用时：1665ms
57请求用时：1591ms
58请求用时：1581ms
66请求用时：1422ms
54请求用时：1643ms
65请求用时：1460ms
50请求用时：1723ms
72请求用时：1330ms
59请求用时：1585ms
60请求用时：1568ms
51请求用时：1718ms
70请求用时：1369ms
53请求用时：1718ms
71请求用时：1386ms
73请求用时：1382ms
56请求用时：1704ms
87请求用时：1228ms
86请求用时：1245ms
88请求用时：1215ms
89请求用时：1200ms
84请求用时：1291ms
82请求用时：1322ms
78请求用时：1383ms
74请求用时：1444ms
81请求用时：1348ms
97请求用时：1101ms
75请求用时：1441ms
77请求用时：1412ms
96请求用时：1120ms
95请求用时：1136ms
76请求用时：1431ms
93请求用时：1170ms
83请求用时：1326ms
85请求用时：1298ms
91请求用时：1211ms
94请求用时：1166ms
99请求用时：1101ms
98请求用时：1117ms
92请求用时：1209ms
80请求用时：1520ms
90请求用时：1371ms
79请求用时：1549ms

设置帧率为100，由于堵塞，导致速度逐渐变慢。

定时器+判断

function fun2(from = 0, to = 100) {
    var N = to - from;
    var i = from
    function g(p) { // p is a promise object
        setTimeout(() => {
            if (p.finished) {
                i++;
                if (i < to) {
                    g(f(i))
                }
            } else {
                p.then(() => {
                    i++;
                    if (i < to) {
                        g(f(i))
                    }
                })
            }
        }, 1000 / frameRate);
    }
    g(f(i))
}