hexa-viewer-communicator
Version:
A simple API for <hexa-viewer>
162 lines (161 loc) • 7.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ImageToVideo = void 0;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var ImageToVideo = /*#__PURE__*/function () {
function ImageToVideo(images) {
_classCallCheck(this, ImageToVideo);
_defineProperty(this, "cStream", void 0);
_defineProperty(this, "recorder", void 0);
_defineProperty(this, "chunks", void 0);
_defineProperty(this, "wrap", void 0);
_defineProperty(this, "canvas", void 0);
_defineProperty(this, "ctx", void 0);
_defineProperty(this, "images", void 0);
_defineProperty(this, "frame", void 0);
_defineProperty(this, "resolve", void 0);
_defineProperty(this, "FPS", void 0);
_defineProperty(this, "_codecs", void 0);
this._codecs = 'h264';
this.images = images;
this.chunks = [];
this.FPS = this.images.length / 15;
this.wrap = document.createElement("div");
this.wrap.style.cssText = "\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n opacity: 0.01;\n z-index: -9999999;\n max-width: 100%;\n ";
this.canvas = document.createElement("canvas");
this.wrap.appendChild(this.canvas);
}
_createClass(ImageToVideo, [{
key: "codecs",
get: function get() {
return this._codecs;
},
set: function set(value) {
this._codecs = value;
}
}, {
key: "getVideo",
value: function getVideo() {
var _this = this;
return new Promise(function (resolve, reject) {
_this.resolve = resolve;
document.body.appendChild(_this.wrap);
_this.frame = 0;
_this.ctx = _this.canvas.getContext("2d", {
alpha: true
});
var img = new Image();
img.onload = function () {
_this.canvas.width = img.naturalWidth;
_this.canvas.height = img.naturalHeight;
_this.start();
_this.anim();
};
img.src = _this.images[0];
});
}
}, {
key: "setTimeout",
value: function (_setTimeout) {
function setTimeout(_x) {
return _setTimeout.apply(this, arguments);
}
setTimeout.toString = function () {
return _setTimeout.toString();
};
return setTimeout;
}(function (ms) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, ms);
});
})
}, {
key: "anim",
value: function anim() {
var _this2 = this;
var img = new Image();
img.onload = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this2.ctx.clearRect(0, 0, _this2.canvas.width, _this2.canvas.height);
_this2.ctx.drawImage(img, 0, 0);
if (!(++_this2.frame < _this2.images.length)) {
_context.next = 8;
break;
}
_context.next = 5;
return _this2.setTimeout(1000 / _this2.FPS);
case 5:
requestAnimationFrame(_this2.anim.bind(_this2));
_context.next = 9;
break;
case 8:
_this2.stopRecording();
case 9:
case "end":
return _context.stop();
}
}
}, _callee);
}));
img.src = this.images[this.frame];
}
}, {
key: "start",
value: function start() {
// set the framerate to 30FPS
this.cStream = this.canvas.captureStream(30);
// this.cStream = this.canvas.captureStream(this.images.length / 30);
// create a recorder fed with our canvas' stream
var options = {
// mimeType: 'video/webm',
// mimeType: "video/webm;codecs=h264",
mimeType: "video/webm;codecs=".concat(this.codecs)
// mimeType: 'video/webm;codecs="vp9, av1"',
};
this.recorder = new MediaRecorder(this.cStream, options);
// start it
this.recorder.start();
// save the chunks
this.recorder.ondataavailable = this.saveChunks.bind(this);
this.recorder.onstop = this.exportStream.bind(this);
}
}, {
key: "saveChunks",
value: function saveChunks(e) {
this.chunks.push(e.data);
}
}, {
key: "stopRecording",
value: function stopRecording() {
this.recorder.stop();
}
}, {
key: "exportStream",
value: function exportStream(e) {
// combine all our chunks in one blob
// var blob = new Blob(this.chunks, { type: this.recorder.mimeType });
var blob = new Blob(this.chunks, {
type: 'video/webm'
});
this.resolve(blob);
this.wrap.remove();
}
}]);
return ImageToVideo;
}();
exports.ImageToVideo = ImageToVideo;