A especificação HTML5+ do Hbuilder oferece conveniência para desenvolvedores. Ao testtar as APIs de transmissão e visualiazção de streaming ao vivo, percebe-se que elas funcionam, mas apresentam limitações em comparação com aplicativos nativos. A qualidade de áudio pode não ser ideal, e a reprodução usando protocolo HLS (m3u8) tende a travar, enquanto o RTMP funciona de maneira estável. As inconsistências podem estar relacionadas à compatibilidade do dispositivo. A seguir, eexmplos de código para transmissão e visualização.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Exemplo de Transmissão ao Vivo</title>
<script type="text/javascript">
var transmissor = null;
// Inicialização quando o H5 plus estiver pronto
function aoProntoPlus() {
// Cria um componente de transmissão ao vivo
transmissor = new plus.video.LivePusher('transmissor', {
url: 'rtmp://endereco-do-servidor-de-transmissao',
modo: 'FHD',
mudo: false,
});
transmissor.previsualizar();
// Monitora mudanças de estado
transmissor.addEventListener('mudancadeestado', function(evento) {
console.log('Mudança de estado: ' + JSON.stringify(evento));
}, false);
}
document.addEventListener('plusready', aoProntoPlus, false);
// Atualiza o endereço do servidor de transmissão
function atualizarEnderecoTransmissao() {
var endereco = document.getElementById('endereco-transmissao').value;
transmissor.setOpcoes({
url: endereco
});
}
// Inicia a transmissão
function iniciarTransmissao() {
transmissor.iniciar();
}
// Alterna entre câmeras
function alternarCamera() {
transmissor.trocarCamera();
}
</script>
</head>
<body style="margin:0;padding:0;text-align:center;">
<div id="transmissor" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
<br/>
<input type="text" id="endereco-transmissao" value="rtmp://endereco-do-servidor-de-transmissao" style="width: 500px;"/> <br><br>
<button onclick="atualizarEnderecoTransmissao()">Atualizar Endereço</button>
<br/><br>
<button onclick="iniciarTransmissao()">Iniciar Transmissão</button> <br><br><button onclick="alternarCamera()">Alternar Câmera</button>
<br/><br/>
</body>
</html>
Exemplo de código para visualização de streaming:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Visualização de Vídeo</title>
<script type="text/javascript">
var fonteVideo = 'endereco-de-visualizacao-suporta-rtmp-http';
var player = null;
// Inicialização quando o H5 plus estiver pronto
function aoProntoPlus() {
// Cria um componente de vídeo
player = new plus.video.VideoPlayer('player', {
src: fonteVideo
});
player.reproduzir();
}
document.addEventListener('plusready', aoProntoPlus, false);
// Altera a fonte do vídeo
function mudarFonteVideo(novaFonte) {
document.getElementById('conteudo-atual').innerHTML = novaFonte;
console.log(novaFonte);
player.setOpcoes({src: novaFonte});
player.reproduzir();
}
</script>
</head>
<body style="margin:0;padding:0;text-align:center;">
<span id="conteudo-atual" style="color:#0000FF">Padrão</span><br>
<div id="player" style="width:100%;height:300px;background-color:#ffffff;margin:auto;"></div>
<br>
<button onclick="mudarFonteVideo('endereco-fonte-1')">Mudar para Fonte 1</button><br /><br>
<button onclick="mudarFonteVideo('endereco-streaming-2')">Assistir Streaming 2 via RTMP</button><br /><br>
<button onclick="mudarFonteVideo('endereco-streaming-3')">Assistir Streaming 3 via HLS</button><br />
</body>
</html>