このトピックでは、Co-streaming SDK for Webを統合する方法について説明します。
使用上の注意
SDKは、共同ストリーミング機能をwebアプリケーションに統合するためにのみ使用できます。 アプリケーションがこの機能を必要としない場合は、他のクライアントのプッシュSDKを使用できます。 詳細については、「SDKのダウンロードとリリースノート」をご参照ください。
コストリーミング用の取り込みURLとストリーミングURLの構成は異なります。 詳細については、「共同ストリーミングURLジェネレーター」をご参照ください。
サポートされているブラウザ
Co-streaming SDK for Webをサポートするブラウザーを次の表に示します。
オペレーティングシステム | ブラウザ | サポートされている最古のバージョン | SDKバージョン |
Windows | Chrome | 63 | - |
Firefox | 62 | - | |
Opera | 15 | - | |
Edge | 79 | V2.0.3以降 | |
QQブラウザ | 63 (Chromeカーネル付き) | V2.1.0以降 | |
Mac | Chrome | 63 | - |
Safari | 11 | - | |
Firefox | 62 | - | |
Opera | 15 | - | |
Edge | 79 | V2.0.3以降 | |
QQブラウザ | 63 (Chromeカーネル付き) | V2.1.0以降 | |
Android | Chrome | 63 | - |
Edge | 79 | V2.0.3以降 | |
WeChat組み込みブラウザ | 7.0.9 (WeChatバージョン) | - | |
QQブラウザ | 63 (Chromeカーネル付き) | V2.1.0以降 | |
HUAWEIブラウザ | 63 (Chromeカーネル付き) | V2.1.0以降 | |
OppoブラウザとOnePlusブラウザ | 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ブラウザ | 11 (Safariカーネル付き) | V2.1.0以降 |
共同ストリーミングSDK for Webの統合
JavaScript
Web用のCo-streaming 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>SDKによって提供されるメソッドを使用します。 次のサンプルコードは、使用可能なマイクのリストを取得するメソッドを定義する方法の例を示しています。
<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> // Define a method to retrieve a list of available microphones. <script type="text/javascript"> function getMicrophones() { window.AlivcLivePush.AlivcLivePusher.getMicrophones().then(microphones => { console.log ('Microphones:',microphones); }) } </script> //... // Code for other features. //... <body> <a href="#" onclick="getMicrophones()"> Available microphones</a> </body>ApsaraVideo Player SDK for Webをインポートします。 SDKは、アプリケーションでライブストリームを再生するために必要です。
<head> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" /> // You must add the .css file for the HTML5 player. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script> // You must add the .js file for the HTML5 player. </head>詳細については、「クイック統合」をご参照ください。
TypeScript
次のサンプルコードは、TypeScriptを使用するプロジェクトにSDKをインポートする方法の例を示しています。 この例では、プロジェクトはReact 16.8以降のバージョンを使用します。
Web用のCo-streaming SDKをインポートします。
useEffect(() => { // Import Co-streaming SDK for Web. 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によって提供されるメソッドを使用します。 次のサンプルコードは、使用可能なマイクのリストを取得するメソッドを定義する方法の例を示しています。
// Define a method to retrieve a list of available microphones. const getMicrophones = async () => { const microphones=await window.AlivcLivePush.AlivcLivePusher.getMicrophones(); console.log ('Microphones:',microphones); } //... // Code for other features. //... return ( <div> <a href="#" onClick={getMicrophones}>Available microphones</a> </div> );ApsaraVideo Player SDK for Webをインポートします。 SDKは、アプリケーションでライブストリームを再生するために必要です。
useEffect(() => { //... // Import the SDK in the same manner as importing Co-streaming SDK for Web. //... }, []);詳細については、「クイック統合」をご参照ください。