<!DOCTYPE HTML>
|
<html>
|
<head>
|
<meta charset="utf-8"/>
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
<meta name="HandheldFriendly" content="true"/>
|
<meta name="MobileOptimized" content="320"/>
|
<title>Hello H5+</title>
|
<script type="text/javascript" src="../js/common.js"></script>
|
<script type="text/javascript">
|
var pusher = null;
|
var bstart = false;
|
// H5 plus事件处理
|
function plusReady(){
|
// 创建直播推流控件
|
pusher = new plus.video.LivePusher('pusher',{url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'});
|
// 监听状态变化事件
|
pusher.addEventListener('statechange', function(e){
|
console.log('statechange: '+JSON.stringify(e));
|
}, false);
|
}
|
document.addEventListener('plusready', plusReady, false);
|
// 开始/停止推流
|
function ppPusher() {
|
if(bstart) {
|
pusher.stop();
|
bstart=false;
|
}else {
|
var path = document.getElementById('path').value;
|
if(path && path.length>0) {
|
pusher.setOptions({url:path});
|
pusher.start();
|
bstart=true
|
}else {
|
plus.nativeUI.toast('请输入直播服务器地址');
|
}
|
}
|
var pp = document.getElementById('pp');
|
pp.innerText = bstart?'停止':'开始';
|
}
|
// 切换摄像头
|
function switchCamera() {
|
pusher.switchCamera();
|
}
|
</script>
|
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
|
<style type="text/css">
|
input {
|
width:70%;
|
font-size: 16px;
|
padding: .2em .2em;
|
border: 1px solid #00B100;
|
-webkit-user-select: text;
|
}
|
button {
|
width:20%;
|
margin:6px 0 6px 6px;
|
font-size: 16px;
|
color: #FFF;
|
background-color: #00CC00;
|
border: 1px solid #00B100;
|
padding: .2em 0em;
|
-webkit-border-radius: 5px;
|
border-radius: 5px;
|
}
|
|
</style>
|
</head>
|
<body>
|
<br/>
|
<div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>
|
<br/>
|
<div style="text-align:center; margin:auto;">
|
<input id="path" type="text" value="" placeholder="请输入直播服务器地址(rtmp)"/>
|
<button id="pp" onclick="ppPusher()">开始</button>
|
</div>
|
<div class="button" onclick="switchCamera()">切换摄像头</div>
|
</body>
|
</html>
|
