【Javascript】webmではなくmp4で録画したい

Question

Javascriptで録画をするとWebMという形式で保存されてしまいます。webmはiPhoneなどで再生できないため使いにくいです。

ビデオをmp4で録画・保存することはできますか？
もしくは、WebMをmp4に変換する方法を紹介していただけたら助かります。

よろしくお願いします。

参考ページ：
https://qiita.com/niisan-tokyo/items/fa6ff649a9a3312148bc

コード：

  var video = document.getElementById('video')// 適当にvideoタグのオブジェクトを取得
  var constrains = { video: true, audio: true }// 映像・音声を取得するかの設定
  navigator.mediaDevices.getUserMedia(constrains)
  .then(function(stream) {
      video.srcObject = stream // streamはユーザーのカメラとマイクの情報で、これをvideoの入力ソースにする
      video.play()
  })
  .catch(function(err) {
      console.log("An error occured! " + err)
  })
  // まずはユーザーのカメラ・マイクへのアクセスを実施
  navigator.mediaDevices.getUserMedia(constrains)
  .then(function (stream) {
    recorder = new MediaRecorder(stream) // 映像の入力ソースをユーザーのデバイスから取得
    recorder.ondataavailable = function (e) {
      var testvideo = document.getElementById('test')
      testvideo.setAttribute('controls', '')
      testvideo.setAttribute('width', width)
      testvideo.setAttribute('height', height)
      var outputdata = window.URL.createObjectURL(e.data) // videoタグが扱えるように、記録データを加工
      testvideo.src = outputdata // テスト用のビデオのソースに記録データを設置
    }
  })

  startbutton.addEventListener('click', function(ev){
    recorder.start()
    ev.preventDefault()
  }, false);

  stopbutton.addEventListener('click', function(ev) {
    recorder.stop()
  })

  downloadbutton.addEventListener('click', function(ev) {
    console.log(record_data)
    var blob = new Blob(record_data, { type: 'video/webm' })// 録画ファイルをblob形式に出力
    var url = window.URL.createObjectURL(blob) // データにアクセスするためのURLを作成
    var a = document.createElement('a') // download属性を持ったaタグをクリックするとダウンロードができるので、それをシミュレートする
    document.body.appendChild(a)
    a.style = 'display:none'
    a.href = url;
    a.download = 'test.webm'
    a.click()
    window.URL.revokeObjectURL(url)
  })

Comments

[yambejp]

「Javascriptで録画をすると」の前提条件がわかりません。
具体的な保存方法を提示ください

[m.ts10806]

>Javascriptで録画をするとWebMという形式で保存されてしまいます
実現しているコードを提示してください。

[miyabi_pudding]

もしかして、この記事の方法ですか？
https://blog.ver001.com/javascript-canvas-mediarecorder/

[syukun2]

以下の記事を参考にして書いています。
https://qiita.com/niisan-tokyo/items/fa6ff649a9a3312148bc

他にも以下の記事も見てみましたが、解決しなかったため質問させていただきました。
https://qiita.com/miyataku/items/6ed855a7fb7507ccc244
https://html5experts.jp/mganeko/12475/
https://reminder.ysrock.com/2018/01/16/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%AE%E6%98%A0%E5%83%8F%E3%82%92%E9%8C%B2%E7%94%BB%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/

[m.ts10806]

type: 'video/webm'
'test.webm'

って自身で書かれてますね

[syukun2]

StackoverFlowの回答曰く、以下の形式にしか対応していないとのことでしたので、仕方がなく「video/webm」と書いていました。
ここを「video/mp4」とすると対応していないとエラーがでます。

対応形式(https://stackoverflow.com/questions/44392027/webrtc-convert-webm-to-mp4-with-ffmpeg-js)
"video/webm"
"video/webm;codecs=vp8"
"video/webm;codecs=vp9"
"video/webm;codecs=h264"
"video/x-matroska;codecs=avc1"

[syukun2]

上記のページの回答に、以下のコードを書くとmp4で保存できると書いていますが、「.mp4」保存してみたところデータがうまく再生できませんでした。
ちなみに、拡張子を.webmにすると再生できました。

【コード】
var options = {mimeType: 'video/webm;codecs=h264'};
mediaRecorder = new MediaRecorder(stream, options);
.....
//Before merging blobs change output mime
var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
// And name your file as video.mp4

[miyabi_pudding]

おそらく、現段階では、拡張子や、コーデックは対応したものにできても、
本質的な動画の形式が、mp4に落とし込めないのでしょう。
これは、ブラウザなどのテクノロジーの時点での限界なので、
無理かと思いますよ。
まぁ、強いて方法と言えば、
mp4のバイナリデータの解析と、
Blobクラスの中身解析して、
オリジナルで、mp4書き出しアルゴリズムを作成する、とかでしょうかね。
めちゃくちゃ時間かかりそうですが。
もしくは、サーバーサイドでの技術だったら、ありそうな気がするので、
API提供してるサイトなどを探す、とかですね。

[syukun2]

miyabi_takatsukさん
無理ですか...残念です。
他のAPIなどを探してみようと思います！
回答ありがとうございます。

[ikadzuchi]

> 以下のコードを書くとmp4で保存できる
コメントにありますけどこれは「～.mp4」というファイル名のwebmファイルができるだけのようですね。
動画再生ソフトはしばしば誤った拡張子のファイルも正常に再生できてしまうのでそれで勘違いしたのではないかと思います。
(というかh.264のwebmなんてあったんですね…)

コーデックがh.264にできているならコンテナをwebmからmp4に変換するのはそう難しい処理ではないと思いますが、ブラウザ上で完結するライブラリなどは見つけられませんでした。一応「javascript mp4 mux」で検索するとそれらしきものが少々見つかったりはしますが。

[miyabi_pudding]

ikadzuchiさん >
ですよね。
やはり、なんかのAPI探す方が現実的くさいですよね・・・。