video_livepusher.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. var pusher = null;
  12. var bstart = false;
  13. // H5 plus事件处理
  14. function plusReady(){
  15. // 创建直播推流控件
  16. pusher = new plus.video.LivePusher('pusher',{url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'});
  17. // 监听状态变化事件
  18. pusher.addEventListener('statechange', function(e){
  19. console.log('statechange: '+JSON.stringify(e));
  20. }, false);
  21. }
  22. document.addEventListener('plusready', plusReady, false);
  23. // 开始/停止推流
  24. function ppPusher() {
  25. if(bstart) {
  26. pusher.stop();
  27. bstart=false;
  28. }else {
  29. var path = document.getElementById('path').value;
  30. if(path && path.length>0) {
  31. pusher.setOptions({url:path});
  32. pusher.start();
  33. bstart=true
  34. }else {
  35. plus.nativeUI.toast('请输入直播服务器地址');
  36. }
  37. }
  38. var pp = document.getElementById('pp');
  39. pp.innerText = bstart?'停止':'开始';
  40. }
  41. // 切换摄像头
  42. function switchCamera() {
  43. pusher.switchCamera();
  44. }
  45. </script>
  46. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  47. <style type="text/css">
  48. input {
  49. width:70%;
  50. font-size: 16px;
  51. padding: .2em .2em;
  52. border: 1px solid #00B100;
  53. -webkit-user-select: text;
  54. }
  55. button {
  56. width:20%;
  57. margin:6px 0 6px 6px;
  58. font-size: 16px;
  59. color: #FFF;
  60. background-color: #00CC00;
  61. border: 1px solid #00B100;
  62. padding: .2em 0em;
  63. -webkit-border-radius: 5px;
  64. border-radius: 5px;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <br/>
  70. <div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>
  71. <br/>
  72. <div style="text-align:center; margin:auto;">
  73. <input id="path" type="text" value="" placeholder="请输入直播服务器地址(rtmp)"/>
  74. <button id="pp" onclick="ppPusher()">开始</button>
  75. </div>
  76. <div class="button" onclick="switchCamera()">切换摄像头</div>
  77. </body>
  78. </html>