Javascript 提高将视频块转换为gif的性能_Javascript_Html_Html5 Canvas_Performance_Getusermedia

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

javascript html html5-canvas performance

Javascript 提高将视频块转换为gif的性能,javascript,html,html5-canvas,performance,getusermedia,Javascript,Html,Html5 Canvas,Performance,Getusermedia,我有一个程序（）可以使用getusermedia将视频块转换为gif。为了利用让我将画布帧转换为gif帧的库（GIFEncoder），我首先绘制vide blob 使用ctx.drawImage将帧绘制到画布上，然后将帧绘制到gif 有没有更有效的方法代码：身体{ } 录音机记录GIF 开始视频停止录像下载 // 由于浏览器中不支持GIF编码，因此您非常依赖JavaScript解决方案，例如您正在使用的解决方案改进编码的唯一方法是浏览源代码，看看是否可以优化其中的某些部分，例如

我有一个程序（）可以使用getusermedia将视频块转换为gif。为了利用让我将画布帧转换为gif帧的库（GIFEncoder），我首先绘制vide blob 使用

ctx.drawImage

将帧绘制到画布上，然后将帧绘制到gif

有没有更有效的方法

代码：


身体{
}
录音机
记录GIF
开始视频
停止录像
下载
//

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

改进编码的唯一方法是浏览源代码，看看是否可以优化其中的某些部分，例如使用类型化数组（如果没有），遵守引擎规范，知道什么可以与引擎编译器配合使用（例如，使用模拟类型、完整构造函数、非变形对象等）

另一个技巧是在视频未播放时对GIF进行编码（使用

currentPosition

和事件为每一帧“手动”前进），并使用屏幕外视频元素。这可能会为浏览器和引擎留出更多资源，以便更快地运行脚本（部分取决于系统及其对硬件解码视频的支持-更新屏幕上的视频仍会有开销，这可能会影响编码过程，也可能不会影响编码过程）

我的2.5美分

<!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>