首页 > SDK > JS SDK > SDK 使用入门

SDK 使用入门

更新时间 : 2021-08-09 10:18:31

JS Edit SDK 基于 wasm 技术, 提供了在网页端使用视频,图片,贴纸,文字,音频,转场,滤镜等特效制作视频的能力.

按照以下步骤使用 JS SDK

1. 加载 JS SDK

参考 demo.html


/**
 * 在这里处理 sxedit 加载的文件 url 
 * @note 在 加载 sxedit.js 设置
 * 
 * 根据自己的业务需求去改动,其中 worker.js 要处理跨域的问题
*/
// 创建全局 Module 对象
var Module = typeof Module !== "undefined" ? Module : {};

// 加载 wasm, worker, mem 时会回调 locateFile 方法获取加载链接
Module.locateFile = function(path, prefix) {
    // 设置 sxedit.wasm 加载链接
    // if (path.endsWith(".wasm")) return "https://static.atvideo.cc/wasmtest/" + path;
    // 设置 sxedit.worker.js 加载链接
    // if (path.endsWith("worker.js")) return prefix + path;
    return prefix + path;
}

/**
 * 加载出错回调
 * @note 在 加载 sxedit.js 之前设置
*/
Module.onAbort = async _ => {
   // do something
}

2. 创建剪辑管理器 - SXEditManager

准备展示画面的 canvas,

创建 SXEditManager

// 证书
 var license = "";
 // 画面宽度, 与要使用的 canvas 的宽度保持一致
 var width = 640;
 // 画面高度,与要使用的 canvas 的高度保持一致
 var height = 360;
 // 帧率
 var fps = 20;
 // 创建剪辑参数对象
 var options = new SXEditOptions(license, width, height);

// 设置相关参数
// 设置 canvas id
options.setCanvasId("preview");
options.setFps(fps);

// 设置启用缓存
options.setEnableSourceManager(true);
// 设置缓存大小, 200 * 1024 * 1024 = 200M
options.setSourceManagerCacheSize(200 * 1024 * 1024);

// 创建 Edit Manager
var editor = new SXEditManager(options, true);

// 设置剪辑时长为 10 s
editor.setDuration(10);

// 释放 options
options.delete();

3. 添加轨道组 - SXTrackGroup

// 在指定位置添加轨道组, 0 表示在组列表的第一个位置追加
// -1 代表在组列表末尾追加,
// index 大的 group的画面将会覆盖 index 小的 group 
var group = editor.addGroupAtIndex(0);

4. 添加一个媒体轨道

// 写入 FS 的视频文件路径
var videoFile = "/path/to/input.mp4";

// 创建要使用的资源
var resource = new SXResource(SXResourceType.kMediaFile,  videoFile);

// 创建媒体轨道, 时长为 5 s
var videoTrack = editor.createMediaTrack(resource, 5);

// 添加到轨道组的第 0 s
group.addTrack(videoTrack,0);

// 释放创建的资源
resource.delete();

5. 给媒体轨道添加滤镜

// 写入 FS 的滤镜资源目录
var filtePath = "/path/to/filter/";

// 创建滤镜资源
var resource = new SXResource(SXResourceType.kFilter, filterPath);

// 给轨道添加滤镜, 时长为 5s, -1 表示在滤镜列表末尾追加
var filter = videoTrack.addFilter(resource, 5, -1);

// 释放 resource
resource.delete();

6. 绘制画面

// 设置绘制时间位置为 第1s
editor.seek(1);

// 绘制画面
editor.draw(false, true, -1);

/** * 在这里处理 sxedit 加载的文件 url * @note 在加载 sxedit.js 设置 * * 根据自己的业务需求去改动,其中 worker.js 要处理跨域的问题 */ // 创建全局 Module 对象 var Module = typeof Module !== "undefined" ? Module : {}; // 加载 wasm, worker, mem 时会回调 locateFile 方法获取加载链接 Module.locateFile = function(path, prefix) { // 设置 sxedit.wasm 加载链接 // if (path.endsWith(".wasm")) return "https://static.atvideo.cc/wasmtest/" + path; // 设置 sxedit.worker.js 加载链接 // if (path.endsWith("worker.js")) return prefix + path; return prefix + path; } /** * 加载出错回调 * @note 在加载 sxedit.js 之前设置 */ Module.onAbort = async _ => { // do something }

// 证书 var license = ""; // 画面宽度, 与要使用的 canvas 的宽度保持一致 var width = 640; // 画面高度,与要使用的 canvas 的高度保持一致 var height = 360; // 帧率 var fps = 20; // 创建剪辑参数对象 var options = new SXEditOptions(license, width, height); // 设置相关参数 // 设置 canvas id options.setCanvasId("preview"); options.setFps(fps); // 设置启用缓存 options.setEnableSourceManager(true); // 设置缓存大小, 200 * 1024 * 1024 = 200M options.setSourceManagerCacheSize(200 * 1024 * 1024); // 创建 Edit Manager var editor = new SXEditManager(options, true); // 设置剪辑时长为 10 s editor.setDuration(10); // 释放 options options.delete();

// 在指定位置添加轨道组, 0 表示在组列表的第一个位置追加 // -1 代表在组列表末尾追加, // index 大的 group的画面将会覆盖 index 小的 group var group = editor.addGroupAtIndex(0);

// 写入 FS 的视频文件路径 var videoFile = "/path/to/input.mp4"; // 创建要使用的资源 var resource = new SXResource(SXResourceType.kMediaFile, videoFile); // 创建媒体轨道, 时长为 5 s var videoTrack = editor.createMediaTrack(resource, 5); // 添加到轨道组的第 0 s group.addTrack(videoTrack,0); // 释放创建的资源 resource.delete();

// 写入 FS 的滤镜资源目录 var filtePath = "/path/to/filter/"; // 创建滤镜资源 var resource = new SXResource(SXResourceType.kFilter, filterPath); // 给轨道添加滤镜, 时长为 5s, -1 表示在滤镜列表末尾追加 var filter = videoTrack.addFilter(resource, 5, -1); // 释放 resource resource.delete();