qiniuLive模块解决拉流端模糊问题示例

qiniuLive模块推流成功后拉流端湖可能会出现画面模糊等问题。
这说明你的配置不是最佳的。

分享一个我个人感觉比较清晰流畅的案例（调试了好久

在 Android 端推流与拉流的开始都需要在监听里执行监听状态码
文档连接 https://docs.apicloud.com/Client-API/Open-SDK/qiniuLive
注意：测试时或运行时打开推流关闭后要销毁，自定义loader调试重启页面也要先销毁一下再测试
，否则内存溢出会闪退。
推流端代码的实现

<!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" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
body {}
footer{
width: 100%;
padding: 30px;
position: absolute;
bottom: 0px;
text-align: center;
}
button{
padding: 8px;
margin: 5px;
border-radius: 5px;
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<footer>
<button type="button" name="button" onclick="Profile()">预览</button>
<button type="button" name="button" onclick="changeCamera()">切换摄像头</button>
<button type="button" name="button" onclick="stopStreamQ()">关闭推流</button>
<button type="button" name="button" onclick="destroy()">销毁</button>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var qiniuLive = null;
apiready = function() {
qiniuLive = api.require('qiniuLive');
setTimeout(function () {
initQi();
}, 2000);
};
function initQi() {
qiniuLive.initStreamingEnv(function(ret) {
console.log('初始化成功-----》' + JSON.stringify(ret));
addEventListen();
});
}
function Profile() {
var quikeid = '*******************************************hOF49rIM5av8MfJJ326noohMJE=';
qiniuLive.setStreamingProfile({
rect: {
x: 0,
y: 0,
w: api.frameWidth,
h: api.frameWidth * (4/3)
},
remoteWindowRect: [{
x: api.frameWidth - 120,
y: api.frameWidth * (4/3) - 160,
w: 120,
h: 160
}],
pushUrl: quikeid,
videoCapture: {
videoFrameRate: 20,
sessionPreset: '1280*720',
previewMirrorFrontFacing: true,
previewMirrorRearFacing: false,
streamMirrorFrontFacing: false,
streamMirrorRearFacing: false,
videoOrientation: 'portrait',
cameraPosition: 'front'
},
previewSetting: {
previewSizeLevel: 'small', // 字符类型；相机预览大小等级
// 取值范围：small, medium, large
previewSizeRatio: 'ratio_4_3' // 字符类型；相机预览大小比例 //这个会改变本地的比例大小吗？
// 取值范围：ratio_4_3, ratio_16_9
},
videoEncodeHeight: '1080',
videoStream: {
videoSize: {
width: 368,
height: 640
},
videoQuality: 'medium3'
},
audioQuality:'high',
localWinPosition: {
x: 0,
y: 0,
w: 480,
h: 640
},
encodeOritation: "protrait",
face: {
beautify: false,
setBeautify: 0,
setWhiten: 0,
setRedden: 0
},
continuousFocus: false,
fixedOn: api.frameName,
fixed: true
}, function(ret) {
if (ret.status) {
console.log('setStreamingProfile成功' + JSON.stringify(ret));
}
});
}
function addEventListen() {
qiniuLive.addEventListener({
name: 'streamStatus'
},function(ret) {
if (ret.streamStatus == 17) {
console.log('准备就绪可以推流--------->' + JSON.stringify(ret));
qiniuLive.startStream(function(ret){
console.log('推流成功-------->' + JSON.stringify(ret));
});
}
});
}
function destroy() {
qiniuLive.destroyStream();
}
function changeCamera() {
qiniuLive.toggleCamera();
}
function stopStreamQ() {
qiniuLive.stopStream(function(ret){
console.log('推流结束------->' + JSON.stringify(ret));
});
}
</script>
</html>

复制代码

拉流端代码的实现

<!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"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
body{
}
footer{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<footer>
<h1>拉流端</h1>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
// api.addEventListener({
// name:'swipedown'
// }, function(ret, err){
// alert('向下轻扫');
// });
setTimeout(function () {
fninitPMediaPlayer();
}, 3000);
};
function fninitPMediaPlayer() {
var qiniuLive = api.require("qiniuLive");
qiniuLive.addEventListener({
name: 'status'
},function(ret) {
if (ret.status == 2 ) {
qiniuLive.start(function(ret) {
alert(JSON.stringify(ret));
});
}
});
qiniuLive.initPMediaPlayer({
rect: {
x: 0,
y: 0,
w: api.frameWidth,
h: api.frameWidth * (4/3)
},
dataUrl: 'http://pili***************************************615891.m3u8',
codec: 0,
prepareTimeout: 10000,
readTimeout: 10000,
isLiveStream: false,
isDelayOptimization: false,
cacheBufferDuration: 2000,
maxCacheBufferDuration: 4000,
fixedOn: api.frameName,
fixed: true
},function(ret) {
});
}
</script>
</html>

复制代码

运行截图

qiniuLive模块 解决拉流端模糊问题 示例