2020年12月25日
プログラミング
【iOS14.3】WebARで動画撮影（MediaRecorder API）が使用できるようになりました🎉
はじめに
新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay25、最終日です！
昨日は「【CSS】:not否定擬似クラスの使い方とできること」でした。
本記事では、12月15日にリリースされたiOS14.3で対応された、MediaRecorder APIを使用したブラウザ上での動画撮影について書いていきます。
こちらは自社のWebARサービスTOBIRAで、恐らく国内初でMediaRecorder APIを使用しSafari上で動画撮影機能を実装したフォトフレームサービスの事例です！
またこちらの記事でもご紹介したように、WKWebViewでのgetUserMeida対応もあり、例えばLINEやTwitterなどのアプリ内ブラウザでも動画撮影が可能です！
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でリアルタイム動画を送り続けます。
イメージとしてはビデオ会議を行っている映像をサーバ側で保存し、端末に返すようなイメージです。
当然サーバを仲介するので通信量の問題や通信が途切れる問題、また大規模なアクセスがあった際にサーバ負荷など、様々な問題がありました。
早速撮影してみる
基本、撮影できるのはcanvasとvideoタグ です。
そのため、ユースケースとしてはこんなことが考えられます。
– 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データを渡しプレビュー再生します。
こんな感じになります！
ちなみにこちらのTOBIRAの場合、レイヤーがvideo（カメラの動画）だけではなく、その上に重ねたスタンプやフレームの画像も含めてのレイヤーとなる為、少し工夫が必要でした。
まとめ
先日のgetUserMedia対応も含め、今回のiOS14.3ではWebARの体験向上につながるアップデートとなりました🎉
また他にもいくつか注目しているWebKit関連のアップデートはありますので、またいち早くご紹介できればと思います。
ぜひWebARの業界を盛り上げたい、WebARで面白い企画を実現したい！そんな方は気軽にpalanにお問い合わせください。
JavaScriptのお仕事に関するご相談
Bageleeの運営会社、palanではJavaScriptに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか？
3
0
AUTHOR
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan（旧eishis）を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
関連記事
2018年7月6日
【js】jQueryでできるハンバーガーメニューの作成
2018年6月18日
プログレスバーを簡単に実装できるprogressbar.js
2018年5月8日
画像に簡単にアニメーションをつけるcurtain.js
2018年2月14日
【js】jQueryでできるアコーディオンメニューの作成
2017年9月4日
【JS】スクロールした時にCSSanimationを発動させる「scrollMonitor」
アプリでもっと便利に！気になる記事をチェック！
記事のお気に入り登録やランキングが表示される昨日に対応！毎日の情報収集や調べ物にもっと身近なメディアになりました。
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan（旧eishis）を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
Damien
WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。
ゲスト デザイナー
かっきー
まりな
suzuki
taro
xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。
miyagi
ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
いわもと
taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。
