Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
APNG maker on wasm
Search
poccariswet
November 02, 2019
Technology
1
170
APNG maker on wasm
rust, APNG, wasm
poccariswet
November 02, 2019
Tweet
Share
More Decks by poccariswet
See All by poccariswet
rust for web app
poccariswet
2
330
past and future
poccariswet
0
47
ncursesを学ぼう
poccariswet
0
56
shorterql
poccariswet
0
69
i_and_go
poccariswet
0
40
editor
poccariswet
0
77
さぁ、深夜ラジオを聴こう!
poccariswet
0
72
Aizu-Go
poccariswet
1
130
Other Decks in Technology
See All in Technology
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
310
"とにかくやってみる"で始めるAWS Security Hub
maimyyym
2
100
Terraform Stacks入門 #HashiTalks
msato
0
360
Engineer Career Talk
lycorp_recruit_jp
0
190
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
150
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
160
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
540
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
250
TypeScript、上達の瞬間
sadnessojisan
48
14k
Featured
See All Featured
Teambox: Starting and Learning
jrom
133
8.8k
Docker and Python
trallard
40
3.1k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Building Your Own Lightsaber
phodgson
103
6.1k
Faster Mobile Websites
deanohume
305
30k
Rails Girls Zürich Keynote
gr2m
94
13k
How STYLIGHT went responsive
nonsquared
95
5.2k
A designer walks into a library…
pauljervisheath
204
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building Applications with DynamoDB
mza
90
6.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Transcript
rust de wasm ~ APNG maker ~ 2019/11/2
• soeyu • 20卒予定 • skill golang, rust, video/live streaming
• like radio
話すこと • apngのこと • wasmとrustのこと • wasm-bindgenのこと • 作ったもののこと •
思ったこと • 今後...
APNG • Animated PNGの略 • PNGファイルをアニメーション(連番画像)のように表現した画像のこと • PNGフォーマットを拡張してできた画像のこと ◦ acTL(Animation
Controlチャンク) ◦ fcTL(Frame Controlチャンク) ◦ fdAT(Frame Dataチャンク)
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
wasmとは • WebAssemblyの略 • ブラウザで高速にプログラムを実行できるバイナリ • 高速、高効率、ポータブル • 今はWebAPIは直接操作はできない
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
rust wasm tutorial
wasm-bindgen • wasmには絶対必須 • rustのメソッド、構造体を jsのクラスに • wasm とjs間 のinterface
◦ js-sys ◦ web-sys ◦ console_error_panic_hook
APNG maker on wasm demo
APNG maker on wasm • APNG を作る web app ◦
file reader 複数fileを [ Uint8Array, Uint8Array … ] にする ◦ rustで書かれたEncodeメソッドに渡す ◦ encodeしたfile buffer を返す ◦ buffer -> Blob -> createObjectURL
pkg/apng.wasm pkg/apng.js index.js
APNG maker on wasm • 大変だったところ ◦ JSとRust(wasm)のデータのやり取り ◦ Rust所有権システム
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]) } }
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する
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); }
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); }
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); }
思ったこと • RustでJSの一部分を書き換えるのは意外と簡単 • js でapngのエンコードをしたことはないが、やっぱり速そう • エコシステムはそろってはいるが発展途上 ◦ wasm-bindgenでほしいメソッドがまだ少ない
今後... • オプションの設定の追加をしていく ◦ 1PNG画像の frame speed, frame loop数などの •
次こそはrustでvideo transcoderつくりたい... • みんなも触ってみてね
Thanks!!!