Custom video/camera overlay view on the iPhone
Original Address:
http://blog.blackwhale.at/?p=443
Today I am going to show how we can add a custom overlay view to the standard iPhone video capturing functionality. First of all I have to say, that since the iPhone OS 3.1 is published, a custom overlay is really simple to achieve. There are only a few steps you have to do:
Create a custom view with a transparent background.
Add controls and/or images to the custom view as you like.
Get a new instance of the UIImagePickerController (picker).
Set the source type of the picker to video source.
Hide unneccesary controls of the picker.
Make the video image full-size (if you wish to).
Set your custom overlay and present the picker.
To prove that it is really so simple, I worked out an example for you, which adds a small image and a button to the custom overlay and shows this overlay on the image picker. In my example I didn’t add any functionality to keep it simple and straightforward.
First of all I subclassed UIView for my own custom Overlay view called OverlayView. In this custom overlay I simply added a small image and a button which will sketch the possibility of scanning a marked region within the video preview.
@implementation OverlayView
- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
//clear the background color of the overlay
self.opaque = NO;
self.backgroundColor = [UIColor clearColor];
//load an image to show in the overlay
UIImage *searcher = [UIImage imageNamed:@"searcher.png"];
UIImageView *searcherView = [[UIImageView alloc]
initWithImage:searcher];
searcherView.frame = CGRectMake(30, 100, 260, 200);
[self addSubview:searcherView];
[searcherView release];
//add a simple button to the overview
//with no functionality at the moment
UIButton *button = [UIButton
buttonWithType:UIButtonTypeRoundedRect];
[button setTitle:@"Scan Now" forState:UIControlStateNormal];
button.frame = CGRectMake(0, 430, 320, 40);
[self addSubview:button];
}
return self;
}
...
@end
All I have to do now is to create a UIImagePickerController instance and customize all specific properties of it to show the overlay view on the video preview. This is very simple and the following code should be very easy to understand.
//create an overlay view instance
OverlayView *overlay = [[OverlayView alloc]
initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGTH)];
//create a new image picker instance
UIImagePickerController *picker =
[[UIImagePickerController alloc] init];
//set source to video!
picker.sourceType = UIImagePickerControllerSourceTypeCamera;
//hide all controls
picker.showsCameraControls = NO;
picker.navigationBarHidden = YES;
picker.toolbarHidden = YES;
//make the video preview full size
picker.wantsFullScreenLayout = YES;
picker.cameraViewTransform =
CGAffineTransformScale(picker.cameraViewTransform,
CAMERA_TRANSFORM_X,
CAMERA_TRANSFORM_Y);
//set our custom overlay view
picker.cameraOverlayView = overlay;
//show picker
[self presentModalViewController:picker animated:YES];
The only things missing are my defines for the constants I am using, but I don’t wanna keep them away from you:
//transform values for full screen support
#define CAMERA_TRANSFORM_X 1
#define CAMERA_TRANSFORM_Y 1.12412
//iphone screen dimensions
#define SCREEN_WIDTH 320
#define SCREEN_HEIGTH 480
After all we get something like this:
So, that’s pretty all. Of course you have to add much more to get some functionality within your overlay, but this example was just a demonstration how easy it is to create your custom video preview overlay view.
You will find the source code of this example at my github repository. The project is called CameraOverlay.
Cheers,
Andreas
分享到:
相关推荐
本文讲述了如何解决 Docker 中的 overlay 和 overlay2 文件占用磁盘太大的问题,并提供了相应的解决方案。同时,文章也附带了 Docker 配置 overlay 存储驱动的前提条件和步骤。 一、 Docker 中的 overlay 和 ...
"前端项目-videojs-overlay.zip"包含了一个Video.js的插件,名为videojs-overlay,用于在视频播放过程中添加可自定义的覆盖元素,如文字、图像或任何其他HTML内容。这个插件为开发者提供了一种方便的方式来创建动态...
videojs-overlay-hyperlink :link: 一个简单的video.js插件,可在使用叠加层的视频播放过程中显示超链接。 该插件基于流行的video.js插件。 静态预览 现场演示: 下载 单击下载videojs-overlay-hyperlink或git ...
issues-docker, Docker 问题和提示 (aufs/overlay/btrfs..) Docker 问题和提示 (aufs/overlay/btrfs..)从 https://github.com/docker/docker/issues subjectively分类分类。 欢迎使用注释和请求请求。
Happytime Video Overlay Filter 是一个专门为VC开发人员设计的DMEO,支持输入的视频格式如MPG ,AVI或MPEG,支持添加图片,文字或日期等,安装程序附示例代码及DEMO,欢迎下载研究。
内嵌URL的overlay技术是一种网页设计方法,它允许在不离开当前页面的情况下,通过弹出一个覆盖在原页面上的窗口来加载和展示新的内容。这种技术常见于许多现代Web应用中,如模态对话框、通知窗口或者下拉菜单等。在...
script src =" libs/dc-overlay/dc.overlay.min.js " > </ script > NPM / YARN yarn add @dvgis/dc-overlay npm install @dvgis/dc-overlay import DcOverlay from 'dvgis/dc-overlay/dist/dc....
- **CameraHAL实现**:与Overlay类似,Camera系统也有其HAL,用于硬件控制。 - **CameraService**:提供给应用程序调用的高层服务。 - **CameraDriver**:驱动程序层,控制硬件资源。 - **CameraHardwareInterface**...
VisioForge Video Capture SDK major features include: Preview Video capture to AVI (using audio/video codecs like MJPEG, DivX, XviD, x264) ...Trial version overlay a nag-screen over the video window.
overlayView.frame = view.bounds view.addSubview(overlayView) ``` 接下来,考虑如何显示和隐藏这个Overlay。你可以为UIViewController添加方法来处理这些逻辑,例如: ```swift func showOverlay() { // 添加...
Atom-overlay.zip,Gentoo覆盖金针海棠,atom是一个用web技术构建的开源文本编辑器。
### 最大流传输率在混合有线/无线覆盖网络中的实现 #### 摘要与研究背景 本文探讨了在完全连接的混合有线/无线覆盖网络中实现最大流传输率的问题。随着多媒体内容的日益普及和技术的进步,混合有线/无线覆盖网络中...
"Video overlay part II - An introduction to hypervideo讲述DirectShow"是一个深入探讨多媒体处理的主题,主要关注DirectShow技术。DirectShow是微软开发的一个强大的多媒体框架,用于处理音频和视频流。这个主题...
- **Camera服务**:位于`frameworks/base/camera/libcameraservice/`,这部分内容被编译成`libcameraservice.so`。 - **JNI(Java Native Interface)**:`frameworks/base/core/jni/android_hardware_Camera.cpp`...
### 主机Overlay与网络Overlay详解 #### 一、概述 随着云计算和软件定义网络(SDN)技术的发展,网络架构经历了重大变革。其中,“主机Overlay”和“网络Overlay”是两种重要的网络部署方式,它们能够更好地支持虚拟...
https://lucasjappert.github.io/overlay-aoe-de/ ? profileid=945834 or https://lucasjappert.github.io/overlay-aoe-de/ ? idsteam=76561199094237242 # To show score add "&showscore" like this: ...
- **Camera服务部分**:位于`frameworks/base/camera/libcameraservice/`目录下,这部分内容被编译成库`libcameraservice.so`。 - **JAVA本地调用部分(JNI)**:位于`frameworks/base/core/jni/android_hardware_...
socklog覆盖socklog-overlay是的附加组件-它基于Gerrit Pape的提供了小的syslog替换。用法安装类似于安装s6-overlay : FROM ubuntu# Install s6-overlayADD ...
代码如下: <!... <head> <title>jQuery Tools standalone demo</title>...– include the Tools –> [removed][removed] &...link rel=”stylesheet” type=”text/css” href=”./overlay-basic.css”