Apicloud developer’s way to advance | [module tutorial] Touping module demo example

Time:2020-11-23

The Touping module realizes the video screen casting function based on DLNA in LAN, and supports the functions of searching equipment, casting and playing, adjusting the playing progress, adjusting the volume and exiting the screen.
`1. <!DOCTYPE HTML>

  1. <html>
  2. <head>
  3.     <meta charset=”utf-8″>
  4.     <meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″ />
  5.     <meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
  6. < title > AUI complete layout quickly
  7.     <link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
  8. </head>
  9. <body>
  10.     <div class=”aui-tips”>
  11. Please click the “search device” button at the bottom to search for devices that can be cast on the screen
  12.     </div>
  13.     <div class=”aui-content aui-margin-b-15″>
  14.         <ul class=”aui-list aui-list-in” id=”deviceList”>
  15.         </ul>
  16.     </div>
  17.     <div >
  18.         <div class=”aui-range” >
  19. Volume < input type = “range” class = “AUI range” value = 0 “max =” 100 “Min =” 1 “Step =” 1 “id =” rangevolume “/ >
  20.         </div>
  21.         <div class=”aui-range” >
  22. Progress < input type = “range” class = “AUI range” value = 0 “max =” 100 “Min =” 1 “Step =” 1 “id =” rangeseek “/ >
  23.         </div>
  24.     </div>
  25.     <footer class=”aui-bar aui-bar-tab” id=”footer”>
  26.         <div class=”aui-bar-tab-item ” tapmode>
  27. < div class = “AUI bar tab label” > search device < / div >
  28.         </div>
  29.         <div class=”aui-bar-tab-item” tapmode>
  30. < div class = “AUI bar tab label” > video projection < / div >
  31.         </div>
  32.         <div class=”aui-bar-tab-item” tapmode>
  33. < div class = “AUI bar tab label” > switch video < / div >
  34.         </div>
  35.         <div class=”aui-bar-tab-item” tapmode>
  36. < div class = “AUI bar tab label” > exit the screen < / div >
  37.         </div>
  38.         <div class=”aui-bar-tab-item” tapmode >
  39.         </div>
  40.     </footer>
  41. </body>
  42. <script type=”text/javascript”></script>
  43. <script type=”text/javascript”></script>
  44. <script type=”text/javascript”></script>
  45. <script type=”text/javascript”>
  46.     var touping;
  47.     var deviceIndex;
  48.     apiready = function() {
  49.         api.parseTapmode();
  50.         touping = api.require(‘touping’);
  51.     }
  52.     var tab = new auiTab({
  53.         element: document.getElementById(“footer”),
  54.         index: 5,
  55.         repeatClick: true
  56.     }, function(ret) {
  57.         console.log(ret.index);
  58.         if (ret) {
  59.             if (ret.index == 1) {
  60.                 browse();
  61.             } else if (ret.index == 2) {
  62.                 play();
  63.             } else if (ret.index == 3) {
  64.                 playUrl();
  65.             } else if (ret.index == 4) {
  66.                 stop();
  67.             }
  68.         }
  69.     });
  70.     function browse() {
  71.         $api.byId(‘deviceList’).innerHTML = ”;
  72.         touping.browse(function(ret, err) {
  73.             if (ret.status) {
  74.                 showDeviceList(ret.deviceList);
  75. document.getElementById (“tips”). Textcontent = “found”+ ret.deviceList.length +”Device (s), please select the device to be put on screen”;
  76.             } else {
  77. document.getElementById (“tips”). Textcontent: “no device is found, please check whether there is any device that can be projected in the current LAN”;
  78.             }
  79.         });
  80.     }
  81.     function showDeviceList(deviceList) {
  82.         for (var i = 0; i < deviceList.length; i++) {
  83.             var item = ‘<li class=”aui-list-item” onclick=”choiceDevice(“‘ + deviceList[i].name + ‘”,’ + i + ‘)”>’;
  84.             item += ‘<div class=”aui-list-item-inner”>’;
  85.             item += deviceList[i].name;
  86.             item += ‘</div>’;
  87.             item += ‘</li>’;
  88.             $api.byId(‘deviceList’).insertAdjacentHTML(‘beforeEnd’, item);
  89.         }
  90.     }
  91.     function choiceDevice(name, index) {
  92.         deviceIndex = index;
  93. document.getElementById (“tips”). Textcontent: “you have selected” + name + “to cast the screen;
  94.     }
  95.     function play() {
  96.         touping.play({
  97.             index: deviceIndex,
  98.             url: “http://wvideo.spriteapp.cn/video/2016/0328/56f8ec01d9bfe_wpd.mp4”
  99.         }, function(ret, err) {
  100.               alert(JSON.stringify(ret));
  101.         });
  102.     }
  103.     function playUrl() {
  104.         touping.playUrl({
  105.             url: “http://file.qiushiriji.com/file/video/2019-08-13/172/1565702535263.mp4”
  106.         }, function(ret, err) {
  107.             alert(JSON.stringify(ret));
  108.         });
  109.     }
  110.     function stop() {
  111.         touping.stop(function(ret, err) {
  112.             alert(JSON.stringify(ret));
  113.         });
  114.     }
  115.     function volume(value) {
  116.         touping.volume({
  117.             value: value
  118.         }, function(ret, err) {
  119.             console.log(JSON.stringify(ret));
  120.         });
  121.     }
  122.     function seek(value) {
  123.         touping.seek({
  124.             value: value
  125.         }, function(ret, err) {
  126.             console.log(JSON.stringify(ret));
  127.         });
  128.     }
  129.     var range1 = new auiRange({
  130. element: document.getElementById (“rangevolume”) / / slider container
  131.     }, function(ret) {
  132.         volume(ret.value);
  133.     })
  134.     var range2 = new auiRange({
  135. element: document.getElementById (“rangeseek”) / / slider container
  136.     }, function(ret) {
  137.         seek(ret.value);
  138.     })
  139. </script>
  140. </html>

A kind of Copy code_`