2. 程式人生 > >iOS 掃描二維碼/條形碼

iOS 掃描二維碼/條形碼

阿新 • • 發佈：2018-12-10

級別：★★☆☆☆
標籤：「iOS 原生掃描」「AVCaptureSession」「AVCaptureDevice」「rectOfInterest」
作者： Xs·H
審校： QiShare團隊

最近做IoT專案，在智慧裝置配網過程中有一個掃描裝置或說明書上的二維碼/條形碼來讀取裝置資訊的需求，要達到的效果大體如下：

掃碼效果

想到幾年前在帳號衛士中開發過掃碼功能，就扒出來封裝了一下（可以從QiQRCode中獲取），以方便在專案中複用。
封裝共包括QiCodeManager和QiCodePreviewView兩個類。QiCodeManager負責掃描功能（二維碼/條形碼的識別和讀取等），QiCodePreviewView負責掃描介面（掃碼框、掃描線、提示語等）。可按照如下方式在專案中使用兩個類。

// 初始化掃碼介面
_previewView = [[QiCodePreviewView alloc] initWithFrame:self.view.bounds];
_previewView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
[self.view addSubview:_previewView];

// 初始化掃碼管理類
__weak typeof(self) weakSelf = self;
_codeManager = [[QiCodeManager alloc] initWithPreviewView:_previewView completion:^{
    // 開始掃描
    [weakSelf.codeManager startScanningWithCallback:^(NSString * _Nonnull code) {} autoStop:YES];
}];
複製程式碼

QiCodePreviewView內部使用CAShapeLayer繪製了遮罩maskLayer、掃描框rectLayer、框角標cornerLayer和掃描線lineLayer。因為此部分涉及程式碼較多，本文不做詳解，可從QiQRCode中檢視原始碼。關於CAShapeLayer的使用，QiShare在iOS 繪製圓角文章中有介紹到。

接下來重點介紹一下QiCodeManager中掃碼功能的實現過程。

一、識別（捕捉）二維碼/條形碼

QiCodeManager是基於iOS 7+，對AVFoundation框架中的AVCaptureSession及相關類進行的封裝。AVCaptureSession

是AVFoundation框架中捕捉音視訊等資料的核心類。要實現掃碼功能，除了用到AVCaptureSession之外，還要用到AVCaptureDevice、AVCaptureDeviceInput、AVCaptureMetadataOutput和AVCaptureVideoPreviewLayer。核心程式碼如下：

// input
AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
AVCaptureDeviceInput *input = [AVCaptureDeviceInput deviceInputWithDevice:device error:nil];

// output
AVCaptureMetadataOutput *output = [[AVCaptureMetadataOutput alloc] init];
[output setMetadataObjectsDelegate:self queue:dispatch_get_main_queue()];

// session
_session = [[AVCaptureSession alloc] init];
_session.sessionPreset = AVCaptureSessionPresetHigh;
if ([_session canAddInput:input]) {
    [_session addInput:input];
}
if ([_session canAddOutput:output]) {
    [_session addOutput:output];
    // output在被add到session後才可設定metadataObjectTypes屬性
    output.metadataObjectTypes = @[AVMetadataObjectTypeQRCode, AVMetadataObjectTypeCode128Code, AVMetadataObjectTypeEAN13Code]；    
}

// previewLayer
AVCaptureVideoPreviewLayer *previewLayer = [AVCaptureVideoPreviewLayer layerWithSession:_session];
previewLayer.frame = previewView.layer.bounds;
previewLayer.videoGravity = AVLayerVideoGravityResizeAspectFill;
[previewView.layer insertSublayer:previewLayer atIndex:0];
複製程式碼
// AVCaptureMetadataOutputObjectsDelegate
- (void)captureOutput:(AVCaptureOutput *)output didOutputMetadataObjects:(NSArray<__kindof AVMetadataObject *> *)metadataObjects fromConnection:(AVCaptureConnection *)connection {
    
    AVMetadataMachineReadableCodeObject *code = metadataObjects.firstObject;
    if (code.stringValue) { }
}
複製程式碼

以“面向人腦”的程式設計思想對上述程式碼進行解釋：
1、我們需要使用AVCaptureVideoPreviewLayer的例項previewLayer顯示掃描二維碼/條形碼時看到的影像；
2、但是previewLayer的初始化需要AVCaptureSession的例項session對資料的輸入輸出進行控制；
3、那我們就初始化一個session，並將輸出流的質量設定為高質量AVCaptureSessionPresetHigh；
4、因為session是依靠AVCaptureDeviceInput和AVCaptureMetadataOutput來控制資料輸入輸出的；
5、那就用AVCaptureDevice的例項device初始化一個input，指明device為AVMediaTypeVideo型別；
6、再初始化一個output，設定好delegate和queue以及所支援的元資料型別（二維碼和不同格式的條形碼）；
7、然後將input和output新增到session中就OK了，呼叫[session startRunning];就可以掃描二維碼了；
8、最終從-captureOutput:didOutputMetadataObjects:fromConnection:方法中得到捕捉到的二維碼/條形碼資料。

至此，在previewLayer範圍內就可以識別二維碼/條形碼了。

二、指定識別二維碼/條形碼的區域

如果要控制在previewLayer的指定區域內識別二維碼/條形碼，可以通過修改output的rectOfInterest屬性來達到目的。程式碼如下：

// 計算rect座標
CGFloat y = rectFrame.origin.y;
CGFloat x = previewView.bounds.size.width - rectFrame.origin.x - rectFrame.size.width;
CGFloat h = rectFrame.size.height;
CGFloat w = rectFrame.size.width;
CGFloat rectY = y / previewView.bounds.size.height;
CGFloat rectX = x / previewView.bounds.size.width;
CGFloat rectH = h / previewView.bounds.size.height;
CGFloat rectW = w / previewView.bounds.size.width;

// 座標賦值
output.rectOfInterest = CGRectMake(rectY, rectX, rectH, rectW);
複製程式碼

1、上述的CGRectMake(rectY, rectX, rectH, rectW)與CGRectMake(x, y, w, h)的傳統定義不同，可以將rectOfInterest理解成被翻轉過的CGRect;
2、而rectY, rectX, rectH, rectW也不是控制元件或區域的值，而是所對應的比例，如上述程式碼中的計算公式，y, x, h, w的值可參考下圖；
3、rectOfInterest的預設值為CGRectMake(.0, .0, 1.0, 1.0)，表示識別二維碼/條形碼的區域為全屏（previewLayer區域）。

PS: 其實iOS提供了官方API來將標準rect轉換成rectOfInterest，但只有在[session startRunning]之後呼叫才有效果，而且還會時不時地出現卡頓式地閃一下。程式碼如下：

// 可以在[session startRunning]之後用此語句設定掃碼區域
metadataOutput.rectOfInterest = [previewLayer metadataOutputRectOfInterestForRect:rectFrame];
複製程式碼

rectOfInterest計算輔助圖

三、拉近二維碼/條形碼（放大視訊內容）

當二維碼/條形碼離我們較遠時，拉近二維碼/條形碼會是一個不錯的功能，效果如下：

放大掃碼效果

上述效果是使用雙指縮放的方式來實現的，具體程式碼如下：

// 新增縮放手勢
UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinch:)];
[previewView addGestureRecognizer:pinchGesture];
複製程式碼
- (void)pinch:(UIPinchGestureRecognizer *)gesture {
    
    AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
    
    // 設定有效縮放範圍，防止超出範圍而崩潰
    CGFloat minZoomFactor = 1.0;
    CGFloat maxZoomFactor = device.activeFormat.videoMaxZoomFactor;
    if (@available(iOS 11.0, *)) {
        minZoomFactor = device.minAvailableVideoZoomFactor;
        maxZoomFactor = device.maxAvailableVideoZoomFactor;
    }
    
    static CGFloat lastZoomFactor = 1.0;
    if (gesture.state == UIGestureRecognizerStateBegan) {
        // 記錄上次縮放的比例，本次縮放在上次的基礎上疊加
        lastZoomFactor = device.videoZoomFactor;// lastZoomFactor為外部變數
    }
    else if (gesture.state == UIGestureRecognizerStateChanged) {
        CGFloat zoomFactor = lastZoomFactor * gesture.scale;
        zoomFactor = fmaxf(fminf(zoomFactor, maxZoomFactor), minZoomFactor);
        [device lockForConfiguration:nil];// 修改device屬性之前須lock
        device.videoZoomFactor = zoomFactor;// 修改device的視訊縮放比例
        [device unlockForConfiguration];// 修改device屬性之後unlock
    }
}
複製程式碼

上述程式碼的核心邏輯比較簡單：
1、在previewView上新增一個雙指捏合的手勢 pinchGesture，並設定target和selector；
2、在selector方法中根據gesture.scale調整device.videoZoomFactor;
3、注意在修改device屬性之前要lock一下，修改完後unlock一下。

四、弱光環境下開啟手電筒

弱光環境對掃碼功能有較大的影響，通過監測光線亮度給使用者提供開啟手電筒的選擇會提升不少的體驗，如下圖：

弱光監測開啟手電筒效果

弱光監測的程式碼如下：

- (void)observeLightStatus:(void (^)(BOOL, BOOL))lightObserver {
    
    _lightObserver = lightObserver;
    
    AVCaptureVideoDataOutput *lightOutput = [[AVCaptureVideoDataOutput alloc] init];
    [lightOutput setSampleBufferDelegate:self queue:dispatch_get_main_queue()];
    
    if ([_session canAddOutput:lightOutput]) {
        [_session addOutput:lightOutput];
    }
}

// AVCaptureVideoDataOutputSampleBufferDelegate
- (void)captureOutput:(AVCaptureOutput *)output didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection {
    
    // 通過sampleBuffer獲取到光線亮度值brightness
    CFDictionaryRef metadataDicRef = CMCopyDictionaryOfAttachments(NULL, sampleBuffer, kCMAttachmentMode_ShouldPropagate);
    NSDictionary *metadataDic = (__bridge NSDictionary *)metadataDicRef;
    CFRelease(metadataDicRef);
    NSDictionary *exifDic = metadataDic[(__bridge NSString *)kCGImagePropertyExifDictionary];
    CGFloat brightness = [exifDic[(__bridge NSString *)kCGImagePropertyExifBrightnessValue] floatValue];
    
    // 初始化一些變數，作為是否透傳brightness的因數
    AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
    BOOL torchOn = device.torchMode == AVCaptureTorchModeOn;
    BOOL dimmed = brightness < 1.0;
    static BOOL lastDimmed = NO;
    
    // 控制透傳邏輯：第一次監測到光線或者光線明暗變化（dimmed變化）時透傳
    if (_lightObserver) {
        if (!_lightObserverHasCalled) {
            _lightObserver(dimmed, torchOn);
            _lightObserverHasCalled = YES;
            lastDimmed = dimmed;
        }
        else if (dimmed != lastDimmed) {
            _lightObserver(dimmed, torchOn);
            lastDimmed = dimmed;
        }
    }
}
複製程式碼

弱光監測是依賴AVCaptureVideoDataOutput和AVCaptureVideoDataOutputSampleBufferDelegate來實現的。
1、初始化AVCaptureVideoDataOutput的例項lightOutput後，設定delegate並將lightOutput新增到session中；
2、實現AVCaptureVideoDataOutputSampleBufferDelegate的回撥方法-captureOutput:didOutputSampleBuffer:fromConnection:；
3、對回撥方法中的sampleBuffer進行各種操作（具體參考上述程式碼細節），並最終獲取到光線亮度brightness；
4、根據brightness的值設定弱光的標準以及是否透傳給業務邏輯（這裡認為brightness < 1.0為弱光）。

呼叫- observeLightStatus:方法並實現blck即可接收透傳過來的光線狀態和手電筒狀態，並根據狀態對UI做相應的調整，程式碼如下：

__weak typeof(self) weakSelf = self;
[self observeLightStatus:^(BOOL dimmed, BOOL torchOn) {
    if (dimmed || torchOn) {// 變為弱光或者手電筒處於開啟狀態
        [weakSelf.previewView stopScanning];// 停止掃描動畫
        [weakSelf.previewView showTorchSwitch];// 顯示手電筒開關
    } else {// 變為亮光並且手電筒處於關閉狀態
        [weakSelf.previewView startScanning];// 開始掃描動畫
        [weakSelf.previewView hideTorchSwitch];// 隱藏手電筒開關
    }
}];
複製程式碼

當出現手電筒開關時，我們可以通過點選開關改變手電筒的狀態。開關手電筒的程式碼如下：

+ (void)switchTorch:(BOOL)on {
    
    AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];
    AVCaptureTorchMode torchMode = on? AVCaptureTorchModeOn: AVCaptureTorchModeOff;
    
    if (device.hasFlash && device.hasTorch && torchMode != device.torchMode) {
        [device lockForConfiguration:nil];// 修改device屬性之前須lock
        [device setTorchMode:torchMode];// 修改device的手電筒狀態
        [device unlockForConfiguration];// 修改device屬性之後unlock
    }
}
複製程式碼

手電筒開關（按鈕）封裝在QiCodePreviewView中，QiCodeManager中通過QiCodePreviewViewDelegate的- codeScanningView:didClickedTorchSwitch:方法獲取手電筒開關的點選事件，並做相應的邏輯處理。程式碼如下：

// QiCodePreviewViewDelegate
- (void)codeScanningView:(QiCodePreviewView *)scanningView didClickedTorchSwitch:(UIButton *)switchButton {
    
    switchButton.selected = !switchButton.selected;
    
    [QiCodeManager switchTorch:switchButton.selected];
    _lightObserverHasCalled = switchButton.selected;
}
複製程式碼

綜上，掃描二維碼/條形碼的功能就實現完了。此外，QiCodeManager中還封裝了生成二維碼/條形碼的方法，下篇文章介紹。

示例原始碼：QiQRCode可從GitHub的QiShare開源庫中獲取。

關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章：
iOS 瞭解Xcode Bitcode
iOS 重繪之drawRect
iOS 編寫高質量Objective-C程式碼（八）
iOS KVC與KVO簡介
奇舞週刊

相關推薦

iOS 掃描二維碼/條形碼

級別：★★☆☆☆ 標籤：「iOS 原生掃描」「AVCaptureSession」「AVCaptureDevice」「rectOfInterest」 作者： Xs·H 審校： QiShare團隊 最近做IoT專案，在智慧裝置配網過程中有一個掃描裝置或說明書上的二維碼/條形碼來讀取裝置資

[iOS 原生程式碼實現掃描二維碼/條形碼] AVCaptureDevice

//參照別人的教程的作業貼 記錄一下注意點 掃碼的主要原生程式碼如下 這裡比較關鍵的是對掃碼作用範圍的確定,metdataOutput.rectOfInterest 如果不設定,那麼預設就

超簡單ZXing掃描二維碼條形碼

首先在build.gradle寫上方法 repositories { mavenCentral() maven { url "http://dl.bintray.com/journeyapps/maven" } } 然後還是在這個檔案內加上依賴 implemen

Android Zxing實現掃描二維碼條形碼功能仿微信整合閃光燈生成二維碼

最近在做android專案需要用到二維碼條形碼掃描功能，我用的是Eclipse網上原始碼大多是GitHup上的Android studio版本的所以我改了一版整合到專案中去。 效果圖： 左邊版本的掃碼框是自定義的。右邊版本的掃碼框和掃描線是圖片因為太醜所以最終換成左邊

iOS 生成二維碼/條形碼

級別：★★☆☆☆ 標籤：「iOS CIFilter」「CIQRCodeGenerator」「CICode128BarcodeGenerator」「二維碼加logo」 作者： Xs·H 審校： QiShare團隊 接上文iOS 掃描二維碼/條形碼 及 iOS 掃描相簿圖片二維碼，本文介

微信小程式掃描二維碼條形碼 (wx.scanCode)

前言 在業務中遇到需要獲取商品的二維碼的資訊返回商品的二維碼資訊，在呼叫後臺的介面，首先想到用小程式的Api,wx.scanCode(Object object)獲取二維碼資訊。 支援相機掃描或者相簿獲取二維碼。 getScancode: function () {

iOS 掃描二維碼

_device = [AVCaptureDevicedefaultDeviceWithMediaType:AVMediaTypeVideo]; _input = [AVCaptureDeviceInputdeviceInputWithDevice:self.deviceerror:nil]; _ou

Android使用ZBar掃描二維碼/條形碼（例項）+常見問題彙總

寫在前面：因專案需求，需要實現二維碼掃碼功能，筆者測試過多種開源掃碼工具，但因不跨平臺、掃描速度慢等問題逐個放棄，最後選用ZBar實現功能，筆者發現ZBar掃碼在跨主流手機平臺、掃碼速度等方面有較明顯的優勢，現將核心功能整理成示例程式碼，便於日後複用和有需要的讀者參考。 =

IOS原聲二維碼條形碼掃描實現

本文講述如何用系統自帶的東東實現二維碼掃描的功能:點選當前頁面的某個按鈕，建立掃描VIEW。細心的小夥伴可以發現 title被改變了，返回按鈕被隱藏了。這個程式碼自己寫就行了，與本文關係不大。。。綠色的線會上下跑，不要擔心:D 實現效果如下： 　　1.在工程中新增

iOS 原生二維碼掃描

oca lac sig mediatype gate 5.0 項目 machine lec 直接上項目代碼 首先檢查相機權限 AVAuthorizationStatus status = [AVCaptureDevice authorizationStatusFo

Android 基於google Zxing實現二維碼 條形碼掃描，仿微信二維碼掃描效果

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

IONIC掃描二維碼和一維碼（條形碼）

      IONIC掃碼目前有三個外掛 ：            https://segmentfault.com/a/1190000012164809     &n

掃描二維碼自動識別手機系統（Android/IOS）

移動網際網路發展迅速，各種APP的開發都會推出多個版本（多終端），比如：iPhone版、iPad版、Android版。有些APP還會考慮覆蓋到多個國家（國際化），比如：中文版、英文版、日文版、韓文版等。此外，針對不同渠道（流量來源）也會提供不同的版本（多渠道），比如：百度版

iOS原生二維碼掃描(可以指定有效區域)

寫這篇文章的主要原因不是展示如何使用 AVFoundation 來進行二維碼掃描，更主要的是限制掃描二維碼的範圍。（因為預設的是全屏掃描） 專案遇到掃描二維碼的功能需求，這裡我放棄了使用三方庫，而採用了蘋果原生的掃描。 原生的好處就是掃描特別快效率特別高，但是遇到一個

掃描二維碼下載app，判斷是Android還是ios，並跳轉到不同的下載地址

寫在前面 通常，我們開發一個app，有Android版本，有ios版本，但是，我們有時候只有一個二維碼可以放置，比如，通過社會化分享，分享到微信一張圖片，通過微信識別二維碼來下載我們的app,此時，只有一個二維碼， 那麼怎樣，讓ios系統使用者掃描二維碼下載的

掃描二維碼自動識別手機系統（Android/IOS）跳轉不同頁面

移動網際網路發展迅速，各種APP的開發都太瘋狂了，一般稍大點兒的應用，都會準備多個版本，比如：iPhone版、iPad版、Android版，我們姑且稱之為：終端適配。 業務做的再大點兒的，APP還會考慮覆蓋到多個國家，比如：中文版、英文版、日文版、韓文版等，我們可稱之為

QRCode 掃描二維碼、掃描條形碼、相簿獲取圖片後識別、生成帶 Logo 二維碼、支援微博微信 QQ 二維碼掃描樣式

目錄功能介紹根據之前公司的產品需求，參考 barcodescanner 改的，希望能幫助到有生成二維碼、掃描二維碼、識別圖片二維碼等需求的猿友。修改幅度較大，也就沒準備針對 barcodescanner 庫提交PR。 ZXing 生成可自定義顏色、帶 logo 的二維碼 ZX

iOS 原生二維碼掃描（可限制掃描區域）

寫這篇文章的主要原因不是展示如何使用 AVFoundation   來進行二維碼掃描，更主要的是限制掃描二維碼的範圍。（因為預設的是全屏掃描） 專案遇到掃描二維碼的功能需求，這裡我放棄了使用三方庫，而採用了蘋果原生的掃描。 原生的好處就是掃描特別快效率特別高，但是遇到一個問

IOS 解決zbar掃描二維碼時出現中文亂碼問題例項

 作者：朱克鋒 郵箱：[email protected] 轉載請註明出處：http://blog.csdn.net/linux_zkf 在使用zbar掃描二維碼時有時候會出現中文亂碼問題

IOS中生成二維碼、掃描二維碼

轉載自:  http://www.jianshu.com/p/b8bf300e9a56 從IOS7開始集成了二維碼的生成和讀取功能生成二維碼 1 匯入CoreImage框架#import <CoreImage/CoreImage.h> 2 通過濾鏡CIFi