Integre o SDK de Co-streaming para Web à sua aplicação web para ative recursos de co-streaming em tempo real.
Integre o SDK de Co-streaming para Web à sua aplicação web para ative recursos de co-streaming em tempo real.
Observações
Se os seus espectadores não precisarem de co-streaming, use outros métodos de integração. Para obter mais informações, consulte SDK baixe.
O co-streaming para Web exige URLs de ingestão e de streaming diferentes das usadas no streaming padrão. Para obter mais informações, consulte Co-streaming URL generator.
Requisitos do navegador
A tabela a seguir lista os navegadores compatíveis com o SDK de Co-streaming para Web.
Sistema operacional | Navegador | Versão mínima compatível | Requisitos de versão do SDK |
Windows | Chrome | 63 | - |
Firefox | 62 | - | |
Opera | 15 | - | |
Edge | 79 | V2.0.3 ou posterior | |
QQ Browser | 63 (versão do kernel do Chrome) | V2.1.0 ou posterior | |
Mac | Chrome | 63 | - |
Safari | 11 | - | |
Firefox | 62 | - | |
Opera | 15 | - | |
Edge | 79 | V2.0.3 ou posterior | |
QQ Browser | 63 (versão do kernel do Chrome) | V2.1.0 ou posterior | |
Android | Chrome | 63 | - |
Edge | 79 | V2.0.3 ou posterior | |
Navegador integrado do WeChat | 7.0.9 (versão do WeChat) | - | |
QQ Browser | 63 (versão do kernel do Chrome) | V2.1.0 ou posterior | |
Huawei Browser | 63 (versão do kernel do Chrome) | V2.1.0 ou posterior | |
OPPO Browser, OnePlus Browser | 40.7.39.1 (versão do kernel do HeyTapBrowser) | V2.1.0 ou posterior | |
iOS | Safari | 11 | - |
Edge | 79 | V2.0.3 ou posterior | |
Navegador integrado do WeChat | 7.0.9 (versão do WeChat) | - | |
Navegador integrado do DingTalk | 11.2.5 (versão do DingTalk) | - | |
QQ Browser | 11 (versão do kernel do Safari) | V2.1.0 ou posterior |
Integração rápida
JavaScript
-
Importe o SDK de Co-streaming para Web.
<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> -
O exemplo a seguir mostra como obter a lista de microfones.
<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> -
Importe o SDK do Web Player. Isso é necessário para os espectadores regulares.
<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>Para obter mais informações, consulte Quick integration of the Web Player SDK.
TypeScript
Para projetos TypeScript, importe o SDK da seguinte forma. Este exemplo usa o React 16.8 ou superior.
-
Importe o SDK de Co-streaming para Web.
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); }, []); -
Use o SDK. Por exemplo, obtenha a lista de microfones.
// 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> ); -
Importe o SDK do Web Player. Isso é necessário para os espectadores regulares.
useEffect(() => { //... // For the content, see the example for importing the Web Co-streaming SDK. //... }, []);Para obter mais informações, consulte Quick integration of the Web Player SDK.