實現sb3文件在canvas畫布上呈現（react，dva）

1、下載模塊

npm i scratch-vm scratch-render scratch-storage scratch-svg-renderer scratch-audio twgl.js -S

2、創建MySb3Video組件

import React, { Component, PureComponent } from 'react';
import { Icon, message, Upload } from 'antd';
import $$ from 'cmn-utils';
const ScratchRender = require('scratch-render/dist/web/scratch-render');
const VirtualMachine = require('scratch-vm/dist/web/scratch-vm');
const ScratchStorage = require('scratch-storage/dist/web/scratch-storage');
const ScratchSVGRenderer = require('scratch-svg-renderer/dist/web/scratch-svg-renderer');
const AudioEngine = require('scratch-audio/src/AudioEngine.js');

export default class MySb3Video extends PureComponent {
    state = {
        loadFileTrue: false
    };

    componentDidMount() {
        this.initSb3File()
    }

    initSb3File() {
        const { src } = this.props
        fetch(src).then(res => res.blob().then(blob => {
            window.devicePixelRatio = 1;
            var canvas = document.getElementById('canvas_sb3');
            var audioEngine = new AudioEngine();
            var render = new ScratchRender(canvas);
            var vm = new VirtualMachine();
            var storage = new ScratchStorage();
            var mockMouse = data => vm.runtime.postIOData('mouse', {
	                canvasWidth: canvas.width,
	                canvasHeight: canvas.height,
	                ...data,
            	});
            vm.attachAudioEngine(audioEngine);
            vm.attachStorage(storage);
            vm.attachRenderer(render);
            vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
            vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
            this.vm = vm;
            var reader = new FileReader();
            //byte爲blob對象
            reader.readAsArrayBuffer(blob);
            reader.onload = () => {
                vm.start();
                vm.loadProject(reader.result)
                    .then(() => {
                        const div = document.createElement('div');
                        div.id = 'loaded';
                        document.body.appendChild(div);
                        this.setState({
                            loadFileTrue: true
                        },()=>{
                            vm.greenFlag()
                            // vm.greenFlag();  運行
							// vm.stopAll();    停止所有
                        })
                    });
            };
        }))
    }

    render() {
        const { loadFileTrue } = this.state
        return (
            <div className="sb3_parent">
                <canvas id="canvas_sb3"></canvas>
                { loadFileTrue ? null : <div className='mask-canvas'><Icon type="loading" style={{color:'#fff',fontSize:'30px'}}/></div>}
                
            </div>
        );
    }
}

3、調用組件

 <MySb3Video src="/upload/1564684646.sb3" />