apicloud apicloud

注册
查看: 2145|回复: 10

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

版主

UID:83211

主题:
163
帖子:
8972
云币:
1718

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

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

2145 10 | 发表于 2019-7-1 11:34:11 |阅读模式 | |
miniQuPaiPlus模块是miniQuPai模块的优化升级版,对拍摄界面进行重新优化布局,实现了iOS平台集成短视频录制的模块丰富了app视频录制相关功能,让app开发者快速集成短视频录制功能。

点击进入模块详情

  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,
  9.                 body {
  10.                         height: 100%
  11.                 }

  12.                 body {
  13.                         background-color: #fff;
  14.                         margin: 0;
  15.                 }

  16.                 #wrap {
  17.                         height: 100%;
  18.                         position: relative;
  19.                 }

  20.                 #header {
  21.                         padding-top: 20px;
  22.                         background-color: #5082c2;
  23.                         height: 44px;
  24.                         position: relative;
  25.                 }

  26.                 #header h1 {
  27.                         font-size: 20px;
  28.                         height: 44px;
  29.                         line-height: 44px;
  30.                         margin: 0em;
  31.                         color: #fff;
  32.                         margin-left: 100px;
  33.                         margin-right: 100px;
  34.                         text-align: center;
  35.                 }

  36.                 #main {
  37.                         display: -webkit-box;
  38.                         -webkit-box-orient: vertical;
  39.                         -webkit-box-pack: center;
  40.                 }

  41.                 a.button {
  42.                         display: -webkit-box;
  43.                         -webkit-box-orient: vertical;
  44.                         -webkit-box-pack: center;
  45.                         -webkit-box-align: center;
  46.                         height: 32px;
  47.                         margin: 8px;
  48.                         background-color: rgba(240, 240, 240, 1.0);
  49.                         border-color: rgba(220, 220, 220, 1.0);
  50.                         border-width: 2px;
  51.                         border-style: solid;
  52.                 }

  53.                 a.active {
  54.                         background-color: rgba(240, 240, 240, 0.7);
  55.                 }
  56.         </style>
  57. </head>

  58. <body>
  59.         <div id="wrap">
  60.                 <div id="main">
  61.                         <a class="button" tapmode="active" onclick="permissionCheck()">官方API相机授权</a>
  62.                         <a class="button" tapmode="active" onclick="record()">录制视频</a>
  63.                         <a class="button" tapmode="active" onclick="getCacheSize()">获取缓存大小</a>
  64.                         <a class="button" tapmode="active" onclick="clearCache()">清空缓存</a>
  65.                         <a class="button" tapmode="active" onclick="playQuPai()">播放录制结果视频</a>
  66.                 </div>
  67.         </div>
  68. </body>
  69. <script type="text/javascript" src="../script/api.js"></script>
  70. <script>
  71.         var demo;

  72.         function record() {
  73.                 demo.record({
  74.                         minDuration: 2,
  75.                         maxDuration: 20,
  76.                         isBackCamera: true,
  77.                         flashText: '我闪光1',
  78.                         cameraText: '我相机1',
  79.                         recordText: '按我就拍1',
  80.                         //                                recordHint : '提示1',
  81.                         //                                exitDialogMessage : '是否放弃这段视频?1',
  82.                         //                                dialogYes : '确定1',
  83.                         //                                dialogNo : '取消1',
  84.                         //                                progressMessage : '准备中…1',
  85.                 }, function(ret, err) {
  86.                         alert("record|" + JSON.stringify(ret) + " " + JSON.stringify(err));
  87.                         if (ret.status) {
  88.                                 $api.setStorage('videoPath', ret.data.videoPath);
  89.                                 $api.setStorage('thumbnailPath', ret.data.thumbnailPath);
  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.                 api.requestPermission({
  105.                         list: ['camera', 'storage', 'microphone'],
  106.                         code: 1
  107.                 }, function(ret, err) {
  108.                         api.alert({
  109.                                 msg: JSON.stringify(ret)
  110.                         });
  111.                 });
  112.         }

  113.         function playQuPai() {
  114.                 alert($api.getStorage('videoPath'));
  115.                 api.openWin({
  116.                         name: 'playQuPai',
  117.                         url: "openurl.html",
  118.                         pageParam: {
  119.                                 url: $api.getStorage('videoPath')
  120.                         }
  121.                 });

  122.         }

  123.         function apiready() {
  124.                 demo = api.require('miniQuPaiPlus');
  125.                 if (!demo) {
  126.                         alert("请添加模块后编译");
  127.                         return;
  128.                 }
  129.         }
  130. </script>

  131. </html>
复制代码


主题:
76
帖子:
917
云币:
1576
发表于 2019-7-1 11:48:43 |
鼓掌!!!

版主

UID:436609

主题:
40
帖子:
1800
云币:
7461

足球狗

发表于 2019-7-2 10:15:28 |

马路杀手

UID:807441

主题:
53
帖子:
225
云币:
231
发表于 2019-10-1 20:09:34 |
这个没有拍照功能吗

版主

UID:83211

主题:
163
帖子:
8972
云币:
1718

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

 楼主| 发表于 2019-10-1 20:56:58 |
ABGroup 发表于 2019-10-1 20:09
这个没有拍照功能吗

没有。

新手上路

UID:331854

主题:
14
帖子:
53
云币:
46
发表于 2020-6-5 16:21:19 |
录制图像拉长了

版主

UID:83211

主题:
163
帖子:
8972
云币:
1718

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

 楼主| 发表于 2020-6-5 17:21:32 |

安卓?iOS?

驾校小白

UID:455078

主题:
3
帖子:
8
云币:
11
发表于 2020-9-16 08:54:51 |
拍摄图像 拉伸的特别厉害 ,清晰度有点低,有办法解决吗?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

版主

UID:83211

主题:
163
帖子:
8972
云币:
1718

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

 楼主| 发表于 2020-9-17 19:01:36 |
天纯 发表于 2020-9-16 08:54
拍摄图像 拉伸的特别厉害 ,清晰度有点低,有办法解决吗?

isFullScreen:

类型:布尔型
描述:(可选项)相机预览是否全屏,解决安卓预览变形的问题(仅安卓有效)
默认值:true

设置这个参数为false试试

实习司机

UID:798560

主题:
29
帖子:
137
云币:
149
发表于 2020-10-19 15:38:48 |
想修改顶部状态栏背景色、闪光灯位置、进度条颜色等
12下一页
您需要登录后才可以回帖 登录 | 立即注册

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