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" />