Integre o Web Co-streaming SDK à sua aplicação web para ativar recursos de co-streaming em tempo real.
Observações
Se os espectadores não precisarem de co-streaming, adote outros métodos de integração. Para mais detalhes, consulte Baixe o SDK.
URLs de ingestão e transmissão para co-streaming web diferem das utilizadas em streams convencionais. Consulte o Gerador de URL de co-streaming para obter mais informações.
Requisitos de navegador
A tabela a seguir lista os navegadores compatíveis com o Web Co-streaming SDK.
|
Sistema operacional |
Navegador |
Versão mínima suportada |
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 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 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 Chrome) |
V2.1.0 ou posterior |
|
|
Huawei Browser |
63 (versão do kernel Chrome) |
V2.1.0 ou posterior |
|
|
OPPO Browser, OnePlus Browser |
40.7.39.1 (versão do kernel 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 Safari) |
V2.1.0 ou posterior |
Integração rápida
JavaScript
-
Importe o 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> -
Obtenha a lista de microfones conforme o exemplo abaixo.
<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 Web Player SDK, necessário para espectadores comuns.
<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 mais detalhes, consulte Integração rápida do Web Player SDK.
TypeScript
Em projetos TypeScript, importe o SDK conforme o exemplo a seguir. Este exemplo usa React 16.8 ou superior.
-
Importe o Web Co-streaming SDK.
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 Web Player SDK, obrigatório para espectadores comuns.
useEffect(() => { //... // For the content, see the example for importing the Web Co-streaming SDK. //... }, []);Para mais informações, consulte Integração rápida do Web Player SDK.