Fix video rendering issue.

Author: mikecao

src/graphics/Composer.js

@@ -3,6 +3,7 @@ import ShaderPass from 'graphics/ShaderPass';
 import BlendShader from 'shaders/BlendShader';
 import CopyShader from 'shaders/CopyShader';
 import blendModes from 'graphics/blendModes';
+import { base64ToBytes } from 'utils/data';
 import { createRenderTarget } from './common';
 
 export default class Composer {
@@ -30,7 +31,7 @@ export default class Composer {
   getImage(format = 'image/png') {
     const img = this.renderer.domElement.toDataURL(format);
     const data = img.replace(/^data:image\/\w+;base64,/, '');
-    return Buffer.from(data, 'base64');
+    return base64ToBytes(data);
   }
 
   setSize(width, height) {

src/main/api/plugin.js

@@ -1,7 +1,6 @@
 import fs from 'fs';
 import path from 'path';
 import yauzl from 'yauzl';
-import { streamToBuffer } from 'utils/data';
 
 const plugins = {};
 
@@ -15,6 +14,16 @@ function getPluginId(file) {
   return path.parse(file).base;
 }
 
+function streamToBuffer(stream) {
+  const chunks = [];
+
+  return new Promise((resolve, reject) => {
+    stream.on('data', chunk => chunks.push(chunk));
+    stream.on('error', reject);
+    stream.on('end', () => resolve(Buffer.concat(chunks)));
+  });
+}
+
 function loadModule(id, data) {
   initPlugin(id);
 

src/utils/data.js

@@ -36,12 +36,12 @@ export async function dataToBlob(data, ext) {
   return new Blob([new Uint8Array(data).buffer], { type: mime.getType(ext) });
 }
 
-export function streamToBuffer(stream) {
-  const chunks = [];
-
-  return new Promise((resolve, reject) => {
-    stream.on('data', chunk => chunks.push(chunk));
-    stream.on('error', reject);
-    stream.on('end', () => resolve(Buffer.concat(chunks)));
-  });
+export function base64ToBytes(base64) {
+  const str = atob(base64);
+  const len = str.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = str.charCodeAt(i);
+  }
+  return bytes;
 }

src/video/RenderProcess.js

@@ -56,6 +56,10 @@ export default class RenderProcess extends Process {
         'yuv420p',
         '-f',
         format,
+        '-analyzeduration',
+        2147483647,
+        '-probesize',
+        2147483647,
       ];
 
       // Encoding options

src/view/components/controls/Setting.js

@@ -23,18 +23,18 @@ export default function Setting({
       <div className={styles.label} style={{ width: labelWidth }}>
         {label}
       </div>
-      {InputCompnent && (
-        <div style={{ width: inputWidth }}>
+      <div style={{ width: inputWidth }}>
+        {InputCompnent && (
           <InputCompnent
             {...inputProps}
             {...otherProps}
             name={name}
             value={value}
             onChange={onChange}
           />
-          {children}
-        </div>
-      )}
+        )}
+        {children}
+      </div>
     </div>
   );
 }