【JavaScript】Web Share API Level2で動画をシェアしよう

17293 ワード
テキストリンク

こんにちは。
株式会社palan WebXR事業部でエンジニアをしている高田（Ajitama）と申します。

2021年にiOSでもWeb Share API Level2が使えるようになり、テキスト、URLに加えてファイルのSNSシェアが気軽にできるようになりました。

画像のシェア方法についてはすでにいくつか記事にされていますが、今回は動画シェアを例に挙げてWeb Share API Level2の使い方を解説していきます。

ブラウザ対応状況

  • Android Chrome 76〜
  • iOS Safari 15〜

現在のブラウザがファイルのシェアに対応しているかどうかは、navigator.canShareメソッドを使うことで判定できます。

const isSupportedShareFile = () => {
  //空のテストファイルを作成
  const testFile = new File(["test"], "test.txt", { type: "text/plain" });
  
  //ファイルをシェア可能かどうか判定
  return (
    navigator.share &&
    navigator.canShare &&
    navigator.canShare({
      files: [testFile],
    })
  );
}

動画の変換処理

動画はBlob形式→File形式へとJavaScriptで変換していくことでシェアが可能になります。

Blob形式への変換は複数のやり方がありますが、今回はFetch APIを用いたURLからの取得をサンプルコードにしています。

const blob = await (await fetch(VIDEO_URL)).blob();
const file = new File([blob], "video.mp4", { type: blob.type });

※動画の拡張子については、2022/4現在mp4でiOS Androidともに動作確認できています。

シェア

いよいよWeb Share API Level2でのシェアです。
方法は他の形式のファイルと同様、シェア時の引数にfilesプロパティを持たせ、先述の変換済みファイルオブジェクトを指定します。

const shareVideo = (text, url, videoFile) => {
  navigator.share({text, url, files: [videoFile]})
    .catch((error) => {
      console.error(error);
    });
}

クラス化

ここまでの処理を再利用しやすいようにクラス化します。

class WebShare {
  constructor() {
    this.isSupported = this.getIsSupported();
    this.notSupportedErrMsg = "このブラウザはファイルの共有に対応していません";
  }

  getIsSupported() {
    //空のテストファイルを作成
    const testFile = new File(["test"], "test.txt", { type: "text/plain" });

    //ファイルをシェア可能かどうか判定
    return (
      navigator.share &&
      navigator.canShare &&
      navigator.canShare({
        files: [testFile],
      })
    );
  }

  async getVideoFile(videoUrl) {
    const blob = await (await fetch(videoUrl)).blob();
    return new File([blob], "video.mp4", { type: blob.type });
  }

  shareVideo(text, url, videoFile) {
    if (!this.isSupported) {
      alert(this.notSupportedErrMsg);
      return;
    }
    
    navigator.share({ text, url, files: [videoFile] }).catch((error) => {
      console.error(error);
    });
  }
}

//WebShareクラスを用いて実際にシェア
const WebShareHandler = new WebShare();

const share = async () => {
  const videoFile = await WebShareHandler.getVideoFile("./sample.mp4");

  WebShareHandler.shareVideo("シェア文言", "シェアURL", videoFile);
};

//ユーザージェスチャーがないとシェアできない
const anyButton = document.getElementById("any-button");

anyButton.addEventListener('click', share);

動作確認

添付画像のようなシェアUIが表示され、各アプリで動画のシェアができれば成功です！

※instagramは動画シェア非対応です

まとめ

以上、Web Share API Level2での動画シェアについての解説でした。
ブラウザの機能が日に日に進化していて、わくわくしますね！

おわり

情報系の大学に入ったので春休み中にReact+TSでマインスイーパーとテトリス作ってみた
Storybook tips: Contextを使っているコンポーネントのStoryを書く