apicloud apicloud

注册
查看: 240|回复: 0

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

版主

UID:83211

主题:
151
帖子:
6867
云币:
43996

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

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

240 0 | 发表于 2019-7-1 11:20:25 |阅读模式 | |
1、由于趣拍官方对极简版不提供对外对sdk下载,miniQuPai模块从2.0版本起就不再维护2.0之前趣拍模块的相应功能,从2.0模块开始支持以下文档中的接口方法。

2、miniQuPai模块,实现了iOS、 Android 平台集成短视频录制的模块丰富了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()">摄像头权限验证</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.                         bitRate: 2000000,
  77.                         videoWidth: 480,
  78.                         videoHeight: 480,
  79.                         isBackCamera: false,
  80.                 }, function(ret, err) {
  81.                         alert("record|" + JSON.stringify(ret) + " " + JSON.stringify(err));
  82.                         if (ret.status) {
  83.                                 $api.setStorage('videoPath', ret.data.videoPath);
  84.                                 $api.setStorage('thumbnailPath', ret.data.thumbnailPath);
  85.                         }
  86.                 });
  87.         }

  88.         function getCacheSize() {
  89.                 demo.getCacheSize(function(ret, err) {
  90.                         alert(JSON.stringify(ret));
  91.                 });
  92.         }

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

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

  103.         function playQuPai() {
  104.                 alert($api.getStorage('videoPath'));
  105.                 api.openWin({
  106.                         name: 'playQuPai',
  107.                         url: "openurl.html",
  108.                         pageParam: {
  109.                                 url: $api.getStorage('videoPath')
  110.                         }
  111.                 });
  112.         }

  113.         function apiready() {
  114.                 demo = api.require('miniQuPai');
  115.                 if (!demo) {
  116.                         alert("请添加模块后编译");
  117.                         return;
  118.                 }
  119.         }
  120. </script>

  121. </html>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

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