Rx-player + MPEG-Dash Widevine DRM + MS Smooth Streaming + ReactJSの使用法

はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

In my opinion Rx-Player is a really interesting player and I would like to show you common use cases.
Rx-Player は興味深いプレイヤーなので、一般的な使用法を説明します。

Copyrights of videos

Big Buck Bunny
© copyright 2008, Blender Foundation | www.bigbuckbunny.org
Tears of Steel
© copyright Blender Foundation | https://mango.blender.org/

What is Rx-player

From the official webpage:

The Rx-player is a library implementing a DASH and Microsoft Smooth Streaming video player directly on the browser, without plugins. It relies on HTML5 Media Source Extensions and Encrypted Media extensions and is written in TypeScript, a superset of JavaScript.

公式ウェブページから：

Rxプレーヤーは、DASHおよびMicrosoft Smooth Streamingビデオプレーヤーをプラグインなしでブラウザに直接実装するライブラリです。 HTML5 Media Source ExtensionsとEncrypted Media拡張機能に依存しています。 RxプレーヤーはTypeScriptで書かれています。

Create the React App ・ React Appを作成してください

yarn create react-app my-app

cd my-app/

yarn add rx-player

yarn start

Please go to :
次のURLにアクセスしてください:
http://localhost:3000/

You should see something similar to this:
これに似たものが表示されます。

To try the following examples, simply replace the code defined in
my-app/src/App.js
次の例を試すには、my-app/src/App.js

MPEG-DASH example

App.js

import React, {Component} from 'react';
import RxPlayer from "rx-player";
RxPlayer.LogLevel = "DEBUG";

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    this.initPlayer();
  }

  initPlayer() {
    const player = new RxPlayer({videoElement: document.getElementById("video")});
    player.loadVideo({
      url: "http://vm2.dashif.org/livesim-dev/segtimeline_1/testpic_6s/Manifest.mpd",
      transport: "dash",
      autoPlay: false});
  }

  render() {
    return (
      <div className="App">
        <video id="video" controls></video>
      </div>
    );
  }
}

export default App;

MPEG-DASH + Widevine DRM

Widevine DRM system is compatible with Chrome, Firefox and Android.
Widevine DRMシステムは、Chrome、Firefox、Androidと互換性があります。

Data are passed to the license server through a custom header.
In this example the custom header name is X-AxDRM-Message.
The custom header name depends on your DRM provider.

データは、カスタムヘッダーを介してライセンスサーバーに渡されます。
この例では、カスタムヘッダー名はX-AxDRM-Messageです。
カスタムヘッダ名はDRMプロバイダによって異なります。

About Rx-player DRM behaviour ・ Rx-playerのDRM動作について

The encryption information can usually be at two places:

in the Manifest/MPD
in the initialization segments of the encrypted content

Rx-player trusts more what the segment contains than the manifest.

暗号化情報は通常2つの場所にあります。

MPDマニフェスト
暗号化されたコンテンツの初期化セグメント

Rx-playerは、セグメントに含まれるものがマニフェストよりも信頼しています。

About the `getLicence` method ・`getLicence`メソッドについて

The getLicense method takes the “challenge” (message to generate the license) and has to perform the request to the license server. It should then return the license as an arraybuffer (wrapped in a promise for asynchronous functions).

getLicense メソッドはパラメータとして「チャレンジ」（ライセンスを生成するメッセージ）を受け取り、ライセンスサーバーへの要求を実行する必要があります。
ライセンスを arraybuffer（非同期関数の promise で囲んだもの）として返します。

Thanks to the Rx-player team for giving me those detailed information !
詳細な情報を提供してくれたRx-playerチームに感謝します！

App.js

import React, {Component} from "react";
import RxPlayer from "rx-player";

RxPlayer.LogLevel = "DEBUG";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    console.log("did  mount");

    this.initPlayer();

  }
  initPlayer() {

    const player = new RxPlayer({videoElement: document.getElementById("video")});

    player.loadVideo({
      url: "//media.axprod.net/TestVectors/v6.1-MultiDRM/Manifest_1080p.mpd",
      transport: "dash",
      autoPlay: false,
      keySystems: [
        {
          type: "widevine",
          getLicense(message, messageType) {
            console.log("Message type: " + messageType);
            return new Promise((resolve, reject) => {
              return fetch("https://drm-widevine-licensing.axtest.net/AcquireLicense", {
                body: message,
                headers: {
                  "X-AxDRM-Message": 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiNmU1YTFkMjYtMjc1Ny00N2Q3LTgwNDYtZWFhNWQxZDM0YjVhIn1dfX0.yF7PflOPv9qHnu3ZWJNZ12jgkqTabmwXbDWk_47tLNE'
                },
                method: "POST"
              }).then((response) => {
                if (response.ok) {
                  response.arrayBuffer().then(function(buffer) {
                    resolve(buffer);
                  });
                } else {
                  reject(new Error('error'))
                }
              }, error => {
                reject(new Error(error.message))
              })
            });
          }
        }
      ]
    });
  }

  render() {
    return (
      <div className="App">
        <video id="video" controls></video>
      </div>
    );
  }
}

export default App;

Microsoft Smooth Streaming

App.js

import React, {Component} from 'react';
import RxPlayer from "rx-player";
RxPlayer.LogLevel = "DEBUG";

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    this.initPlayer();
  }

  initPlayer() {
    const player = new RxPlayer({videoElement: document.getElementById("video")});
    player.loadVideo({
      url: "http://amssamples.streaming.mediaservices.windows.net/683f7e47-bd83-4427-b0a3-26a6c4547782/BigBuckBunny.ism/manifest",
      transport: "smooth",
      autoPlay: false});
  }

  render() {
    return (
      <div className="App">
        <video id="video" controls></video>
      </div>
    );
  }
}

export default App;

Information sources ・情報源

元記事はこちら

「Rx-player + MPEG-Dash Widevine DRM + MS Smooth Streaming + ReactJSの使用法」

Rx-player + MPEG-Dash Widevine DRM + MS Smooth Streaming + ReactJSの使用法

はじめに

Copyrights of videos

What is Rx-player

Create the React App ・ React Appを作成してください

MPEG-DASH example

MPEG-DASH + Widevine DRM

About Rx-player DRM behaviour ・ Rx-playerのDRM動作について

About the `getLicence` method ・`getLicence`メソッドについて

Microsoft Smooth Streaming

Information sources ・情報源

RxPlayer homepage

Rx-player DRM discussion

RxPlayer style

ReactJS

RxPlayer documentation

Media files & streams

元記事はこちら

アイレット新卒シリーズ Vol.66 24新卒 Google オフィスツアーレポート

【AWS re:Invent 2024】re:Invent に行った気になれるフォトギャラリー

Google Cloud 認定資格のグッズ申請をしてみた

AWS ベストプラクティスに沿っているか？ Well-Architected IaC Analyzer を魔改造してさらに便利にしてみた

【体験談】産後パパ育休のススメ！4週間取得して感じたメリットと過ごし方

Rx-player + MPEG-Dash Widevine DRM + MS Smooth Streaming + ReactJSの使用法

はじめに

Copyrights of videos

What is Rx-player

Create the React App ・ React Appを作成してください

MPEG-DASH example

MPEG-DASH + Widevine DRM

About Rx-player DRM behaviour ・ Rx-playerのDRM動作について

About the getLicence method ・getLicenceメソッドについて

Microsoft Smooth Streaming

Information sources ・ 情報源

RxPlayer homepage

Rx-player DRM discussion

RxPlayer style

ReactJS

RxPlayer documentation

Media files & streams

元記事はこちら

関連記事Related Articles

無料でできる MPEG-DASH + Widevine ストリーミング テスト配信

Dplayer: JavaScript open sources media playerの使用法

Plyr: JavaScript open sources media playerの使用法

MediaElement.js: JavaScript open sources media playerの使用法

Fluid player: JavaScript open sources media playerの使用法

About the `getLicence` method ・`getLicence`メソッドについて

Information sources ・情報源

無料でできる MPEG-DASH + Widevine ストリーミングテスト配信