apicloud apicloud

注册
查看: 873|回复: 6

[模块教程] quPaiModule模块demo示例

版主

UID:83211

主题:
161
帖子:
8736
云币:
1549

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

[模块教程] quPaiModule模块demo示例

873 6 | 发表于 2019-7-8 11:09:14 |阅读模式 | |
quPaiModule模块,实现了iOS、 Android 平台集成阿里SDK基础版本模块。可以设置录制时长、视频码率、美颜参数等丰富了app视频录制相关功能;(从3.0.5版本开始必须使用升级环境编译打包)

点击进入模块详情

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Module Develop</title>
  5.                 <meta charset="utf-8">
  6.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  7.                 <style type="text/css">
  8.                         html, body {
  9.                                 height: 100%
  10.                         }
  11.                         body {
  12.                                 background-color: #fff;
  13.                                 margin: 0;
  14.                         }
  15.                         #wrap {
  16.                                 height: 100%;
  17.                                 position: relative;
  18.                         }
  19.                         #header {
  20.                                 padding-top: 20px;
  21.                                 background-color: #5082c2;
  22.                                 height: 44px;
  23.                                 position: relative;
  24.                         }
  25.                         #header h1 {
  26.                                 font-size: 20px;
  27.                                 height: 44px;
  28.                                 line-height: 44px;
  29.                                 margin: 0em;
  30.                                 color: #fff;
  31.                                 margin-left: 100px;
  32.                                 margin-right: 100px;
  33.                                 text-align: center;
  34.                         }
  35.                         #main {
  36.                                 display: -webkit-box;
  37.                                 -webkit-box-orient: vertical;
  38.                                 -webkit-box-pack: center;
  39.                         }
  40.                         a.button {
  41.                                 display: -webkit-box;
  42.                                 -webkit-box-orient: vertical;
  43.                                 -webkit-box-pack: center;
  44.                                 -webkit-box-align: center;
  45.                                 height: 32px;
  46.                                 margin: 8px;
  47.                                 background-color: rgba(240,240,240,1.0);
  48.                                 border-color: rgba(220,220,220,1.0);
  49.                                 border-width: 2px;
  50.                                 border-style: solid;
  51.                         }
  52.                         a.active {
  53.                                 background-color: rgba(240,240,240,0.7);
  54.                         }
  55.                 </style>
  56.         </head>
  57.         <body>
  58.                 <div id="wrap">
  59.                         <div id="main">
  60.                                 <a class="button" tapmode="active" onclick="permissionCheck()">摄像头权限验证</a>
  61.                                 <a class="button" tapmode="active" onclick="record()">录制视频</a>
  62.                                 <a class="button" tapmode="active" onclick="getCacheSize()">获取缓存大小</a>
  63.                                 <a class="button" tapmode="active" onclick="clearCache()">清空缓存</a>
  64.                                 <a class="button" tapmode="active" onclick="playQuPai()">播放录制视频测试</a>
  65.                         </div>
  66.                 </div>
  67.         </body>
  68.         <script type="text/javascript" src="../script/api.js"></script>
  69.         <script>
  70.                 var demo;
  71.                 function record() {
  72.                         demo.record({
  73.                                 resolutionMode : 2,        //设置分辨率基数  1:360P 2:480P 3:540P 4:720P
  74.                                 ratioMode : 3,                //设置分辨率宽高比 1>3:4 2>1:1 3>9:16
  75.                                 recordMode : 3,                //设置录制模式 1>AUTO 2>PRESS 3>TOUCH
  76.                                 beautyStatus : true,//是否开启美颜
  77.                                 beautyLevel : 80,        //设置美颜级别 0-100
  78.                                 isCameraBack : false,//是否默认后置摄像头
  79.                                 isNeedClip : false,        //是否多段录制
  80.                                 minDuration : 2,        //最小时长(秒)
  81.                                 maxDuration : 30,        //最大时长(秒)
  82.                                 videoQuality : 2,        //设置输出视频质量 1:标清 2:高清 3:超清 4:超高清
  83.                                 gop : 5,                        //关键帧间隔
  84.                                 frameRate : 25,                //帧率
  85.                                 isImport : false //
  86.                         }, function(ret, err) {
  87.                                 alert("record|" + JSON.stringify(ret) + " " + JSON.stringify(err));
  88.                                 if (ret.status) {
  89.                                         $api.setStorage('videoPath', ret.videoPath);
  90.                                 }
  91.                         });
  92.                 }

  93.                 function getCacheSize() {
  94.                         demo.getCacheSize(function(ret, err) {
  95.                                 alert(JSON.stringify(ret));
  96.                         });
  97.                 }

  98.                 function clearCache() {
  99.                         demo.clearCache(function(ret, err) {
  100.                                 alert(JSON.stringify(ret));
  101.                         });
  102.                 }

  103.                 function permissionCheck() {
  104.                         demo.permissionCheck(function(ret, err) {
  105.                                 alert(JSON.stringify(ret));
  106.                         });
  107.                 }

  108.                 function playQuPai() {
  109.                         alert($api.getStorage('videoPath'));
  110.                         api.openWin({
  111.                                 name : 'playQuPai',
  112.                                 url : "openurl.html",
  113.                                 pageParam : {
  114.                                         url : $api.getStorage('videoPath')
  115.                                 }
  116.                         });
  117.                 }

  118.                 function apiready() {
  119.                         demo = api.require('quPaiModule');
  120.                         if (!demo) {
  121.                                 alert("请添加模块后编译");
  122.                                 return;
  123.                         }
  124.                 }
  125.         </script>
  126. </html>
复制代码


主题:
10
帖子:
785
云币:
460

APICloud粉丝一周年中秋节社会摇女朋友我李白贼6APICloud大会专属勋章不觉明厉强者王者足球狗捣蛋鬼

发表于 2019-7-10 14:58:05 |
感谢分享!

驾校小白

UID:682932

主题:
11
帖子:
29
云币:
7
发表于 2019-7-24 13:56:30 |
怎么播放录制的视频啊

版主

UID:83211

主题:
161
帖子:
8736
云币:
1549

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-7-24 14:01:43 来自手机 |
用播放模块。或者vidoe标签。

主题:
12
帖子:
59
云币:
92
发表于 2019-8-12 21:37:44 |
为什么录制的视频本地相册无法播放

版主

UID:83211

主题:
161
帖子:
8736
云币:
1549

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-8-13 06:40:12 |
小人物1992 发表于 2019-8-12 21:37
为什么录制的视频本地相册无法播放

不明白你描述的什么意思。。

主题:
0
帖子:
5
云币:
14
发表于 2019-12-9 08:58:31 |
看看去
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表