Intégrer le SDK Web Co-streaming - ApsaraVideo Live - Centre de documentation Alibaba Cloud

Notes

Important

Si vos spectateurs n'ont pas besoin de participer à la co-diffusion, utilisez d'autres méthodes d'intégration. Pour plus d'informations, consultez la rubrique Téléchargement du SDK.
La co-diffusion web nécessite des URL d'ingestion et de diffusion différentes de celles de la diffusion classique. Pour plus d'informations, consultez le Générateur d'URL de co-diffusion.
Pour la co-diffusion web, utilisez le SDK Web Co-streaming (imp-web-live-push), disponible à l'adresse https://g.alicdn.com/apsara-media-box/imp-web-live-push/6.4.9/alivc-live-push.js. N'utilisez pas imp-web-rtc : ce dernier est destiné aux scénarios ARTC génériques, n'est pas publié sur le chemin de distribution CDN standard et n'inclut pas les API spécifiques à la co-diffusion.

Prérequis navigateur

Le tableau suivant répertorie les navigateurs compatibles avec le SDK Web Co-streaming.

Système d'exploitation	Navigateur	Version minimale prise en charge	Prérequis de version du SDK
Windows	Chrome	63	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 ou ultérieure
	QQ Browser	63 (version du noyau Chrome)	V2.1.0 ou ultérieure
Mac	Chrome	63	-
	Safari	11	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 ou ultérieure
	QQ Browser	63 (version du noyau Chrome)	V2.1.0 ou ultérieure
Android	Chrome	63	-
	Edge	79	V2.0.3 ou ultérieure
	Navigateur intégré WeChat	7.0.9 (version WeChat)	-
	QQ Browser	63 (version du noyau Chrome)	V2.1.0 ou ultérieure
	Huawei Browser	63 (version du noyau Chrome)	V2.1.0 ou ultérieure
	OPPO Browser, OnePlus Browser	40.7.39.1 (version du noyau HeyTapBrowser)	V2.1.0 ou ultérieure
iOS	Safari	11	-
	Edge	79	V2.0.3 ou ultérieure
	Navigateur intégré WeChat	7.0.9 (version WeChat)	-
	Navigateur intégré DingTalk	11.2.5 (version DingTalk)	-
	QQ Browser	11 (version du noyau Safari)	V2.1.0 ou ultérieure

Intégration rapide

Avant de démarrer la co-diffusion, authentifiez-vous via un jeton :

Côté serveur, appelez l'opération CreateLiveMessageApp pour obtenir l'AppId, l'AppKey et l'AppSign de votre application de messagerie.
Côté serveur, appelez l'opération GetMessageToken pour obtenir un AccessToken. Les paramètres suivants sont requis : AppId, DeviceId, DeviceType (ios, android, web ou pc), et UserId. L'AccessToken renvoyé inclut les endpoints (adresse de connexion IM), l'appId et un jeton JWT.
Côté client, transmettez l'AccessToken et l'AppSign à la méthode joinChannel en tant que paramètre authInfo pour finaliser l'authentification.

Important

L'AppSign est obligatoire et ne doit pas être filtré côté serveur. Si l'AppSign est manquant, le SDK renvoie une erreur « authInfo is empty ».

JavaScript

Importez le SDK Web Co-streaming.

<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>

L'exemple suivant montre comment récupérer la liste des microphones.

<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 get the list of microphones.
<script type="text/javascript">
    function getMicrophones() {
        window.AlivcLivePush.AlivcLivePusher.getMicrophones().then(microphones => {
            console.log('Microphone list:',microphones);
        })
    }
</script>

//...
//... Other code
//...

<body>
  <a href="#" onclick="getMicrophones()">Get microphone list</a>
</body>

Importez le SDK Web Player. Cette étape est requise pour les spectateurs standards.

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  // (Required) For the HTML5 player, you must reference this CSS file.
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>  // (Required) Import the JS file for the HTML5 player.
</head>

Pour plus d'informations, consultez la rubrique Intégration rapide du SDK Web Player.

TypeScript

Pour les projets TypeScript, importez le SDK comme suit. Cet exemple utilise React 16.8 ou une version ultérieure.

Importez le SDK Web Co-streaming.

useEffect(() => {
    // Import the Web Co-streaming 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);

 }, []);

Utilisez le SDK. Par exemple, récupérez la liste des microphones.

// Define a method to get the list of microphones.
const getMicrophones = async () => {
    const microphones=await window.AlivcLivePush.AlivcLivePusher.getMicrophones();
    console.log('Microphone list:',microphones);
}

//...
//... Other code
//...

return (
   <div>
      <a href="#" onClick={getMicrophones}>Click to get microphone list</a>
    </div>
 );

Importez le SDK Web Player. Cette étape est requise pour les spectateurs standards.
```
useEffect(() => {
    //...
    // For the content, see the example for importing the Web Co-streaming SDK.
    //...
 }, []);
```
Pour plus d'informations, consultez la rubrique Intégration rapide du SDK Web Player.

Références

Référence de l'API du SDK Web Co-streaming

Guide de développement de la co-diffusion web