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
【LT】ソフトウェア産業は進化しているのか? #Agilejapan
takabow
0
100
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
190
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
29
13k
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
540
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
220
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
13k
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
200
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
430
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
210
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Typedesign – Prime Four
hannesfritz
40
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Visualization
eitanlees
145
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Done Done
chrislema
181
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
380
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
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!!!