APICloud开发者进阶之路 | qiniuLive模块 解决拉流端模糊问题
- 2020 年 3 月 3 日
- 筆記
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> 复制代码
