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> 複製程式碼
