APICloud开发者进阶之路 | 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>
复制代码

　　运行截图

APICloud开发者进阶之路 | qiniuLive模块 解决拉流端模糊问题

猜你喜欢

APICloud开发者进阶之路 | qiniuLive模块解决拉流端模糊问题