请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
216
帖子
5
勋章
5750
Y币

weChatCamera模块demo示例

[复制链接]
发表于 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
帖子
1
勋章
1万+
Y币
50
帖子
2
勋章
1322
Y币
大佬就是大佬
37
帖子
2
勋章
3711
Y币
膜拜大佬
53
帖子
0
勋章
241
Y币
有编辑功能吗
216
帖子
5
勋章
5750
Y币

没有。。
8
帖子
0
勋章
59
Y币
该模块录制视频后,生成的格式是什么格式,能否自定义mp4,flv啥的
216
帖子
5
勋章
5750
Y币
何@开发 发表于 2019-12-17 13:40
该模块录制视频后,生成的格式是什么格式,能否自定义mp4,flv啥的

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

本版积分规则