H5 直播推流

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>推流测试</title>
 </head>
 <body>
  <object wmode="transparent" id="rtmp-streamer" type="application/x-shockwave-flash" data="https://imgcache.qq.com/open/qcloud/video/act/live_web_push/RtmpStreamer.swf"; width="500" height="450" style="border: 1px solid #333;">
   <param value="always" name="allowScriptAccess" />
   <param value="https://imgcache.qq.com/open/qcloud/video/act/live_web_push/RtmpStreamer.swf"; name="movie" />
   <param value="high" name="quality" />
  </object>

  <button id="push">开始推流</button>

  <script type="text/javascript">
   document.getElementById('push').onclick = function() {
    var elem = document.getElementById('rtmp-streamer');
    console.log(elem.publish);
    // 直播地址
    var rtmp = 'rtmp://live.push.teacherasked.cn/live/6412fef87392ae8c987b0ecc79da1902'
    let urls = rtmp.split('/');
    let name = urls.pop();
    let url = urls.join("/");
    // flash 的推流方法publish
    elem.publish(url, name);
   };
  </script>
 </body>
</html>

存在问题描述:

  1. 必须启用https
  2. 必须是chrome浏览器或谷歌浏览器内核
  3. 谷歌 在今年12月份全部下架flash 也是问题
  4. 建议研究websocket 直接对服务器进行推流数据包

在线代码编辑网址:
https://www.runoob.com/try/try.php?filename=tryhtml5_video_bear

更多推荐