这两天写了一个拍摄视频预览并上传的功能

eye215 · 发表于 2017-8-14 16:05:39

这两天写了一个拍摄视频预览并上传的功能，使用了Vitamio-Cordova-Plugin-master和cordova-plugin-video-capture-plus-master插件。
Vitamio-Cordova-Plugin-master 主要用来预览和播放，cordova-plugin-video-capture-plus-master可以进行高清录像、设置录像时间限制。
目前只在安卓有限的手机上测试成功。

稍晚点上代码。

eye215 · 发表于 2017-8-15 03:01:56

插件下载地址：
https://github.com/nchutchind/Vitamio-Cordova-Plugin（Vitamio-Cordova-Plugin-master）
https://github.com/danielsogl/cordova-plugin-video-capture-plus（cordova-plugin-video-capture-plus-master）

下载插件，放到\model\Native\plugins目录
我把插件的id修改了，分别为
Cordova.Plugin.Vitamio 和Cordova.Plugin.Video
引入插件

require("$UI/system/lib/cordova/cordova");
require("cordova!cordova-plugin-file");
require("cordova!cordova-plugin-file-transfer");
require("cordova!<span style="background-color: rgb(255, 255, 255);">Cordova.Plugin.Vitamio</span>");
require("cordova!<span style="background-color: rgb(255, 255, 255);">Cordova.Plugin.Video</span>");

复制代码

处理录像和预览播放还引入文件上传的插件

录像

Model.prototype.onVideo = function(event) {
var self = this;var duration = 20;
var highquality = true;
var frontcamera = true;
window.plugins.videocaptureplus.captureVideo(captureSuccess, captureError, {
limit : 1, // the nr of videos to record, default 1 (on iOS always 1)
duration : duration, // max duration in seconds, default 0, which is 'forever'
highquality : highquality, // set to true to override the default low quality setting
frontcamera : frontcamera, // set to true to override the
// default backfacing camera
// setting. iOS: works fine,
// Android: YMMV (#18)
// you'll want to sniff the useragent/device and pass the best
// overlay based on that.. assuming iphone here
portraitOverlay : '', // put the png in your www folder
landscapeOverlay : '', // not passing an overlay means no image is shown for the landscape orientation
overlayText : '' // iOS only
});
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i++) {
var mediaFile = mediaFiles[i];

复制代码

设置了限制视频时间最长20秒，录像为高清，可以使用前置摄像头。录入的视频信息存入data组件里。需要在model里增加 this.video = '';用来判断是否已有视频文件。由于业务需求需要视频图片一起上传，这里用data组件存文件信息，如果只是上传一个视频直接使用this.video即可。

视频预览

Model.prototype.onVideoPlay = function() {
var video = this.video;
if (video == '') {
return;
}
// Play a pre-recorded video with callbacks
var options = {
isStreaming : false,
successCallback : function(obj) {
// console.log("Video was closed without error at " + obj.pos + ".");
},
progressCallback : function(obj) {
// obj.action may be "start", "stop", or "pause"
// obj.pos is the current time in the clip (only available for
// non-continuous streams)
// and shows a format of "00:12:34"
// myAnalytics.track(obj.action, obj.pos);
},
errorCallback : function(obj) {
console.log("Error! " + obj.message);
}
};
window.plugins.vitamio.playVideo(video.fullPath, options);
}

复制代码

这里没有设置progressCallback 所以播放完后就会自动关闭。

视频上传

Model.prototype.uploadFile = function() {
var self = this;
fileInfo = self .video;
var options = new FileUploadOptions();
options.fileKey = 'video'; // 用于设置参数
options.fileName = fileInfo.name; //文件名称
// 文件格式，如果是图片格式，就用image/jpeg，其他文件格式上官网查API
options.mimeType = fileInfo.type;
// 这里的uri根据自己的需求设定，是一个接收上传文件的地址
var uri = encodeURI(dp.apiUrl('gameUpdate'));
options.chunkedMode = false;
var params = new Object();
params.token = token;
options.params = params;
var ft = new FileTransfer();
function success(result) {
//上传成功
}
function fail(message) {
//alert("失败:" + JSON.stringify(message));
//上传失败
}
ft.upload(fileInfo.filePath, uri, success, fail, options);
}

复制代码

dp.apiUrl('gameUpdate') 是我自己封装的api接口列表里取的url。 token是接口的登录令牌，我是model前面var的，可改成其他跟文件一起提交到接口的参数。

删除按钮

Model.prototype.onFileDel = function(event) {

复制代码

html部分代码

<blockquote><?xml version="1.0" encoding="utf-8"?>

复制代码

css部分

<blockquote>.x-titlebar-right .glyphicon{ color:#fff; font-size:20px; padding:0 10px;}

复制代码

完整的js

define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
require("$UI/system/lib/cordova/cordova");
require("cordova!cordova-plugin-file");
require("cordova!cordova-plugin-file-transfer");
require("cordova!Cordova.Plugin.Vitamio");
require("cordova!Cordova.Plugin.Video");
var token = 'H1234567890';
var Model = function() {
this.video = '';
this.callParent();
};
//拍摄视频
Model.prototype.onVideo = function(event) {
var self = this;
var duration = 20;
var highquality = true;
var frontcamera = true;
window.plugins.videocaptureplus.captureVideo(captureSuccess, captureError, {
limit : 1, // the nr of videos to record, default 1 (on iOS always 1)
duration : duration, // max duration in seconds, default 0, which is 'forever'
highquality : highquality, // set to true to override the default low quality setting
frontcamera : frontcamera, // set to true to override the default backfacing camera
// setting. iOS: works fine,
// Android: YMMV (#18)
// you'll want to sniff the useragent/device and pass the best
// overlay based on that.. assuming iphone here
portraitOverlay : '', // put the png in your www folder
landscapeOverlay : '', // not passing an overlay means no image is
// shown for
// the landscape orientation
overlayText : '' // iOS only
});
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i++) {
var mediaFile = mediaFiles[i];
self.video = mediaFile;
var fileData = self.comp("fileData");
var data = {
"fileType" : "video",
"fileInfo" : [ mediaFile ]
}
fileData.loadData([ data ]);
}
}
function captureError(error) {
// code 3 = cancel by user
// alert('Returncode: ' + JSON.stringify(error.code));
}
};
//播放视频
Model.prototype.onVideoPlay = function() {
var video = this.video;
if (video == '') {
return;
}
// Play a pre-recorded video with callbacks
var options = {
isStreaming : false,
successCallback : function(obj) {
// console.log("Video was closed without error at " + obj.pos + ".");
},
progressCallback : function(obj) {
// obj.action may be "start", "stop", or "pause"
// obj.pos is the current time in the clip (only available for non-continuous streams)
// and shows a format of "00:12:34"
// myAnalytics.track(obj.action, obj.pos);
},
errorCallback : function(obj) {
console.log("Error! " + obj.message);
}
};
window.plugins.vitamio.playVideo(video.fullPath, options);
}
//上传文件
Model.prototype.uploadFile = function() {
var self = this;
fileInfo = self.video;
var options = new FileUploadOptions();
options.fileKey = 'video'; // 用于设置参数
options.fileName = fileInfo.name; // 文件名称
// 文件格式，如果是图片格式，就用image/jpeg，其他文件格式上官网查API
options.mimeType = fileInfo.type;
// 这里的uri根据自己的需求设定，是一个接收上传文件的地址
var uri = encodeURI('http://www.shiav.com/upload');
options.chunkedMode = false;
var params = new Object();
params.token = token;
options.params = params;
var ft = new FileTransfer();
function success(result) {
// 上传成功
}
function fail(message) {
// alert("失败:" + JSON.stringify(message));
// 上传成功
}
ft.upload(fileInfo.filePath, uri, success, fail, options);
}
//删除按钮
Model.prototype.onFileDel = function(event) {
var parentRow = event.bindingContext.$parent;
this.comp("fileData").deleteData(parentRow)
}
return Model;
});

复制代码

在苹果手和其他大部分安卓手机没有做测试，只是部分安卓手机测试通过。

q2045377 · 发表于 2017-8-15 03:06:36

eye215 发表于 2017-8-15 03:01
插件下载地址：
https://github.com/nchutchind/Vitamio-Cordova-Plugin（Vitamio-Cordova-Plugin-master） ...

楼主哈能否做个demo出来分享下，，attachment也能录视频，，不能用么

qiuxinw66 · 发表于 2017-8-15 08:52:52

顶！不过我告诉你在ioS上无法实现

cucu1978 · 发表于 2017-8-15 09:00:53

我能告诉你，拍出来的录像文件太大，上传根本不现实吗？随便一拍就是几十兆

郭德成 · 发表于 2017-8-15 09:05:28

支持

eye215 · 发表于 2017-8-15 09:23:29

q2045377 发表于 2017-8-15 03:06
楼主哈能否做个demo出来分享下，，attachment也能录视频，，不能用么

attachment 我这里一直不好用

cucu1978 · 发表于 2017-8-15 09:24:35

求一个视频拍摄比较小，像微信那样，比较实用的的方案。。。。。现有cordova的插件拍出来太大了。。。。不具备上传的可行性。。。。
目前我用recordRTC的方案拍出来还可以，就是兼容性太差

eye215 · 发表于 2017-8-15 11:13:19

cucu1978 发表于 2017-8-15 09:24
求一个视频拍摄比较小，像微信那样，比较实用的的方案。。。。。现有cordova的插件拍出来太大了。。。。不 ...

找个压缩的插件或方法么，刚接触视频类的
我也想知道

eye215 · 发表于 2017-8-16 17:24:32

cucu1978 发表于 2017-8-15 09:24
求一个视频拍摄比较小，像微信那样，比较实用的的方案。。。。。现有cordova的插件拍出来太大了。。。。不 ...

微信是控制的视频的比特率的，不知道有没有cordova可以实现的

		自动登录	找回密码
密码			注册

[分享] 这两天写了一个拍摄视频预览并上传的功能