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
68
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
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
620
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
450
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
240
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
君は隠しイベントを見つけれるか?
mujyun
0
280
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
460
Fargateを使った研修の話
takesection
0
110
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
The Cult of Friendly URLs
andyhume
78
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Code Reviewing Like a Champion
maltzj
519
39k
Faster Mobile Websites
deanohume
304
30k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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!!!