背景

以下では、OSS サービスと MPS の SDK アップロードに基づき、オーディオとビデオのファイルアップロードサービスを、すばやく構築する方法について説明します。

利点

MPS の SDK を使用したオーディオおよびビデオファイルのアップロードには、次のような利点があります。
  • ファイルリスト管理の追加

  • STS トークンタイムアウト更新機能の追加

  • アップロード中、ネットワークジッターが発生した場合の自動リトライ機能

  • ファイルの再開ブレークポイント機能

  • MPS サービスを自動的にトリガーするワークフロー

  • メディアのタイトル、タグ、説明、カテゴリ、カバー URL などの設定

    • HTTP 再開の制限事項: 複数のライフサイクル間での再開は許可されていません。 JS のサイドページは更新、閉じることができません。また、Android / iOS は アプリと携帯電話を閉じることができません。
    • 同じローカルファイルは、一度だけアップロードすることができます。
    1. </li>
    2. </ul>
    3. </div>
    4. </section>
    5. <section class="section">
    6. <h2 class="title sectiontitle" id="h2-url-3">サーバーの作成</h2>
    7. <p class="p">モバイル AK のセキュリティ問題を考慮し、ファイルのアップロードに STS を選択します。 STS を使用するとアップロードのセキュリティがどのように向上するかについては、
    8. <a title="" href="~~31929#concept-prr-tqz-5db~~">「RAM and STS User Guide」</a>をご参照ください。
    9. </p>
    10. </section>
    11. <section class="section" id="section-azk-bfl-x2b">
    12. <h2 class="title sectiontitle" id="h2-url-4">STS 有効化の手順</h2>
    13. <ol class="ol" id="ol-fpl-g1l-x2b">
    14. <li class="li" cond-props="china intl" id="ch">OSS サービスを有効化し、バケットを作成して、<a title="" href="https://oss.console.aliyun.com/?spm=a2c4g.11186623.2.5.5e9e2059meVW7L">OSS コンソール</a>にログインします。
    15. </li>
    16. <li class="li">OSS 概要ページで基本設定エリアを見つけ、<span class="ph uicontrol">[セキュリティトークン]</span> をクリックします。<br><img class="image" id="image-izx-n1l-x2b" src="http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/11376/156213970110124_ja-JP.png"><br></li>
    17. <li class="li"><span class="ph uicontrol">[セキュリティトークンのショートカット設定]</span> ページに移動します。<br><img class="image" id="image-xhs-p1l-x2b" src="http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/11376/156213970110125_ja-JP.png"><br></li>
    18. <li class="li">自動的に認証が行われ、テキストボックスにパラメーターが保存されます。 <span class="ph uicontrol">[AK 情報を保存]</span>をクリックし、ダイアログを閉じ、STS の有効化を完了します。<br><img class="image" id="image-bxh-r1l-x2b" src="http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/11376/156213970110126_ja-JP.png"><br><br><img class="image" id="image-umy-s1l-x2b" src="http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/11376/156213970210127_ja-JP.png"><br></li>
    19. </ol>
    20. </section>
    21. <section class="section" id="section-whc-51l-x2b">
    22. <h2 class="title sectiontitle" id="h2-url-5">アプリケーションサーバーの構築</h2>
    23. <p class="p">アプリサーバーのサンプルコードの設定</p>
    24. <div class="p">本ページでは、3 つの言語でダウンロードできる、3 つの開発プログラム例を提供します。
    25. <ul class="ul" id="ul-ucn-rbl-x2b">
    26. <li class="li">
    27. <p class="p">Java: <a title="" href="http://shinenuaa.oss-cn-hangzhou.aliyuncs.com/AppTokenServerDemo.zip?spm=a2c4g.11186623.2.10.5e9e2059meVW7L&file=AppTokenServerDemo.zip">「ダウンロード」</a></p>
    28. </li>
    29. <li class="li">
    30. <p class="p">PHP: <a title="" href="http://oss-demo.aliyuncs.com/app-server/sts-server.zip?spm=a2c4g.11186623.2.11.5e9e2059meVW7L&file=sts-server.zip">「ダウンロード」</a></p>
    31. </li>
    32. <li class="li">
    33. <p class="p">Ruby:<a title="" href="https://github.com/rockuw/sts-app-server?spm=a2c4g.11186623.2.12.5e9e2059meVW7L">「ダウンロード」</a></p>
    34. </li>
    35. </ul>
    36. </div>
    37. <div class="p">各言語パックのダウンロードでは、構成ファイル config.json が含まれています。
    38. <pre class="pre codeblock"><code>

    {“AccessKeyID” : “”,“AccessKeySecret” : “”,“RoleArn” : “”,“TokenExpireTime” : “900”,“PolicyFile”: “policy/all_policy.txt”}

    1. <ul class="ul" id="ul-hmj-lgl-x2b">
    2. <li class="li">
    3. <p class="p"><span class="ph uicontrol">AccessKeyID</span>: 上図で 1 とマークされているパラメーター値を設定します。
    4. </p>
    5. </li>
    6. <li class="li">
    7. <p class="p"><span class="ph uicontrol">AccessKeySecret</span>: 上図で 2 とマークされているパラメーター値を設定します。
    8. </p>
    9. </li>
    10. <li class="li">
    11. <p class="p"><span class="ph uicontrol">RoleArn</span>: 上図で 3 とマークされているパラメーター値を設定します。
    12. </p>
    13. </li>
    14. <li class="li">
    15. <p class="p"><span class="ph uicontrol">TokenExpireTime</span>: Android / iOS アプリによって取得されたトークンの有効期限を示します。 注記: 最小値は 900 秒です。 既定値のままにすることができます。
    16. </p>
    17. </li>
    18. <li class="li">
    19. <p class="p"><span class="ph uicontrol">PolicyFile</span>: トークンファイルへのアクセス権のリストを入力します。既定値は変更できません。
    20. </p>
    21. </li>
    22. </ul>
    23. </div>
    24. </div>
    25. </div>
    26. <div class="p">ここでは、ポリシーディレクトリで最も一般的な権限を定義する、3 つのトークンファイルを提供しています。 詳細は、下記のとおりです。
    27. <ul class="ul" id="ul-bhc-zbl-x2b">
    28. <li class="li">
    29. <p class="p">all_policy.txt: トークンが、バケットの作成または削除、ファイルのアップロードまたはダウンロード、およびこのアカウント下のファイルの削除を行う権限を持つことを指定します。</p>
    30. </li>
    31. <li class="li">
    32. <p class="p">all_policy.txt: このアカウント下で指定されたバケットへの読み取りアクセス権をトークンが持つことを指定します。</p>
    33. </li>
    34. <li class="li">
    35. <p class="p">bucket_read_write_policy.txt: このアカウントを対象として、指定されたバケットに対する、読み取りおよび書き込み権限を付与するトークンを指定します。</p>
    36. </li>
    37. </ul>
    38. </div>
    39. <p class="p">指定したバケットに対する、読み取りおよび書き込み権限を付与するためのトークンを作成する場合、"bucket_read_policy.txt" ファイルおよび "bucket_read_write_policy.txt"
    40. ファイルの $ BUCKET_NAME を目的のバケットの名前に置き換えます。
    41. </p>
    42. <ul class="ul" id="ul-t3h-qbl-x2b">
    43. <li class="li">フォーマットの解像度を返す
    44. <pre class="pre codeblock"><code>

    {“status”:200,“AccessKeyId”:”STS. 3pYjsdgdgagdasdg”,“AccessKeySecret”:”rpnwO9kvEgetGdrddgsR2YrTtI”,“Security”:”CAES+wMIARKAAZhjH0EUOIhJMQBMjRywXq7MQ/cjLYg80Aho1ek0Jm63XMhr9Oc5s3qaPer8p1YaX1NTDiCFZWFkvlHf1pQhuxfKBc+mRR9KAbHUefqH+rdjZqjTF7p2m1wJXP8S6k+G2MpHrUe6TYBkJ43GhhTVFMuM3BZajY3VjZWOXBIODRIR1FKZjIiEjMzMzE0MjY0NzM5MTE4NjkxMSoLY2xpZGSSDgSDGAGESGTETqOio6c2RrLWRlbW8vKgoUYWNzOm9zczoqOio6c2RrLWRlbW9KEDExNDg5MzAxMDcyNDY4MThSBTI2ODQyWg9Bc3N1bWVkUm9sZVVzZXJgAGoSMzMzMTQyNjQ3MzkxMTg2OTExcglzZGstZGVtbzI=”,“Expiration”:”2015-12-12T07:49:09Z”,}

    1. <div class="p">注記 (以下に示す 4 つの変数はトークンを構成します)。
    2. <ul class="ul" id="ul-bt1-fcl-x2b">
    3. <li class="li">
    4. <p class="p"><span class="ph uicontrol">status</span> は、アプリがトークンを取得する結果を示します。 アプリは、トークンを正常に取得したことを示すステータスコード "200" を返します。
    5. </p>
    6. </li>
    7. <li class="li">
    8. <p class="p"><span class="ph uicontrol">AccessKeyId</span> は、OSS クライアントの初期化時に Android / iOS アプリが取得する AccessKeyId を示します。
    9. </p>
    10. </li>
    11. <li class="li">
    12. <p class="p"><span class="ph uicontrol">AccessKeySecret</span> は、OSS クライアントの初期化時に Android / iOS アプリが取得する AccessKeySecret を示します。
    13. </p>
    14. </li>
    15. <li class="li">
    16. <p class="p"><span class="ph uicontrol">SecurityToken</span> は、Android / iOS アプリが初期化するトークンを示します。
    17. </p>
    18. </li>
    19. <li class="li">
    20. <p class="p"><span class="ph uicontrol">Expiration</span> は、トークンの有効期限が切れる時刻を示します。 Android SDK では、自動的にトークンの有効性を判断し、必要に応じて新しいトークンを取得します。
    21. </p>
    22. </li>
    23. </ul>
    24. </div>
    25. </div>
    26. </div>
    27. </li>
    28. <li class="li">コードの実行方法の例
    29. <ul class="ul" id="ul-ucy-3cl-x2b">
    30. <li class="li">
    31. <p class="p">JAVA (Java 1.7 ベース) では、パックをダウンロードして解凍した後、以下のコマンドを実行します。: java -jar oss-token-server.jar
    32. (port)
    33. </p>
    34. <p class="p"> ポートを指定せずに java –jar oss-token-server.jar を実行すると、プログラムはポート 7080 をリスニングします。 リスンポートを
    35. 9000 に変更するには、java –jar app-token-server.jar 9000 を実行します。 必要に応じて、ポート番号を指定します。
    36. </p>
    37. </li>
    38. <li class="li">
    39. <p class="p">PHP では、パッケージをダウンロードして展開した後、config.json ファイルを修正し、直接、php sts.php を実行してトークンを生成します。 その後、指定されたアドレスにアプリサーバーを設定します。</p>
    40. </li>
    41. </ul>
    42. </li>
    43. </ul>
    44. </section>
    45. <section class="section" id="section-kf1-kcl-x2b">
    46. <h2 class="title sectiontitle" id="h2-url-6">MPS クライアント SDK の使用</h2>
    47. <ul class="ul" id="ul-ylc-lcl-x2b">
    48. <li class="li">クライアントのサンプルコード
    49. <div class="p">ここでは、3 つの言語でダウンロードできる、3 つの開発プログラム例を提供します。
    50. <ul class="ul" id="ul-zjw-lcl-x2b">
    51. <li class="li">
    52. <p class="p"> H5: <a title="" href="http://outline.oss-cn-hangzhou.aliyuncs.com/doc/uploadsdk/MTSUploadDemo-js-1.0.7.zip?spm=a2c4g.11186623.2.13.5e9e2059meVW7L&file=MTSUploadDemo-js-1.0.7.zip">「ダウンロード」</a></p>
    53. </li>
    54. <li class="li">
    55. <p class="p">Android: <a title="" href="http://outline.oss-cn-hangzhou.aliyuncs.com/doc/uploadsdk/MTSUploadDemo-android-1.0.7.zip?spm=a2c4g.11186623.2.14.5e9e2059meVW7L&file=MTSUploadDemo-android-1.0.7.zip">「ダウンロード」</a></p>
    56. </li>
    57. <li class="li">
    58. <p class="p">iOS: <a title="" href="http://outline.oss-cn-hangzhou.aliyuncs.com/doc/uploadsdk/MTSUploadDemo-ios-1.0.7.zip?spm=a2c4g.11186623.2.15.5e9e2059meVW7L&file=MTSUploadDemo-ios-1.0.7.zip">「ダウンロード」</a></p>
    59. </li>
    60. </ul>
    61. </div>
    62. </li>
    63. <li class="li">SDK のコアコード
    64. <p class="p">JS 側</p>
    65. <div class="p">JS SDK を使用する前に、まず、ビデオをアップロードする OSS バケットに向けた <a title="JavaScript ファイルとビデオファイルは異なるリージョンに格納されるため、JavaScript ファイルがアップロードされるとリージョン間のリクエストが発生します。 この場合、リージョン間の設定は OSS 上で実装する必要があります。 OSS 上でリージョン間の設定をしないと、Web 側より JavaScript を使用してファイルをアップロードすることはできません。" href="~~44570#concept-wvr-qy4-1fb~~">CORS Access</a> を開きます。 JS デモをダウンロードしてブラウザで開きます。ページ設定の各パラメーターは次のとおりです。
    66. <ul class="ul" id="ul-ysv-qhl-x2b">
    67. <li class="li">上記で設定したアプリケーションサーバーアドレスとして、"HTTP アドレス" を設定(例: <a title="" href="http://127.0.0.1:7080/%E3%80%82?spm=a2c4g.11186623.2.17.5e9e2059meVW7L">http://127.0.0.1:7080/</a>)
    68. </li>
    69. <li class="li">ユーザバケットの設定</li>
    70. <li class="li">バケットエンドポイントの設定</li>
    71. <li class="li">クリックしてファイルを選択し、アップロードするファイルを選択</li>
    72. <li class="li">アップロード開始ボタンのクリック</li>
    73. </ul>
    74. <pre class="pre codeblock"><code>

    // Initialize the clientvar uploader = new VODUpload({// Start upload‘onUploadstarted’: function (uploadInfo) {;},//File uploaded successfully‘onUploadSucceed’: function (uploadInfo) {console.log(“Uploaded successfully”);},//File upload failed‘onUploadFailed’: function (uploadInfo, code, message) {console.log(“File upload failed”);},// File upload progress, in bytes‘onUploadProgress’: function (uploadInfo, totalSize, uploadedSize) {console.log(“File upload progress,”);},//Security token timed out‘onUploadTokenExpired’: function (uploadInfo) {console.log(“Token timeout”);}});// Get STS Informationresult = httpGet(httpServer);stsToken = JSON.parse(result);uploader.init(stsToken.AccessKeyId, stsToken.AccessKeySecret, stsToken.SecurityToken, stsToken.Expiration);// Add Fileuploader.addFile(event.target.files[i], endpoint, bucket, object, userData);// Start uploadinguploader.startUpload();

    1. <p class="p">アンドロイド側</p>
    2. <div class="p">Android に次の権限が追加されていることを確認します。
    3. <pre class="pre codeblock"><code>&lt;uses-permission android:name="android.permission.INTERNET"&gt;&lt;/uses-permission&gt;

    <uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE”></uses-permission><uses-permission android:name=”android.permission.ACCESS_WIFI_STATE”></uses-permission><uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”></uses-permission>

    1. <div class="p">Android Demo をダウンロードし、以下の変更を加えます。
    2. <ul class="ul" id="ul-abb-5hl-x2b">
    3. <li class="li"><a title="" href="http://192.168.0.2:7080/%E3%80%82?spm=a2c4g.11186623.2.18.5e9e2059meVW7L">http://192.168.0.2:7080/</a> など、アプリケーションサーバー設定アドレス用に、 [serverUrl] 内の [MainActivity] を変更します。
    4. </li>
    5. <li class="li">ユーザーのバケットを設定します。</li>
    6. <li class="li">ユーザーのバケットに対応するエンドポイントを設定します。</li>
    7. <li class="li">デモを実行し、[ファイルの追加] をクリックします。</li>
    8. <li class="li">[アップロード] をクリックして、ファイルが OSS バケットの uploadtest / ディレクトリ下に正常にアップロードされたかどうかを確認します。</li>
    9. </ul>
    10. </div>
    11. <div class="p">メインコード:
    12. <pre class="pre codeblock"><code>

    VODUploadClient uploader = new VODUploadClientImpl(getApplicationContext());VODUploadCallback callback = new VODUploadCallback() {@Overridepublic void onUploadSucceed(UploadFileInfo info) {;}@Overridepublic void onUploadFailed(UploadFileInfo info, String code, String message) {;}@Overridepublic void onUploadProgress(UploadFileInfo info, long uploadedSize, long totalSize) {;}@Overridepublic void onUploadTokenExpired(UploadFileInfo info) {// Get and update STS token.uploader.resumeWithToken(“”, “”, “”, “”);}@Overridepublic void onUploadRetry(UploadFileInfo info, String code, String message) {;}@Overridepublic void onUploadRetryResume(UploadFileInfo info) {;}@Overridepublic boolean onUploadStarted(UploadFileInfo uploadFileInfo) {;}};// Get STS token and initializeuploader.init(“”, “”, “”, “”, callback);// Add Fileuploader.addFile(“”, “”, “”, “”);// Start uploadinguploader.start();

    1. <p class="p">IOS 側</p>
    2. <div class="p">iOS のデモをダウンロードし、以下の変更を加えます。
    3. <ul class="ul" id="ul-x31-whl-x2b">
    4. <li class="li">[VODUploadDemo.m] 内の [serverUrl] を変更し、アプリケーションサーバー用のアドレス <a title="" href="http://192.168.0.2:7080/%E3%80%82?spm=a2c4g.11186623.2.19.5e9e2059meVW7L">http://192.168.0.2:7080/</a> を設定します。
    5. </li>
    6. <li class="li">ユーザーバケットを設定します。</li>
    7. <li class="li">ユーザーのバケットに対応するエンドポイントを設定します。</li>
    8. <li class="li">デモを実行し、[ファイルの追加] をクリックします。</li>
    9. <li class="li">[アップロード] をクリックして、ファイルが OSS バケットの uploadtest / ディレクトリ下に正常にアップロードされたかどうかを確認します。</li>
    10. </ul>
    11. </div>
    12. <div class="p">メインコード:
    13. <pre class="pre codeblock"><code>

    // Callback InitializationOnUploadStartedListener testUploadStartedCallbackFunc = ^(UploadFileInfo fileInfo) {;};OnUploadSucceedListener testSuccessCallbackFunc = ^(NSString filePath){;};OnUploadFailedListener testFailedCallbackFunc = ^(NSString filePath, NSString code, NSString message){;};OnUploadProgressListener testProgressCallbackFunc = ^(NSString filePath, long uploadedSize, long totalSize) {;};OnUploadTokenExpiredListener testTokenExpiredCallbackFunc = ^{// Get and update STS token[uploader resumeWithToken:accessKeySecret:secretToken:expireTime:]};OnUploadRertyListener testUploadRertyListener = ^{;};OnUploadRertyResumeListener testUploadRertyResumeListener = ^{;};VODUploadListener listener;listener = [[VODUploadListener alloc] init];listener.started = testUploadStartedCallbackFunc;listener.success = testSuccessCallbackFunc;listener.failure = testFailedCallbackFunc;listener.progress = testProgressCallbackFunc;listener.expire = testTokenExpiredCallbackFunc;listener.retry = testUploadRertyListener;listener.retryResume = testUploadRertyResumeListener;// Get Token// Upload client InitializationVODUploadClient uploader;[uploader init:accessKeySecret:secretToken:expireTime:listener:listener];// Add File[uploader addFile:endpoint:bucket:object:];// Start uploading[uploader start];

    1. </li>
    2. </ul>
    3. </section>
    4. </div>
    5. </article>
    6. </main>