基于webcodes的纯前端MP4渲染方案

纯前端MP4渲染内核

这里介绍的视频渲染内核主要基于webcodes + ffmpeg + webgl + react 开发，Core-SDK 是画布渲染部分的 SDK，传入工程数据 （JSON）可以将数据绘制到 Canvas 上。可基于该 SDK 进行二次开发，开发视频相关的小程序，H5，PC视频编辑器等基于 web 的在线工 具。结尾附带内核的github地址

ffmpeg使用说明

ffmpeg主要用于MP3音频文件的混音业务，视频的编解码是基于webcodes做的，webcodes对音频的混音变速等相关业务处理并不是很好， 所以这里我们使用ffmpeg来做音频的混合裁剪变速等业务。而MP4（H264）的编解码采用webcodes来处理性能和效率会高很多。

该渲染内核能做什么？

1. 将工程数据及时绘制到画布中。

2. 使用控制器对视频中元素（元素：图片、文本、特效、贴纸、视频、音频）的位置大小等参数设置。

3. 前端合成视频，直接导出MP4文件

4. 提供了常用的工程所需的事件和方法，方便开发者快速基于该内核做上层工具的开发。

无界云剪采用该内核进行开发。

渲染使用说明

/**
 * VideoCoreSDK 是渲染内核类
 * MovieEncoding 视频合成的类
 * loadFFmpeg ffmpeg预加载方法
 */
import { VideoCoreSDK } from './videoCoreSDK.es.min';

let videoTotalTime = null;
let core = null;

const createVideoCanvas = async () => {
  const vc = new VideoCoreSDK({
    target: document.getElementById('videoBox'), // canvas要绘制的目标DOM
    data: MovieData, // 必填，工程数据
    movieId: 'movieID', // 实例内部唯一标识，多个实例不能相同
    env: 'editor', // 必填，渲染模式：editor（编辑模式，可拖动编辑）； preview（预览模式，只能预览，内存消耗更小）
    registerId: 'test', // 必填，注册ID，和域名进行绑定的
    EModuleEffectSourcePath: 'https://cdn.h5ds.com/assets/effectcanvas/', // 特效资源模块加载路径
    resourceHost: 'https://cdn.h5ds.com', // 资源加载目录
    workerPath: 'assets', // 选填，decode.worker.js的引用目录，默认是assets，会从/assets/worker中去获取
    useRecordManager: true, // 是否使用redo, undo 的记录
    scale: 0.4, // 选填，画布缩放比例，默认是1
    currentTime: 0, // 选填，默认开始时间是0
    plugins: [], // 选填，扩展插件
    onSourceProgress: v => {
      console.log('onSourceProgress', v);
    },
    triggerCurrentTime: v => {
      if (videoTotalTime === null) {
        videoTotalTime = core.getTotalTime().toFixed(1);
      }
      console.log('当前播放的时间节点：', v);

      // 如果时间播放到结尾，暂停播放
      if (v.toFixed(1) === videoTotalTime) {
        core.pause();
        core.playing = false;
        return;
      }
    },
    callback: c => {
      console.log('创建实例成功');
    },
  });
  core = await vc.init();
};

// 播放动画
core.play();

// 暂停动画
core.pause();

// 1、获取文本元素
const element = movieData.elements.find(d => d.type === 'text');

// 2、修改第一个元素的坐标为[100, 200]，修改文本内容
element.style.x = 100;
element.style.y = 200;
element.text = '修改文字内容';

// 3、更新视图
core.update();

视频合成使用说明

import { MovieEncoding, loadFFmpeg } from './videoCoreSDK.es.min';

// 加载ffmpeg wasm 包
await loadFFmpeg();

// 开始导出视频
const me = new MovieEncoding({
  gifWorkerPath: '/assets/worker/gif.worker.js',
  workerPath: '/assets/worker/decode.worker.js',
  format: 'mp4', // 导出格式，目前支持mp4,mp3,gif
  resolution: '720P', // 清晰度：480P，720P，1080P，2K，4K
  fps: 30,
  EModuleEffectSourcePath: 'https://cdn.h5ds.com/assets/effectcanvas/', // 特效资源模块加载路径
  resourceHost: 'https://cdn.h5ds.com',
  movieData: MovieData,
  onReady: async () => {
    // 执行操作
    await me.run();
  },
  onProgress: v => {
    console.log('当前进度', v);
  },
  onFinish: videoAndAudioRemixURL => {
    console.log('合成成功：', videoAndAudioRemixURL);
    // window.URL.revokeObjectURL(videoAndAudioRemixURL);
  },
});

强大的插件系统

目前无界云剪支持的元素有：图片、文本、特效、贴纸、视频、音频元素。如果这些元素都无法满足你们的业务需求，比如希望把图表做 到视频中，就会使用到我们的插件开发系统。插件开发相关的文档请参 考：插件开发

特效支持DIY扩展

特效本质上就是一个canvas效果，我们可以基于webgl shader写一些特效，也可以使用canvas绘制一些特效（下雨、雪花、光照等等）， 特效采用模块化开发，具体请参考特效开发文档

项目地址

GitHub - mtsee/wujie-mp4-encoder-core: 无界云剪MP4渲染内核，基于webcodes + ffmpeg + webgl开发，实现了MP4视频的编解码，混音等业务