Web コーストリーミング SDK の統合 - ApsaraVideo Live - Alibaba Cloud ドキュメントセンター

注意事項

重要

視聴者がコーストリーミングを行う必要がない場合は、他の統合方法を使用してください。詳細については、「SDK ダウンロード」をご参照ください。
Web コーストリーミングでは、通常のストリーミングとは異なるインジェスト URL およびストリーミング URL が必要です。詳細については、「コーストリーミング URL ジェネレーター」をご参照ください。

ブラウザ要件

次の表は、Web コーストリーミング SDK をサポートするブラウザを示しています。

オペレーティングシステム	ブラウザ	最低サポートバージョン	SDK バージョン要件
Windows	Chrome	63	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 以降
	QQ Browser	63 (Chrome カーネルバージョン)	V2.1.0 以降
Mac	Chrome	63	-
	Safari	11	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 以降
	QQ Browser	63 (Chrome カーネルバージョン)	V2.1.0 以降
Android	Chrome	63	-
	Edge	79	V2.0.3 以降
	WeChat 内蔵ブラウザ	7.0.9 (WeChat バージョン)	-
	QQ Browser	63 (Chrome カーネルバージョン)	V2.1.0 以降
	Huawei Browser	63 (Chrome カーネルバージョン)	V2.1.0 以降
	OPPO Browser、OnePlus Browser	40.7.39.1 (HeyTapBrowser カーネルバージョン)	V2.1.0 以降
iOS	Safari	11	-
	Edge	79	V2.0.3 以降
	WeChat 内蔵ブラウザ	7.0.9 (WeChat バージョン)	-
	DingTalk 内蔵ブラウザ	11.2.5 (DingTalk バージョン)	-
	QQ Browser	11 (Safari カーネルバージョン)	V2.1.0 以降

クイック統合

JavaScript

Web コーストリーミング SDK をインポートします：

<head>
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-live-push/6.4.9/alivc-live-push.js"></script>
</head>

次の例は、マイクのリストを取得する方法を示しています：

<script charset="utf-8" type="text/javascript"  src="https://g.alicdn.com/apsara-media-box/imp-web-live-push/6.4.9/alivc-live-push.js"></script>
// マイクのリストを取得するメソッドを定義します。
<script type="text/javascript">
    function getMicrophones() {
        window.AlivcLivePush.AlivcLivePusher.getMicrophones().then(microphones => {
            console.log('マイクリスト:', microphones);
        })
    }
</script>

//...
//... その他のコード
//...

<body>
  <a href="#" onclick="getMicrophones()">マイクリストを取得</a>
</body>

Web プレーヤー SDK をインポートします。これは通常の視聴者に必要です。

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  // (必須) HTML5 プレーヤーの場合、この CSS ファイルを参照する必要があります。
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>  // (必須) HTML5 プレーヤーの JS ファイルをインポートします。
</head>

詳細については、「Web プレーヤー SDK のクイック統合」をご参照ください。

TypeScript

TypeScript プロジェクトの場合、次のように SDK をインポートします：この例では React 16.8 以降を使用しています。

Web コーストリーミング SDK をインポートします：

useEffect(() => {
    // Web コーストリーミング SDK をインポートします。
    const alivcLivePushScript = document.createElement('script');
    alivcLivePushScript.src = 'https://g.alicdn.com/apsara-media-box/imp-web-live-push/6.4.9/alivc-live-push.js';
    document.body.appendChild(alivcLivePushScript);

 }, []);

SDK を使用します。例えば、次のようにマイクのリストを取得します：

// マイクのリストを取得するメソッドを定義します。
const getMicrophones = async () => {
    const microphones = await window.AlivcLivePush.AlivcLivePusher.getMicrophones();
    console.log('マイクリスト:', microphones);
}

//...
//... その他のコード
//...

return (
   <div>
      <a href="#" onClick={getMicrophones}>クリックしてマイクリストを取得</a>
    </div>
 );

Web プレーヤー SDK をインポートします：これは通常の視聴者に必要です。

useEffect(() => {
    // (必須) Web プレーヤー SDK の CSS ファイルをインポートします。
    const aliplayerCSS = document.createElement('link');
    aliplayerCSS.rel = 'stylesheet';
    aliplayerCSS.href = 'https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css';
    document.head.appendChild(aliplayerCSS);

    // (必須) Web プレーヤー SDK の JS ファイルをインポートします。
    const aliplayerScript = document.createElement('script');
    aliplayerScript.charset = 'utf-8';
    aliplayerScript.src = 'https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js';
    document.body.appendChild(aliplayerScript);
}, []);