Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Web Assembly と 画像・動画

Web Assembly と 画像・動画

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

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

LeonardoKen Orihara

January 15, 2020
Tweet

More Decks by LeonardoKen Orihara

Other Decks in Technology

Transcript

  1. さっそくやってみる 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>
  2. その他にできること • ImageMagick にできることならだいたいできる • 映像を gif にして表示、サムネイル書き出したり • 画像比較・diff

    取ったり 1.JavaScript だけで画像加工をしよう カメラと連動→間違い探しを解くアプリなんかも作れそう
  3. 注意 • wasm-imagemagick メンテされてなさすぎ • npm 版がエラーで動作しない場合 module 版を使う必要あり 1.JavaScript

    だけで画像加工をしよう <script type="module"> import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js'; </script>
  4. なんで スマートフォンの処理性能もあがってきてる サーバーから 必要なものをもらう 使いやすいモノに 変換してもらうという時代 mp4 mov mp4 mov

    ローカルで 何でもやる サムネイル書き出しなど thumb 2. JavaScript だけで動画をエンコードしよう TikTok みたいなリアルタイム加工の Web アプリも出てくるかも
  5. さっそくやってみる <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 だけで動画をエンコードしよう
  6. 結果受け取り側 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 だけで動画をエンコードしよう