Upgrade to Pro — share decks privately, control downloads, hide ads and more …

APNG maker on wasm

poccariswet
November 02, 2019

APNG maker on wasm

rust, APNG, wasm

poccariswet

November 02, 2019
Tweet

More Decks by poccariswet

Other Decks in Technology

Transcript

  1. rust de wasm • garbage collectionがない • ランタイムが小さい ( golangだと GC,

    ランタイムが大きいため wasm fileが2MB を超えてしまう。rustだと2KB) • メモリセーフのためマルチスレッド時、安全 • 豊富なwasmのための エコシステム ◦ wasm-bindgen ◦ wasm-pack ◦ wasm-app (npm template) https://opensource.com/article/19/2/why-use-rust-webassembly
  2. APNG maker on wasm • APNG を作る web app ◦

    file reader 複数fileを [ Uint8Array, Uint8Array … ] にする ◦ rustで書かれたEncodeメソッドに渡す ◦ encodeしたfile buffer を返す ◦ buffer -> Blob -> createObjectURL
  3. JSとRust(wasm) のデータのやりとり • fileをJS->Rustにどうやっておくるか ◦ jsのArray型 を rust Vec<Vec<u8>> 型にしたい

    ▪ js data: ◦ js_sysを使う ▪ js_sys::Array let data: Vec<Vec<u8>> = js_sys::JsCast::Uint8Array(array) ❌ Array { obj: Object { obj: JsValue([Uint8Array, Uint8Array]) } }
  4. JSとRust(wasm) のデータのやりとり let data: Vec<Vec<u8>> = data .values() // return

    Iterator .into_iter() // return JsValue .map(|x| { x.unwrap_throw() // ↓ JsValueの中身をcastする .unchecked_ref::<js_sys::Uint8Array>() .to_vec() // Uint8ArrayをVec<u8>にする }) .collect(); // Vec<u8> をVec<>の中にcollectする
  5. Rust所有権システム use std::io::{BufWriter, Write}; fn main() { let mut buf

    = vec![]; let test = "Hello, string io!"; let mut f = BufWriter::new(&mut buf); f.write(test.as_bytes()).unwrap(); println!("{:?}", buf); // <--- ERRORRRRRRRRRR!!!! println!("{}", test); }
  6. Rust所有権システム use std::io::{BufWriter, Write}; fn main() { let mut buf

    = vec![]; { let test = "Hello, string io!"; let mut f = BufWriter::new(&mut buf); f.write(test.as_bytes()).unwrap(); println!("{}", test); } // BufWriterのライフタイムがこの中なので、所有権はこ       こでmainのbufに戻される println!("{:?}", buf); }
  7. Rust所有権システム use std::io::{BufWriter, Write}; fn main() { let mut buf

    = vec![]; { let test = "Hello, string io!"; let mut f = BufWriter::new(&mut buf); f.write(test.as_bytes()).unwrap(); println!("{}", test); } // BufWriterのライフタイムがこの中なので、所有権はこ       こでmainのbufに戻される println!("{:?}", buf); }
  8. 今後... • オプションの設定の追加をしていく ◦ 1PNG画像の frame speed, frame loop数などの •

    次こそはrustでvideo transcoderつくりたい... • みんなも触ってみてね