RecordRTC

提供:MoodleDocs
移動先:案内検索
RecordRTC
タイプ エディタ
セット N/A
ダウンロード https://moodle.org/plugins/tinymce_recordrtc
イシュー {{{tracker}}}
ディスカッション {{{discussion}}}
メンテナー Jesus Federico

RecordRTCとは何ですか?

RecordRTCは、TinyMCEエディタ用のプラグインのセットで、テキストエディタがある場所ならどこでも、ユーザがテキストに音声やビデオの注釈を追加できるようにするものです。このプラグインは、エディタのツールバーに音声やビデオ(音声付き)を録音するためのボタンを追加します。recordrtc buttons.png を参照してください。(なお、Attoエディタには標準でこの機能が搭載されています。)

WebRTCの技術を使い、すべての録音をブラウザ上で瞬時に行うことができます。録音後、ユーザは現在編集中のテキストに直接アノテーションを埋め込むことができます。録音は、公開された文章にオーディオまたはビデオプレイヤとして表示されます。

プラグインは、Chrome、FirefoxおよびWindowsを実行しているデスクトップコンピュータ上のOpera、Linux、Mac OSおよびChrome OSで正常に動作します。

どのように入手しますか?

デフォルトのAttoエディタでは、この機能は含まれており、追加のインストールは必要ありません。

TinyMCEエディタの場合:

Ubuntuでのセットアップについては、以下のFAQをご参照ください。をご覧ください。

管理者設定とは何ですか?

プラグインはデフォルトで動作しますが、サイト管理のプラグインからテキストエディタ(AttoまたはTinyMCE)のページで変更することができます。

管理者ができること:

  • エディタツールバーに表示されるボタンを変更することで、音声のみ、映像のみ、または両方を記録できるようになりました。
  • 記録される音声のターゲットビットレートを変更する。
  • 記録されたビデオのターゲットビットレートを変更する。
  • 録画時間の制限を設定し、最大録画サイズを制御する。

録音した音声のデフォルトビットレート(128000)は、1分間に約15kBのファイルを生成し、録音した映像のデフォルトビットレート(2500000)は、1分間に20MBのファイルを生成するように導く。ビットレートが低いほど、ファイルサイズは小さくなります。

録画時間の制限はデフォルトで120秒に設定されているので、ビデオファイルの最大サイズは約40MBになるはずです。

どのように機能しますか?

  • AttoやTinyMCEでは、管理者の設定により、オーディオやビデオのアイコンの一方または両方が表示されます。

RecordAtto.png

  • 音声またはビデオ録画のアイコンをクリックします。'録音を開始する' というボタンが表示されます。それをクリックし、話します。

attachasannotation.png

  • 終了したら、クリックして録音を停止します。名前を付けて、録音を注釈として添付するかどうか尋ねられます。

トラブルシューティング

数秒後に録音が停止します

recordingrtc error limit reached.png

Moodleにアップロードできる最大ファイルサイズを決定する2つの設定があります。これらはウェブサーバのphp.iniで定義されます。

post_max_size = 8M
upload_max_filesize = 2M

ファイルを編集して、その値を40M〜50Mの間に増やすだけで、2分間の動画撮影が可能です。 Ubuntuでは

vi /etc/php/7.0/apache2/php.ini

このMoodleのトラッカー問題で説明されているように、いくつかの大きな値を設定することができます。

post_max_size = 1024M
upload_max_filesize = 1024M 

既知の問題

  • メディアファイルのデュレーションが表示されない
  • ファイルを移動するためのコントロールがプレイヤで正しく動作しない。

F.A.Q.

なぜこれらのプラグインは、すべてのブラウザで動作しないのですか?

WebRTC(Web Real-Time Communication)は、ピアツーピア接続でリアルタイム通信を可能にする通信プロトコルとアプリケーションプログラミングインターフェースの集合体です。ブラウザに実装することで、内部または外部のプラグインを必要とせず、ビデオ会議、ファイル転送、チャット、デスクトップ共有などのアプリケーションを実現できます。[Wikipedia].

MediaStream Recording API は、単に Media Recording API または MediaRecorder API と呼ばれることもあり、Media Capture and Streams API および WebRTC API と密接に連携しています。MediaStream Recording API を使用すると、オーディオおよび/またはビデオストリームを簡単に記録することができます。navigator.mediaDevices.getUserMedia() と共に使用すると、ユーザの入力デバイスから簡単に録画し、その結果をウェブアプリで即座に使用する方法を提供します。音声と映像は別々に、または一緒に記録することができます。[MediaRecorderドキュメント]。

これらのプラグインは、多様なWebRTC技術を利用しているため、[WebRTC 1.0] と [MediaRecorder API] の両方を実装しているブラウザでのみ使用することが可能です。ChromeFirefoxOperaはこれに該当します。[対応ブラウザとプラットフォーム]を参照してください。したがって、これらのプラグインの初期バージョン(1.0)が対応しているのは、これらのみです。

Edge は Microsoft Edge で WebRTC 1.0 を実装していますが、MediaRecorder API を含んでいないため、このブラウザ用にプラグインを実装するには、ライブラリのカスタマイズや外部サーバの利用が必要です。

iOS版Safari 11はWebRTC 1.0 [参照] に対応しますが、Edgeと同様、MediaRecorder APIの実装は発表されていません。

6割程度のブラウザしかカバーしていないため、この2つのブラウザについては、これらのプラグインのバージョン2.0のように、Media Streamingを利用したサポートを追加する予定があるようです。

2分以上の録音は可能ですか?

はい、プラグインの設定で変更可能です。ファイルサイズが大きくなるため、phpの設定も編集する必要があることに注意してください。 また、ブラウザ自体にも負荷がかかるので、あまり大きくしないことをお勧めします。 ファイルサイズに大きな制限を設けるには、プログレッシブアップロードとトランスコーディングのためのサーバコンポーネントを含めるのが唯一の解決策です。しかし、これらのプラグインの最初のバージョンは、その可能性をカバーしていません。

録音はどこに保存されていますか?

RecordRTC録音の保存は、Moodleにアップロードされた他のメディアファイルの保存と変わりません。従って、あなたのMoodleサーバが設定したファイルシステムに依存します。 デフォルトの設定では、すべてのファイルは/moodlepath/moodledata/filedir/xx/yy/に格納されます。xxとyyはファイルがアップロードされたときにAPIで定義されたパスです。 もしあなたが開発者で、このことについてもっと詳しく知りたいのであれば、ディスクへのファイル保存を参照してください。これは古い記事ですが、その下にあるものについての良いアイデアを与えてくれます。また、Amazon S3バケットにファイルを外部保存する方法については、Amazon S3リポジトリを参照してください。

Ubuntuで設定するにはどのようにすればよいですか?

システム管理者向けの注意事項

最大ファイルサイズを大きくする

PHPのデフォルトの最大アップロードサイズは非常に小さいので、録画中にアラートが出ないように、upload_max_filesizeの設定を40Mに、post_max_sizeの設定を50Mに、時間制限を2:00に設定することが推奨されます。

Firefoxで録画した動画のファイルサイズは、同じ設定でも他のブラウザの2倍程度になる可能性があります。音声のファイルサイズは、どのブラウザでもほぼ同じになるはずです。

開発者向けの注意事項

ライブラリの更新

これらのプラグインは、2つのライブラリを利用しています。Adapter.js は WebRTC に関するすべての魔法を作り、Bowser.js はアプリケーションが動作しているブラウザと OS を識別するのに役立ちます。

プロジェクトのBowserやAdapter.jsの依存関係を更新する場合、ファイルの先頭にある名前付きの定義を、以下のように匿名定義に置き換える必要があります。 Bowser.jsの場合:

古いコード: !function (root, name, definition) { if (typeof module != 'undefined' && module.exports) module.exports = definition() else if (typeof define == 'function' && define.amd) define(name, definition) else root[name] = definition() }(this, 'bowser', function () {

新しいコード: define([], function() {

Adapter.jsの場合もそうです:

古いコード (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.adapter = f()}})(function(){

新しいコード define([], function() {