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
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.1k
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
610
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
630
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
580
APIテスト自動化の勘所
yokawasa
7
4.1k
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.4k
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
100
CI/CDやテスト自動化の開発プロジェクトへの適用
megascus
3
740
Featured
See All Featured
Happy Clients
brianwarren
97
6.7k
Designing the Hi-DPI Web
ddemaree
280
34k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Code Reviewing Like a Champion
maltzj
519
39k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Testing 201, or: Great Expectations
jmmastey
38
7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
RailsConf 2023
tenderlove
29
880
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Why Our Code Smells
bkeepers
PRO
334
57k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
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!!!