apicloud apicloud

注册
查看: 696|回复: 7

[案例源码] weChatCamera模块demo示例

版主

UID:83211

主题:
151
帖子:
7437
云币:
60289

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

[案例源码] weChatCamera模块demo示例

696 7 | 发表于 2019-7-13 16:13:43 |阅读模式 | |
本帖最后由 52yaoer 于 2019-12-3 19:17 编辑

weChatCamera模块是仿微信录制视频功能的模块,实现了iOS、安卓平台快速集成和微信录制视频差不多的视频录制功能。

点击进入模块详情


  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="requestPermission()">摄像头权限验证</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.             <br/>
  66.             <img id="path" width="200" />
  67.         </div>
  68.     </div>
  69. </body>
  70. <script type="text/javascript" src="../script/api.js"></script>
  71. <script>
  72.     var demo;

  73.     function record() {
  74.         demo.record({
  75.             minDuration: 1,
  76.             maxDuration: 15,
  77.             isBackCamera: true,
  78.             isOpenCapture: true,
  79.             isOpenRecord: true,

  80.             videoTimeShort : 'videoTimeShort',
  81.                                     videoRecodeFail : 'videoRecodeFail',
  82.                                     videoPreviewFail : 'videoPreviewFail',
  83.                                     videoSettingFail : 'videoSettingFail',
  84.                                     videoDialogClose : 'videoDialogClose',
  85.                                     videoProcessing : 'videoProcessing',
  86.         }, function(ret, err) {
  87.             alert("record|" + JSON.stringify(ret) + " " + JSON.stringify(err));
  88.             if (ret.status) {
  89.                 if (ret.data) {
  90.                     $api.setStorage('videoPath', ret.data.videoPath);
  91.                     $api.setStorage('thumbnailPath', ret.data.thumbnailPath);

  92.                     $api.attr($api.byId('path'), 'src', ret.data.thumbnailPath);
  93.                 } else if (ret.capturePath) {
  94.                     $api.attr($api.byId('path'), 'src', ret.capturePath);
  95.                 }
  96.             }
  97.         });
  98.     }

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

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

  109.     function requestPermission() {
  110.         api.requestPermission({
  111.             list: ['camera', 'photos', 'storage', 'microphone'],
  112.         }, function(ret, err) {
  113.             api.alert({
  114.                 msg: JSON.stringify(ret)
  115.             });
  116.         });
  117.     }

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

  126. </html>
复制代码


主题:
12
帖子:
1713
云币:
11010

装逼侠APICloud粉丝社会摇女朋友超人

发表于 2019-7-13 22:47:53 |
https://www.jiancang.co

版主

UID:436609

主题:
32
帖子:
1748
云币:
7402

端午节足球狗

发表于 2019-7-15 11:32:01 |
大佬就是大佬
VvVv1o:社区优秀版主,本年度为开发者解答问题1200条。
【2019年度最佳版主评选】给版主投票即可奖励50云币,截止至12月31日---我是9号版主,点击去投票

版主

UID:546828

主题:
34
帖子:
4129
云币:
2882

端午节圣诞节捣蛋鬼APICloud五岁啦

发表于 2019-7-19 23:46:51 |
膜拜大佬

马路杀手

UID:807441

主题:
52
帖子:
224
云币:
229
发表于 2019-10-1 19:29:21 |
有编辑功能吗

版主

UID:83211

主题:
151
帖子:
7437
云币:
60289

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

 楼主| 发表于 2019-10-1 20:56:46 |

没有。。

主题:
4
帖子:
18
云币:
26
发表于 2019-12-17 13:40:07 |
该模块录制视频后,生成的格式是什么格式,能否自定义mp4,flv啥的

版主

UID:83211

主题:
151
帖子:
7437
云币:
60289

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

 楼主| 发表于 2019-12-17 14:05:29 |
何@开发 发表于 2019-12-17 13:40
该模块录制视频后,生成的格式是什么格式,能否自定义mp4,flv啥的

mp4.不支持flv等格式
您需要登录后才可以回帖 登录 | 立即注册

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