Slide 1
Slide 1 text
Web Assembly と 画像・動画
Slide 2
Slide 2 text
自己紹介
折原レオナルド賢
フロントエンドエンジニア、UXデザイナー
LINE 株式会社 UIT 室
User Interface + Technology team @LINE corp
再来週に PWA Night Conference にもでるよ
Slide 3
Slide 3 text
はなす内容
1. JavaScript だけで画像加工をしよう
2. JavaScript だけで動画をエンコードしよう
Web Assembly を使って
Slide 4
Slide 4 text
1.JavaScript だけで画像加工をしよう
wasm-imagemagick
Slide 5
Slide 5 text
1.JavaScript だけで画像加工をしよう
なんで
これからPWAのアプリが増えてきそう
Photoshop / Gimp が Web になる日もあるかも
jpg
png
ローカルで
何でもやる
透過処理など
Slide 6
Slide 6 text
さっそくやってみる
1.JavaScript だけで画像加工をしよう
import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js';
const call = async function() {
const fetchedSourceImage = await fetch('sample.png');
const arrayBuffer = await fetchedSourceImage.arrayBuffer();
const sourceBytes = new Uint8Array(arrayBuffer);
const files = [{ name: 'srcFile.png', content: sourceBytes }];
const command = ['convert', 'srcFile.png', '-rotate', '90', '-resize', '200%', 'out.png'];
const processedFiles = await Magick.Call(files, command);
const firstOutputImage = processedFiles[0];
document.getElementById('rotatedImage').src = URL.createObjectURL(firstOutputImage['blob']);
console.log('created image ' + firstOutputImage['name']);
};
call();
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Demo
Slide 9
Slide 9 text
その他にできること
• ImageMagick にできることならだいたいできる
• 映像を gif にして表示、サムネイル書き出したり
• 画像比較・diff 取ったり
1.JavaScript だけで画像加工をしよう
カメラと連動→間違い探しを解くアプリなんかも作れそう
Slide 10
Slide 10 text
注意
• wasm-imagemagick メンテされてなさすぎ
• npm 版がエラーで動作しない場合 module 版を使う必要あり
1.JavaScript だけで画像加工をしよう
import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js';
Slide 11
Slide 11 text
2. JavaScript だけで動画をエンコードしよう
ffmpeg.js
Slide 12
Slide 12 text
なんで
スマートフォンの処理性能もあがってきてる
サーバーから
必要なものをもらう
使いやすいモノに
変換してもらうという時代
mp4 mov
mp4
mov
ローカルで
何でもやる
サムネイル書き出しなど
thumb
2. JavaScript だけで動画をエンコードしよう
TikTok みたいなリアルタイム加工の Web アプリも出てくるかも
Slide 13
Slide 13 text
さっそくやってみる
const ffmpeg = new Worker('/workers/ffmpeg-worker-webm.js');
const call = async () => {
const fetchedSourceMov = await fetch('sample.mov');
const arrayBuffer = await fetchedSourceMov.arrayBuffer();
const item = new Uint8Array(arrayBuffer);
await new Promise((resolve, reject) => {
ffmpeg.postMessage({
type: 'run’,
MEMFS: [{ name: 'input', data: item }],
arguments: ['-ss', '2', '-i', 'input', '-f', 'image2', '-vframes', '1', 'out.jpg']
});
});
};
call();
2. JavaScript だけで動画をエンコードしよう
Slide 14
Slide 14 text
結果受け取り側
ffmpeg.onmessage = (e) => {
const msg = e.data;
switch (msg.type) {
case 'exit’:
if (msg.data !== 0) {
reject();
}
break;
case 'done‘:
if (msg.data.MEMFS[0]) {
const textDecoder = new TextDecoder();
const thumbUnit8 = msg.data.MEMFS[0].data;
const img = textDecoder.decode(thumbUnit8);
document.getElementById('thumb').src = img;
} else {
reject();
}
break;
}
};
2. JavaScript だけで動画をエンコードしよう
Slide 15
Slide 15 text
Demo
Slide 16
Slide 16 text
注意
• 同じくメンテされてなさすぎ...
• コーデック不足で H.265 などがエンコードできない
2. JavaScript だけで動画をエンコードしよう
実用として使うためには、
自分で emscripten で emmake するしかない
Slide 17
Slide 17 text
ありがとうございました