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

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>

<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″ />
<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>
< title > AUI complete layout quickly
<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />
</head>
<body>
<div class=”aui-tips”>
Please click the “search device” button at the bottom to search for devices that can be cast on the screen
</div>
<div class=”aui-content aui-margin-b-15″>
<ul class=”aui-list aui-list-in” id=”deviceList”>
</ul>
</div>
<div >
<div class=”aui-range” >
Volume < input type = “range” class = “AUI range” value = 0 “max =” 100 “Min =” 1 “Step =” 1 “id =” rangevolume “/ >
</div>
<div class=”aui-range” >
Progress < input type = “range” class = “AUI range” value = 0 “max =” 100 “Min =” 1 “Step =” 1 “id =” rangeseek “/ >
</div>
</div>
<footer class=”aui-bar aui-bar-tab” id=”footer”>
<div class=”aui-bar-tab-item ” tapmode>
< div class = “AUI bar tab label” > search device < / div >
</div>
<div class=”aui-bar-tab-item” tapmode>
< div class = “AUI bar tab label” > video projection < / div >
</div>
<div class=”aui-bar-tab-item” tapmode>
< div class = “AUI bar tab label” > switch video < / div >
</div>
<div class=”aui-bar-tab-item” tapmode>
< div class = “AUI bar tab label” > exit the screen < / div >
</div>
<div class=”aui-bar-tab-item” tapmode >
</div>
</footer>
</body>
<script type=”text/javascript”></script>
<script type=”text/javascript”></script>
<script type=”text/javascript”></script>
<script type=”text/javascript”>
var touping;
var deviceIndex;
apiready = function() {
api.parseTapmode();
touping = api.require(‘touping’);
}
var tab = new auiTab({
element: document.getElementById(“footer”),
index: 5,
repeatClick: true
}, function(ret) {
console.log(ret.index);
if (ret) {
if (ret.index == 1) {
browse();
} else if (ret.index == 2) {
play();
} else if (ret.index == 3) {
playUrl();
} else if (ret.index == 4) {
stop();
}
}
});
function browse() {
$api.byId(‘deviceList’).innerHTML = ”;
touping.browse(function(ret, err) {
if (ret.status) {
showDeviceList(ret.deviceList);
document.getElementById (“tips”). Textcontent = “found”+ ret.deviceList.length +”Device (s), please select the device to be put on screen”;
} else {
document.getElementById (“tips”). Textcontent: “no device is found, please check whether there is any device that can be projected in the current LAN”;
}
});
}
function showDeviceList(deviceList) {
for (var i = 0; i < deviceList.length; i++) {
var item = ‘<li class=”aui-list-item” onclick=”choiceDevice(“‘ + deviceList[i].name + ‘”,’ + i + ‘)”>’;
item += ‘<div class=”aui-list-item-inner”>’;
item += deviceList[i].name;
item += ‘</div>’;
item += ‘</li>’;
$api.byId(‘deviceList’).insertAdjacentHTML(‘beforeEnd’, item);
}
}
function choiceDevice(name, index) {
deviceIndex = index;
document.getElementById (“tips”). Textcontent: “you have selected” + name + “to cast the screen;
}
function play() {
touping.play({
index: deviceIndex,
url: “http://wvideo.spriteapp.cn/video/2016/0328/56f8ec01d9bfe_wpd.mp4”
}, function(ret, err) {
alert(JSON.stringify(ret));
});
}
function playUrl() {
touping.playUrl({
url: “http://file.qiushiriji.com/file/video/2019-08-13/172/1565702535263.mp4”
}, function(ret, err) {
alert(JSON.stringify(ret));
});
}
function stop() {
touping.stop(function(ret, err) {
alert(JSON.stringify(ret));
});
}
function volume(value) {
touping.volume({
value: value
}, function(ret, err) {
console.log(JSON.stringify(ret));
});
}
function seek(value) {
touping.seek({
value: value
}, function(ret, err) {
console.log(JSON.stringify(ret));
});
}
var range1 = new auiRange({
element: document.getElementById (“rangevolume”) / / slider container
}, function(ret) {
volume(ret.value);
})
var range2 = new auiRange({
element: document.getElementById (“rangeseek”) / / slider container
}, function(ret) {
seek(ret.value);
})
</script>
</html>

A kind of Copy code_`

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

Recommended Today

Simple disk operation and maintenance