Uniapp自定义相机界面

Uniapp是一款入门门槛比较低的跨平台开发方案，一套代码可以生成Android、IOS、H5、微信\QQ\支付宝\头条\飞书等若高个平台的小程序，因此很多中小型公司都会考虑用这种方案来实现业务需求；最近公司就要在原有功能上增加水印相机功能，原本如果是原生的Android或IOS很容易实现，不过因为项目是用uniapp搭建的，发现uniapp只能简单调用系统的相机来拍照或录像，哎，可是我们的设计图可是要自定义界面的，这里就卡死了，于是开始寻找解决方案，于是在官网找插件，（看到其他原生相机相关插件的价格，心里拔凉拔凉的，基本都是几百到上千起步，关键这玩意老板不给报销啊），不过也有收获，那就是知道了肯定是可以弄出来自定义界面的效果的，也算吃了半颗定心丸，uniapp这个原生插件的功能（反正就是你可以在Android或IOS端用原生代码来实现功能，然后打包给Uniapp的代码调用），喜出望外呀！于是立刻着手研究原生插件，好在之前好几年的原生Android开发经验，网上找了下资料，封装了一个自定义相机类，不过还是费了老劲了，因为不熟悉Uniapp下的原生插件开发原理，走了很多弯路，所幸还是做出来了一个仅支持Android端的原生插件。乘胜追击！又开始摸索IOS端，因为对IOS端的Object-c和swift都不熟悉，网上找了例子看起来也挺费劲，研究了三天，github上下了十几个demo，一一看完，总算有了个眉目（说句题外话，swift代码风格真的比OC要轻巧很多），一款新的跨Android/IOS两端的原生插件诞生了！最近又优化了一波内容更新到了2.0版本：上图–>

下面展示一些 内联代码片。

这个是Android端实现原生插件的方法，返回一个FrameLayout组件便于后面的扩展，addView添加了一个SurfaceView用于显示摄像头的预览效果

   @Overrideprotected FrameLayout initComponentHostView(Context context) {FrameLayout frameLayout = new FrameLayout(context);UniLogUtils.e("绘制帧布局；；；");SurfaceView surfaceView = new SurfaceView(context);frameLayout.addView(surfaceView);if (mHolder == null) {mHolder = surfaceView.getHolder();mHolder.addCallback(new SurfaceHolder.Callback() {@Overridepublic void surfaceCreated(SurfaceHolder holder) {
//                    UniLogUtils.e("开始绘制：");
//                    Canvas canvas = holder.lockCanvas();
//                    Paint paint = new Paint();
//                    paint.setColor(Color.WHITE);
//                    paint.setTextSize(22);
//                    canvas.drawText(locationAddress,200,300,paint);
//                    holder.unlockCanvasAndPost(canvas);
//                    UniLogUtils.e("结束绘制：");initCamera();}@Overridepublic void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {}@Overridepublic void surfaceDestroyed(SurfaceHolder holder) {}});}return frameLayout;}

IOS端的实现代码，相比Android简单很多，loadView里返回了一个UIView对象，原生插件有两种模式，module和component，简单说就是前者重点在功能，后者重点在界面。viewDidLoad里配置了AVCaptureSession的一些信息，拍照录像都需要使用AVCaptureSession来完成

- (UIView *)loadView {NSLog(@"插件日志：loadView");return [UIView new];
}- (void)viewDidLoad {NSLog(@"插件日志：viewDidLoad");self.session = [[AVCaptureSession alloc] init];//创建一个AVCaptureMovieFileOutput 实例，用于将Quick Time 电影录制到文件系统self.movieOutput = [[AVCaptureMovieFileOutput alloc]init];//输出连接 判断是否可用，可用则添加到输出连接中去if ([self.session canAddOutput:self.movieOutput]){[self.session addOutput:self.movieOutput];}//     拿到的图像的大小可以自行设定//    AVCaptureSessionPresetHigh//    AVCaptureSessionPreset320x240//    AVCaptureSessionPreset352x288//    AVCaptureSessionPreset640x480//    AVCaptureSessionPreset960x540//    AVCaptureSessionPreset1280x720//    AVCaptureSessionPreset1920x1080//    AVCaptureSessionPreset3840x2160self.session.sessionPreset = AVCaptureSessionPreset1920x1080;//AVCaptureStillImageOutput 实例 从摄像头捕捉静态图片self.imageOutput = [[AVCaptureStillImageOutput alloc]init];//配置字典：希望捕捉到JPEG格式的图片self.imageOutput.outputSettings = @{AVVideoCodecKey:AVVideoCodecJPEG};if ([self.session canAddOutput:self.imageOutput]) {[self.session addOutput:self.imageOutput];}self.device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];NSError * error = nil;self.input = [AVCaptureDeviceInput deviceInputWithDevice:self.device error:&error];if (self.input) {[self.session addInput:self.input];}else{NSLog(@"Input Error:%@",error);}//预览层的生成self.previewLayer = [[AVCaptureVideoPreviewLayer alloc] initWithSession:self.session];// 直接取用本组件的bounds来做定位，因为本组件的bounds是uniapp传过来的css宽高设置过的self.previewLayer.frame = self.view.bounds; //预览层填充视图// AVLayerVideoGravityResizeAspectFill 等比例填充，直到填充满整个视图区域，其中一个维度的部分区域会被裁剪// AVLayerVideoGravityResize 非均匀模式。两个维度完全填充至整个视图区域// AVLayerVideoGravityResizeAspect 等比例填充，直到一个维度到达区域边界self.previewLayer.videoGravity = AVLayerVideoGravityResizeAspectFill;[self.view.layer addSublayer:self.previewLayer];[self.session startRunning];
}

插件地址：link
效果展示：

Uniapp自定义相机界面相关推荐

uniapp 自定义相机人脸和人脸识别
uniapp 自定义相机人脸和人脸识别使用组件 live-pusher ,结合组件的预览(startPreview)和快照(snapshot)实现相机功能,人脸识别使用的是tracking-min ...
uni-app 自定义相机拍照录像，可设置分辨率、支持横竖屏(ios、android)
插件市场:uni-app 自定义相机拍照录像,可设置分辨率.支持横竖屏(ios.android)
iOS自定义相机界面
先说说今天遇到的几个愚蠢的问题-- 想pop回原来的页发现连着pop回两页..最后发现是写了两行self.navigationcontroller pop.... 我真是醉了= =.. 补充一点: ...
iOS---系统相册视频（一）之打开照相机拍照或者录像／打开手机的相册或者视频/视频压缩／自定义相机界面／照片或视频保存到相册
参考: 打开相册和相机的ZLPhotoBrowser:https://github.com/longitachi/ZLPhotoBrowser QBImagePicker:https://github ...
记录--uniapp自定义相机自定义界面拍照录像闪光灯切换摄像头
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助因公司业务需要,需要开发水印相机功能,而项目代码用的uniapp框架,App端只能简单调用系统的相机,无法自定义界面,在此基础上,只能开发 ...
uniapp自定义相机功能
因公司业务需要,需要开发水印相机功能,而项目代码用的uniapp框架,App端只能简单调用系统的相机,无法自定义界面,在此基础上,只能开发自定义插件来完成功能(自定义原生插件,即是用原生代码来编写组件 ...
uni-app自定义相机
设计思路: 调用camera相机组件,用cover-view,cover-image标签添加自定义页面布局,拍完照之后将照片画到canvas里面,然后用canvasToTempFilePath方法导出 ...
h5自定义相机界面_MIUI 12全新相机发布，多款相机图标进行重绘，可升级机型一览...
在此之前,小米也是在万众期待之下发布了最新的MIUI 12系统IO,而其中此次的MIUI 12重点进行升级更新的就要数相机部分了. 全新的MIUI 12相机将会重回简单UI,在整个相机拍照界面进行极简 ...
h5自定义相机界面_有没有什么比较好用的H5小程序？
22款H5小程序让你可以更轻松胜任新媒体运营工作人人秀 3分钟制作H5界面.H5游戏.H5活动.涨粉活动的利器. 24好玩小白3分钟创建刷屏级H5,支持嵌入小程序运营,快速实现增粉.留存. 易企秀 ...

Uniapp自定义相机界面

Uniapp自定义相机界面相关推荐

最新文章

热门文章