Question

我有一个程序（Here），可以使用getusermedia将视频blob转换为gif。利用库（GIFEncoder）让我将画布帧转换为gif的帧，我首先绘制视频blob 使用ctx.drawImage到画布然后我将帧绘制到gif。

有没有更有效的方法来做到这一点？

代码：

<!Doctype html>
<html>
<head>
<style type="text/css">
    body {

    }
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script> 
<script type="text/javascript" src="b64.js"></script>
</head>
<body>
        <title>RecorderGif</title>
        <header>
            <h1>RecordGif</h1>
        </header>
        <article>
            <video id="video" width="320" height="200" style="display:none" autoplay=""></video>
            <section>
                <button id="btnStart">Start video</button>
                <button id="btnStop">Stop video</button>
                <button id="btnSave">Download</button>             
                            </section>
            <canvas id="canvas" width="320" height="240"></canvas>
        </article>
<script type="text/javascript">//<![CDATA[ 
var encoder = new GIFEncoder();
encoder.setRepeat(0);
encoder.setDelay(100);
encoder.start();
window.onload = function() {

//Compatibility


 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    var data = []
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        btnStart = document.getElementById("btnStart"),
        btnStop = document.getElementById("btnStop"),
        btnSave = document.getElementById("btnSave")
        videoObj = {
            video: true,
            };

    btnStart.addEventListener("click", function() {
        var localMediaStream;

        if (navigator.getUserMedia) {
            navigator.getUserMedia(videoObj, function(stream) {              
                video.src = (navigator.webkitGetUserMedia) ? window.webkitURL.createObjectURL(stream) : stream;
                localMediaStream = stream;
                var addFrame = setInterval(function() {
                data.push(canvas.toDataURL('image/png'))
            },100);

            }, function(error) {
                console.error("Video capture error: ", error.code);
            });

            btnStop.addEventListener("click", function() {
                clearInterval(addFrame)
                localMediaStream.stop();

            });
            btnSave.addEventListener("click", function() {
                for (var i = 0; i < data.length; i++) {
                    var frame = new Image();
                    frame.src=data[i]
                    context.drawImage(frame,0,0)
                    encoder.addFrame(context);

                };
                encoder.finish();
                var binary_gif = encoder.stream().getData() //notice this is different from the as3gif package!
                var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
                var gif = window.open('about:blank','','width=320,height=240')
                gif.document.location.href=data_url
            });

            setInterval(function() {context.drawImage(video, 0, 0, 320, 240)},100);
        }

    });
};
//]]>  
</script>
</body>
</html>

Answer 1

由于浏览器中没有对GIF编码的本机支持，因此您非常依赖JavaScript解决方案，例如您正在使用的解决方案。

改进编码的唯一方法是查看源代码并查看是否可以优化其中的部分内容，例如利用类型化数组（如果没有），符合引擎细节知道哪些适用于引擎编译器（即比如使用模拟类型，完全构造函数，非变形对象等。）。

另一个提示是，当视频不播放时对GIF进行编码（使用currentPosition为每个帧“手动”前进，并为其执行事件）并关闭屏幕视频元素。这可能会为浏览器和引擎留出更多资源来更快地运行脚本（部分取决于系统及其对硬件解码视频的支持 - 屏幕上的视频仍会有更新，这可能会影响或不会影响编码过程）。

我的2.5美分..

提高将视频blob转换为gif的性能

1 个答案: