2020年12月25日

プログラミング

【iOS14.3】WebARで動画撮影(MediaRecorder API)が使用できるようになりました🎉

目次

  1. はじめに
  2. MediaRecorder APIとは
  3. 早速撮影してみる
  4. まとめ

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay25、最終日です!

昨日は「【CSS】:not否定擬似クラスの使い方とできること」でした。

【CSS】:not否定擬似クラスの使い方とできること

本記事では、12月15日にリリースされたiOS14.3で対応された、MediaRecorder APIを使用したブラウザ上での動画撮影について書いていきます。
こちらは自社のWebARサービスTOBIRAで、恐らく国内初でMediaRecorder APIを使用しSafari上で動画撮影機能を実装したフォトフレームサービスの事例です!
gif1.gif (4.8 MB)

またこちらの記事でもご紹介したように、WKWebViewでのgetUserMeida対応もあり、例えばLINEやTwitterなどのアプリ内ブラウザでも動画撮影が可能です!

【iOS14.3リリース🎉】アプリ内ブラウザでWebAR(Webカメラ)が使用できるようになりました

MediaRecorder APIとは

MDNによるとこうあります。

MediaRecorder インターフェイスは、メディアを簡単に記録するための機能を提供します。

MediaRecorder API
つまり、ブラウザ上の操作や動きを動画撮影することができる機能です。
上記ドキュメントは更新されていませんが、iOS14.3で正式にSafari(WebKit)で対応されました🎉

補足

今までもAndroidでは対応されており、Safariでも開発者用機能としては公開されていました。
そのために、Safariの設定>詳細>Experimental Features から設定をする必要がありました。
正式にSafari上で対応されたのはiOS14.3からとなります。

MediaRecorder API以前

Safari(WKWebView)でMediaRecorder APIが利用できなかった時代、palanをはじめ、いくつか企業は工夫をして動画撮影を試みていました。

1つはWebRTC(real-time communication)を用い、サーバ側で動画の保存処理を行うという方法です。
この為にはWebRTC用のサーバを用意し、そちら経由にWebRTCでリアルタイム動画を送り続けます。
イメージとしてはビデオ会議を行っている映像をサーバ側で保存し、端末に返すようなイメージです。

当然サーバを仲介するので通信量の問題や通信が途切れる問題、また大規模なアクセスがあった際にサーバ負荷など、様々な問題がありました。

早速撮影してみる

基本、撮影できるのはcanvasvideoタグ です。
そのため、ユースケースとしてはこんなことが考えられます。
– WebAR(getUserMediaを利用したカメラ)の動画撮影
– canvas上にお絵かきをしてその様子を動画撮影
– 数秒のショートビデオメッセージをブラウザ経由で撮影しSNSでシェア

WebKitのコードをベースに解説していきます。

<html>
<body>
<button onclick="startRecording()">start</button><br>
<button onclick="endRecording()">end</button>
<video id="video" autoplay playsInline muted></video>
<script>
let blobs = [];
let stream;
let mediaRecorder;
async function startRecording()
{
    stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (event) => {
       // Let's append blobs for now, we could also upload them to the network.
       if (event.data)
            blobs.push(event.data);
    }
    mediaRecorder.onstop = doPreview;
    // Let's receive 1 second blobs
    mediaRecorder.start(1000);
}
function endRecording()
{
    // Let's stop capture and recording
    mediaRecorder.stop();
    stream.getTracks().forEach(track => track.stop());
}
function doPreview()
{
    if (!blobs.length)
        return;
    // Let's concatenate blobs to preview the recorded content
    video.src = URL.createObjectURL(new Blob(blobs, { type: mediaRecorder.mimeType }));
}
</script>
</body>
</html>

シンプルなコードですね!
簡単に解説していきます!

stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });

ここはgetUserMediaを使用し、ビデオの映像を取得しています。
ちなみに音声も含めて録画(録音)可能です!

mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
// Let's append blobs for now, we could also upload them to the network.
if (event.data)
blobs.push(event.data);
}
mediaRecorder.onstop = doPreview;
mediaRecorder.start(1000);

MediaRecorder APIを先程のストリーミング映像を引数に渡しblob形式で録画します。
1秒単位でのblob受け渡しとなるようです。

function endRecording()
{
// Let's stop capture and recording
mediaRecorder.stop();
stream.getTracks().forEach(track => track.stop());
}

ストップボタンが押された際の処理です。
mediaRecorder.stop() が実行されるとmediaRecorder.start()されてからのメディアデータがblobで引き渡されます。

function doPreview()
{
if (!blobs.length)
return;
video.src = URL.createObjectURL(new Blob(blobs, { type: mediaRecorder.mimeType }));

プレビューをする為、video要素にblobsデータを渡しプレビュー再生します。

こんな感じになります!
gif2.gif (4.9 MB)

ちなみにこちらのTOBIRAの場合、レイヤーがvideo(カメラの動画)だけではなく、その上に重ねたスタンプやフレームの画像も含めてのレイヤーとなる為、少し工夫が必要でした。

まとめ

先日のgetUserMedia対応も含め、今回のiOS14.3ではWebARの体験向上につながるアップデートとなりました🎉

また他にもいくつか注目しているWebKit関連のアップデートはありますので、またいち早くご紹介できればと思います。

ぜひWebARの業界を盛り上げたい、WebARで面白い企画を実現したい!そんな方は気軽にpalanにお問い合わせください。

JavaScriptのお仕事に関するご相談

Bageleeの運営会社、palanではJavaScriptに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

3

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP