APNG maker on wasm

rust, APNG, wasm

Transcript

1. rust de wasm ~ APNG maker ~ 2019/11/2
2. • soeyu • 20卒予定 • skill golang, rust, video/live streaming • like radio
3. 話すこと • apngのこと • wasmとrustのこと • wasm-bindgenのこと • 作ったもののこと • 思ったこと • 今後...
4. APNG • Animated PNGの略 • PNGファイルをアニメーション(連番画像)のように表現した画像のこと • PNGフォーマットを拡張してできた画像のこと ◦ acTL(Animation Controlチャンク) ◦ fcTL(Frame Controlチャンク) ◦ fdAT(Frame Dataチャンク)
5. APNG article • https://github.com/poccariswet/apng • https://qiita.com/poccariswet/items/677fda45f837f4d1dc3c • https://medium.com/@poccariswet/how-i-developed-apng-libr ary-for-rust-98d366f1195b
6. wasmとは • WebAssemblyの略 • ブラウザで高速にプログラムを実行できるバイナリ • 高速、高効率、ポータブル • 今はWebAPIは直接操作はできない
7. 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
8. rust wasm tutorial
9. wasm-bindgen • wasmには絶対必須 • rustのメソッド、構造体を jsのクラスに • wasm とjs間 のinterface ◦ js-sys ◦ web-sys ◦ console_error_panic_hook
10. APNG maker on wasm demo
11. APNG maker on wasm • APNG を作る web app ◦ file reader 複数fileを [ Uint8Array, Uint8Array … ] にする ◦ rustで書かれたEncodeメソッドに渡す ◦ encodeしたfile buffer を返す ◦ buffer -> Blob -> createObjectURL
12. pkg/apng.wasm pkg/apng.js index.js
13. APNG maker on wasm • 大変だったところ ◦ JSとRust(wasm)のデータのやり取り ◦ Rust所有権システム
14. 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]) } }
15. 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する
16. 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); }
17. 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); }
18. 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); }
19. 思ったこと • RustでJSの一部分を書き換えるのは意外と簡単 • js でapngのエンコードをしたことはないが、やっぱり速そう • エコシステムはそろってはいるが発展途上 ◦ wasm-bindgenでほしいメソッドがまだ少ない
20. 今後... • オプションの設定の追加をしていく ◦ 1PNG画像の frame speed, frame loop数などの • 次こそはrustでvideo transcoderつくりたい... • みんなも触ってみてね
21. Thanks!!!