プラグインの仕組みを実装 1. HLSを導入しWebから編集可能に 2. コミュニティの形成 3. 動画編集ソフトウェアフレームワーク 1 やったこと

浅田睦葉 筑波大学情報科学類1年 2 自己紹介 :bow:

3 開発の背景 モチベーション 動画編集は難しい ブロックを用いて編集する 動画編集ソフトウェアを開発 簡単に動画編集ソフトを作りたい 動画編集ソフトを作るのは難しい 文化祭での動画作成

4 開発の背景 モチベーション 動画編集ソフトウェア開発の工程を 共通化してフレームワークにしたい！ 動画のデコード/エンコード、図形描画、テキスト描画、座標系の定義、拡大縮小、様々なメディア フォーマットへの対応、トリミング、ネガポジ反転、ゆがみ、ぼかし、アニメーション、部分適用、 3Dオブジェクト、その他フィルター、新しい動画編集ソフトウェアとしての革新的/独自の機能、レン ダリング高速化、プレビュー、スクリプト、プラグイン拡張、音声処理、ソフトウェアとしての設計、 ユーザーインターフェース、ユーザー体験の改善、ユーザーテスト、それらの分析... etc.

Web技術ベースでこれらの機能を手軽に利用したい 様々な環境で利用ができる Webサービスの動画編集バックエンド 高性能とも限らないモバイルでの動画編集バックエンド Electron等で動かせばローカルでも利用可能 → UI等はアプリに適したものを開発してもらい、 様々な環境から利用できる拡張可能な動画編集フレームワーク　 5 Webベースで動作する動画編集フレームワーク モチベーション

① 大量のAPIを管理したくない ② 差分の関心を後回しにできる 20種類のフィルターをかけるなら 20個のエンドポイントを叩かなければいけないので辛い 差分更新の実装を後回しにできる 6 Webベースで動作する動画編集フレームワーク シンプルなRESTful APIではなく中間言語muml

input output 7 簡単に動画編集を実現 色反転フィルターをかける例

Web開発者 ・UI/UXの改善に取り組む ・mumlを投げるだけ 動画編集機能開発者 ・レンダラを拡張する ・Web APIを意識しないでok 8 mumlによってクライアントとバックエンドを繋ぐ シームレス！

アプリケーション層 iOS App Android App WebApp Desktop App 開発者 APIサーバー mumlのパース JSON Scheme で定義 タイムライン オブジェクトの 生成 必要なシェーダ ファイルの準備 メディア変換 ... FFmpeg 動画像のエンコード レンダリング レンダリング フレームを GLテクスチャ に変換 GLテクスチャを フレームに変換 永続化 データベース タイムライン オブジェクトを正規化 コンテナ化 ストリーミングサーバー HLSストリーミング の初期化 HTTP Live Streaming 何が動いているのか 気になる！ 9 独自の動画編集ソフトの クライアントを開発 メディア変換 ... FFmpeg 動画像のエンコード メディアのアップロード

10 ユーザーがmock-upを拡張するためのプラグインを実装した プラグインシステムの実装 mumlを拡張する ユーザーが定義したElement型 型からJSONパーサ（parse_型名）を生成

11 パーザを統合してdeserializerを生成 独自のタグ・構造を解釈可能に ユーザーがmock-upを拡張するためのプラグインを実装した プラグインシステムの実装 mumlを拡張する

12 ユーザーがmock-upを拡張するためのプラグインを実装した プラグインシステムの実装 mumlを拡張する

13 Webアプリからmock-upのプレビューを読み込める RTMP配信 ... HLS配信 ブラウザで閲覧可能 HTTP Live Streamingに対応 mumlを拡張する

14 ・APIを整理し、ドキュメントを執筆した ・GLSLを書いている学生にフィルター実装を依頼している 　 　・"動画編集ソフトウェアフレームワーク"に必要な全ての 　機能を自分一人で実装することは難しい 　 　・少しずつ、プログラマブルな動画編集や 　動画編集ソフトウェア開発に関心のある若いプログラマと 　機能を充実させていく必要がある 　 　・そこで、外部で獲得した研究費から謝金を出して 　フィルター実装を外部に依頼した フィルター実装を外部に依頼 目標: コミュニティ形成

15 カスタムエレメント・カスタムフィルターの実装方法 作ってみる ① CLIでプラグインの雛形を作成する ② GLSLでフィルターを実装する（各種変数はmock upから与えられる） ③ エレメントの構造の型を定義する（パーサが自動生成される） ④ フックとなる関数を定義する ↑ フレームの処理についてのみ注力すればよく、 　動画編集全体のフローについて理解する必要はない！

16 全体が均一にぼかされている 境界だけぼけている 実装例 ブラー / 境界ぼかし

17 モザイク 実装例 モザイク

18 グロー（発光） 実装例 グロー

19 元画像 フィルター適用後 実装例 クロマキー

まとめ 20 ▲ GitHub ・RESTful APIではなく中間言語で編集することで大量のAPIを管理する必要がなく、 差分更新について後回しにすることができる。出力やストリーミング、アップロード など編集以外の作業と編集そのものを分離できる ・フィルターや図形の描画、アニメーションについて表現でき、これらを組み合わせ ることで複雑な動画を作ることができる ・プラグインシステムによって柔軟な拡張を可能にした ・HLSによる配信によってWebからの動画編集を可能にした ・今後はコミュニティの形成や、mock upを利用した動画編集ソフトウェアの 開発（来年のジョットクなど...？）に取り組んでいく ・mock upやプログラマブルな動画編集に興味があれば 　　momiimt@gmail.com 　に連絡をください！（GLSL/Nimによる開発です）