Upgrade to Pro — share decks privately, control downloads, hide ads and more …

electron-vueで僕が考えた最強メモアプリ作っている話 / create memo...

electron-vueで僕が考えた最強メモアプリ作っている話 / create memo app by electron-vue

社内テックトークで発表した資料です。メモアプリはまだ作成中...

Hidenori Maehara

May 30, 2018
Tweet

More Decks by Hidenori Maehara

Other Decks in Technology

Transcript

  1. 自己紹介 • 前原 秀徳 • @maeharin(まえはりん) • エムスリー株式会社 • 4年目

    • キャリアチーム エンジニアチームリーダー • Kotlin、 Vue.js、Ruby • 好きな漫画は ベルセルク(心の支え) • 今さらながら NEW GAME!!にハマっています
  2. electronのdesktopCapturer.getSources() electronのDesktopCapturerSourceオブジェクト navigator.mediaDevices.getUserMedia() WebRTCのMediaStreamオブジェクト videoタグ canvas.getContext('2d').drawImage(videoEL,...) canvasタグ canvas.toDataURL() base64 png画像

    node.jsのfs.writeFileSync() 透明なdivでクロップ範囲を決定 キャプチャするスクリーンをユーザーに選 択してもらう クロップ範囲を切り取って、 canvasに表示する 保存ボタンが押されたら、 base64に変換 ローカルPCのファイルシステムに保存 DesktopCapturerSourceのidを渡す videoタグのsrcObjectプロパティに MediaStreamを突っ込む => スクリーンがvideoタグに表示される Web技術