Web Assembly と 画像・動画

Web Assembly と 画像・動画

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

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

39b48efe3422d1c8a48f28aad53e209a?s=128

LeonardoKen Orihara

January 15, 2020
Tweet

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>
  7. None
  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. ありがとうございました