我有一个程序（在这里），使用getusermedia将视频Blob转换为gif。为了利用让我将画布框架转换为gif框架的库（GIFEncoder），我首先使用将vide 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>
由于浏览器不支持GIF编码，因此您非常依赖JavaScript解决方案，例如您所使用的解决方案。
改善编码的唯一方法是遍历源代码，看看是否可以优化它的某些部分，例如利用类型化数组（如果没有的话），了解特定于引擎的引擎编译器（例如，类似引擎的东西），遵守引擎细节。使用模拟类型，完整构造函数，非变形对象等）。
另一个技巧是在不播放视频时使用GIF编码（对于每个帧，使用currentPosition和事件手动“将其手动向前” ），并使用屏幕外的视频元素进行编码。这可能会为浏览器和引擎留下更多资源，以使脚本更快地运行脚本（部分取决于系统及其对硬件解码视频的支持-在屏幕上更新视频仍然会产生开销，这可能会或可能不会影响编码过程）。
我的2.5美分
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句