Web Assembly と 画像・動画

画像を選択して、サムネイルを生成するDEMO
https://youtu.be/b3qRqh5tKPI

動画を選択して、サムネイルを生成するDEMO
https://youtu.be/oeXq8BjWK5Y

Transcript

1. Web Assembly と 画像・動画
2. 自己紹介 折原レオナルド賢 フロントエンドエンジニア、UXデザイナー LINE 株式会社 UIT 室 User Interface + Technology team @LINE corp 再来週に PWA Night Conference にもでるよ
3. はなす内容 1. JavaScript だけで画像加工をしよう 2. JavaScript だけで動画をエンコードしよう Web Assembly を使って
4. 1.JavaScript だけで画像加工をしよう wasm-imagemagick
5. 1.JavaScript だけで画像加工をしよう なんで これからPWAのアプリが増えてきそう Photoshop / Gimp が Web になる日もあるかも jpg png ローカルで 何でもやる 透過処理など
6. さっそくやってみる 1.JavaScript だけで画像加工をしよう <script type="module"> 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(); </script>
8. Demo
9. その他にできること • ImageMagick にできることならだいたいできる • 映像を gif にして表示、サムネイル書き出したり • 画像比較・diff 取ったり 1.JavaScript だけで画像加工をしよう カメラと連動→間違い探しを解くアプリなんかも作れそう
10. 注意 • wasm-imagemagick メンテされてなさすぎ • npm 版がエラーで動作しない場合 module 版を使う必要あり 1.JavaScript だけで画像加工をしよう <script type="module"> import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js'; </script>
11. 2. JavaScript だけで動画をエンコードしよう ffmpeg.js
12. なんで スマートフォンの処理性能もあがってきてる サーバーから 必要なものをもらう 使いやすいモノに 変換してもらうという時代 mp4 mov mp4 mov ローカルで 何でもやる サムネイル書き出しなど thumb 2. JavaScript だけで動画をエンコードしよう TikTok みたいなリアルタイム加工の Web アプリも出てくるかも
13. さっそくやってみる <script> 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(); </script> 2. JavaScript だけで動画をエンコードしよう
14. 結果受け取り側 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 だけで動画をエンコードしよう
15. Demo
16. 注意 • 同じくメンテされてなさすぎ... • コーデック不足で H.265 などがエンコードできない 2. JavaScript だけで動画をエンコードしよう 実用として使うためには、 自分で emscripten で emmake するしかない
17. ありがとうございました