OpenSource – Flutter WebRTC Camara

최근 WebRTC 관련 작업을 많이 하고 있습니다. 주로 Flutter를 사용해서 앱을 만들고 있는데 아래 플러터 패키지가 꾸준히 업그레이드 되고 있어서 도움을 많이 받고 있습니다.

플러터용 WebRTC 패키지
https://pub.dev/packages/flutter_webrtc
WebRTC를 이용한 반려동물 CCTV
http://practical.kr/?p=580

시그널링(Signaling)

WebRTC는 offer – answer – candidate 등의 데이터를 주고받는 과정을 거쳐야만 화상통신을 연결 할 수 있는데 이 과정을 시그널링이라고 하고 일반적으로 시그널 서버를 만들어서 카메라와 뷰어를 연결합니다. 규정된 방법은 없고 개발자가 원하는 방법으로 데이터를 전달 하기만 하면 됩니다. 주로 소켓을 많이 이용합니다.

저는 이런 방법을 사용해 보기도 했습니다.

MQTT 기반으로 WebRTC 연결
http://practical.kr/?p=521

이것을 위해 별도의 서버를 운영을 해야 합니다. 언젠가 이런 생각을 해 봤습니다. 로그인 하지 않고 서버 없이 연결 할 수 없을까? 원격은 좀 어렵겠지만 로컬 Wifi에서는 가능하지 않을까? 로컬 Wifi 에 연결된 모든 앱이 소켓을 열고 서로 데이터를 주고 받으면 WebRTC 서버 없이 연결할 수 있겠는데? … 그런데 일단 앱의 IP를 알아야만 되더군요.

IP 찾기( Discover)

Bonsoir 패키지
https://pub.dev/packages/bonsoir

Bonsoir는 Zeroconf(https://ko.wikipedia.org/wiki/Zeroconf) 기반의 Discover 패키지입니다. 아래의 코드처럼 이벤트를 리스닝하고 있으면 브로드개스트를 하는 모든 기기를 찾을 수 있습니다. 애플은 봉주르라는 이름으로 기기들을 연결하고 있습니다.

  Future<void> _discoverService() async {
    _discovery = BonsoirDiscovery(type: _type);
    if (_discovery != null) {
      await _discovery!.ready;

      _discovery!.eventStream!.listen((event) {
        if (event.service != null) {
          ResolvedBonsoirService service = event.service as ResolvedBonsoirService;

          if (event.type == BonsoirDiscoveryEventType.discoveryServiceResolved) {
            final index = _resolvedServices.indexWhere((ResolvedBonsoirService item) => item.ip == service.ip);
            if (index == -1 && service.ip.toString() != "null") {
              _resolvedServices.add(service);
              setState(() {});
            }
          } else if (event.type == BonsoirDiscoveryEventType.discoveryServiceLost) {
            _resolvedServices.remove(service);
            setState(() {});
          }
        }
      });
      await _discovery!.start();
    }
  }

오픈소스 WebRTC 카메라

위의 몇가지 기술을 조립해서 앱을 만들어 봤습니다. 플러터의 장점인 멀티 플랫폼 지원 기능으로 아이폰 / 안드로이드 / 맥 에서 실행 가능 하도록 만들었습니다. 아래 링크에서 소스를 다운 받을 수 있습니다.

우선 맥앱을 빌드해서 맥에 실행하고 스마트폰에 앱을 빌드해서 실행하면 위의 그림과 같이 와이파이 무선 카메라를 실행 할 수 있습니다. 연결에 제한이 없으므로 많은 카메라를 한번에 연결 할 수도 있습니다.

코드를 수정하면 두대의 스마트폰으로 한대는 서버로 다른 스마트폰을 카메라로 사용할 수도 있습니다.

소스코드 링크
https://github.com/bipark/flutter_webrtc_wifi_camera

rtlink.park@gmail.com

EdgeDB와 GraphQL

전에 GraphQL을 Node.js기반으로 테스트 해보고 블로그를 한번 썼었다. 늘 그렇지만 이런 테스트의 목적은 어떻게 하면 코드를 적게 쓰고 목적을 달성하려는 의지이다. 좋게 말하면 생산성 향상.

http://practical.kr/?p=62

긱뉴스에 올라온 링크의 글(EdgeDB 관련)을 읽고 다시 호기심이 생겨서 한번 테스트를 해봤다.

EdgeDB 1년 사용 후기 - "다시는 SQL로 돌아가지 않을꺼야"

https://news.hada.io/topic?id=7052

EdgeDB는 Postgres 위에 만든 Graph/Relational DB 라고 한다. R-DB 이기는 하지만 SQL을 사용하지 않고 EgdeQL라는 새로 정의된 쿼리언어(?)를 사용하는데 SQL을 안다면 그리 어렵지는 않다.

개인적으로 쿼리언어를 바꾸는건 사실상 거의 불가능(? – 너무 오래 써서) 하다고 생각하고 있지만 의외로 GraphQL을 사용할 수 있는데 관심이 생겼다. 서버 코드 적게 쓰거나 안써도 될까? 이건 늘 관심사다. 그래도 DB 바꾸는 일은 쉬운일이 절대 아니다. 특히 SQL은 더더욱. EdgeDB의 GraphQL 부분만 한번 테스트 해봤다. 다음 프로젝트에서 써먹을 수 있을까 싶어서…

설치

설치는 매우 쉽다. 커맨드 라인에 명령어를 입력하면 자동으로 설치된다. 링크를 따라가면 Windows용 설치 명령어도 있다.

EdgeDB 설치
https://www.edgedb.com/install

스키마 만들기

설치가 완료되고 테스트용 스키마를 만들었다. 설치된 폴더 아래에 \dbschema 라는 폴더가 있고 거기에 default.esdl 파일이 생성되어 있다. 이 파일을 텍스트 편집기로 열고 아래 스키마를 입력하고 저장한다.

module default {
  type Person {
    required property first_name -> str;
    required property last_name -> str;
  }

  type Movie {
    required property title -> str;
    property year -> int64;
    link director -> Person;
    multi link actors -> Person;
  }
};

그리고 마이그레이션 과정을 거치면

마이그레이션 실행

> edgedb migration create
> edgedb migrate

스키마가 생성되고 입력, 수정, 삭제 등이 가능하다. 테스트를 위해 몇개의 데이터를 삽입했다.

https://www.edgedb.com/docs/guides/quickstart#insert-data

GraphQL 실행

테스트의 목적이 GraphQL을 통한 데이터 쿼리였으니 GraphQL 기능을 Enable 상태로 바꾸어야 한다. 방법은 위의 default.esd 파일의 첫줄에 아래 명령어를 추가 해주고 마이그레이션 명령을 한번 더 실행하는 것으로 완료된다.

using extension graphql;

실행하고 나서 edgedb instance list 커맨드를 실행하면 Name, Port, Status등을 확인 할 수 있다.

그리고 PostMan 같은 API Call 도구를 이용해서 http get을 통해서 아래와 같이 Json데이터를 얻을 수 있었다.

GraphQL 호출결과

결론

GraphQL은 마치 과거에 C/S 프로그램을 연상 시키지만 SQL을 사용하지 않는다는 점에서 보안상의 헛점을 해결한듯 보인다. 그러면서도 REST 서버 코드를 줄이고 생산성을 높인다는 점에서 매력적으로 보인다. EdgeDB는 SQL을 버리면서 또다른 방법을 보여준것 같아서 기대가 된다.

다음 프로젝트에 한번 써볼까? 2020.07.28 박병일

Velodyne 라이다와 파이썬 연결

최근 Velodyne 라이다 VLP-16을 사용해 볼 기회가 생겼다. 이 라이다는 자율주행 자동차에 많이 사용되고 있지만 나는 라이다를 고정하고 특정 목표물의 시간에 따른 위치변화(변이)를 확인하고자 테스트를 시작했고 결과물로 파이썬에서 라이다 데이터를 실시간으로 읽어서 파일 혹은 데이터 베이스에 저장할 목적으로 테스트를 했다.

ROS

라이다를 구입할 때 받은 VeloView라는 프로그램으로 라이다가 정상적으로 작동하고 PCAP 또는 CSV 형태의 파일로 저장 가능한 것을 확인했지만 그건 내가 원하는 방법이 아니었다.

VeloView

며칠의 삽질끝에 ROS를 이용하는 것이 가장(?) 효율적이라는 결론을 얻고 Ubuntu 20.04에 ROS – Noetic을 설치했다. 아래의 링크에서 ROS 설치 방법을 확인할 수 있다.

ROS - Noetic 설치
http://wiki.ros.org/noetic/Installation/Ubuntu

Velodyne Driver 설치

ROS를 이용하는 가장 큰 이유는 이미 만들어진 드라이버를 활용할 수 있기 때문인데 Velodyne Lidar 역시 버전별로 드라이버가 있다. 아래의 링크와 같이 드라이버를 설치했다. 링크에는 최초에 라이다를 연결하는 방법부터 rviz를 이용하여 VeloView와 같은 형식으로 라이다 데이터를 조회 할 수 있는 방법까지 알려준다.

아래 링크의 내용에서 
sudo apt-get install ros-VERSION-velodyne
부분은
sudo apt-get install ros-noetic-velodyne
으로 변경해서 설치해 준다


Velodyne Driver 설치
http://wiki.ros.org/velodyne/Tutorials/Getting%20Started%20with%20the%20Velodyne%20VLP16
RViz 측정결과 화면

ROS – RViz 에서 데이터를 확인할 수 있었지만 위치 데이터를 얻는 것이 목적이었기 때문에 VeloView와 동일하게 ROS에서 잘 연결되는구나를 확인하고 다음 삽질을 시작했다. 목표는 파이썬에서 각도별 거리를 얻어내는 것.

Publisher, Subscriber, PointCloud, Python

파이썬으로 라이다 데이터를 추출하기 위하여 ROS 튜토리얼을 스터디하던 과정에서 ROS 노드들의 통신 방식에 대해서 알게 되었다. 전에 내가 IOT 장비 연결에 주로 사용하던 MQTT 프로토콜과 거의 흡사한 구조.

발행자(Publisher)와 수신자(Subscriber)가 일정한 토픽(topic)을 공유하고 데이터를 송, 수신하는 방식으로 아래 링크를 참조하면 파이썬으로 데이터를 송, 수신하는 샘플을 확인할 수 있다.

위의 RViz 프로그램 역시 토픽을 Subscribe하여 라이다의 3차원 이미지를 그린다.

파이썬을 이용한 ROS 데이터 송수신 샘플
http://wiki.ros.org/ROS/Tutorials/WritingPublisherSubscriber%28python%29

아래의 커맨드를 실행해서 퍼블리셔(Publisher)를 실행시킨다. Velodyne Driver 설치 링크에서 이미 Publisher를 실행했었다. 그래서 RViz가 라이다 데이터를 수신해서 결과 화면을 그릴 수 있었다. 종료되었다면 아래와 같이 다시 실행할 수 있다.

$ roslaunch velodyne_pointcloud VLP16_points.launch

위의 샘플 코드를 응용하여 아래와 같이 벨로다인 토픽을 수신(Subscribe)한다.

if __name__ == '__main__':
    rospy.init_node("listener", anonymous=True)
    rospy.Subscriber('/velodyne_points', PointCloud2, callback)

    rospy.spin()

위의 코드에서 rospy.Subscriber() 의 파라메타는 토픽, 수신할 구조체 형식, 콜백 함수인데 콜백 함수의 구조는 아래와 같다.

import sensor_msgs.point_cloud2 as pc2

def callback(input_ros_msg):
    for data in pc2.read_points(input_ros_msg, skip_nans=True):
        x2 = data[0]
        y2 = data[1]
        z2 = data[2]
        intensity = data[3]
        ring = data[4]
        time1 = datetime.fromtimestamp(data[5])

        distance = math.sqrt((x2)**2+(y2)**2+(z2)**2)
        azimuth = math.degrees(math.atan2((x2),(y2)))

콜백을 통하여 전달된 데이터는 PointCloud 구조로 변환하고 변환된 좌표를 이용하여 거리와 방위각을 계산할 수 있다. 이제 데이터를 얻었으니 저장만하면 된다 . ^_^

거리와 방위각 계산방법은 아래 링크를 참고했다. 
https://gis.stackexchange.com/questions/108547/how-to-calculate-distance-azimuth-and-dip-from-two-xyz-coordinates

2022.07.07 박병일

Practical, a companion animal video player ‘Banzle’ officially opened in the App Store

Seoul–(Newswire) May 03, 2022 — Mobile app developer Practical (CEO Park Byeong-il) has developed its own ‘Banzle video player for pets’ on Google Play Store (Android) and App Store. It was announced on the 3rd that it was officially opened through (IOS).

‘Banzle’, a video player for companion animals developed by Practical, is a video player that allows companion animals to spend the day happily by playing the video on a smartphone that is not in use to the companion animal alone at home after the companion has gone to work. Smartphone-only apps and services.

As of 2022, there are 15 million domestic companions, and the reality is that one in four companion animals spends more than six hours a day alone. Companion owners turn on the lights or install air-conditioning, air-conditioning, automatic feeders, CCTV, etc. to soothe the loneliness of their companion animals and secure their safety. Accordingly, the pet tech market is growing significantly every year.

Banzle is a new pet tech product that allows you to check the current status of your companion animal using the camera on your smartphone, make a video call with your pet, and select a video to play on your pet at home from a remote location.

CEO Park Byeong-il said, “Currently, YouTube’s videos specialized for dogs and cats are provided through the Banzzle app, and we will invest more in developing videos for companion animals in the future.”

Banzzle can be downloaded for free from Google Play Store (Android) and App Store (IOS).

Practical Overview

Practical is a smartphone app developer established in 2018.

Google Play Store (Android): https://play.google.com/store/apps/details?id=com….
App Store (IOS): https://apps.apple.com/app/id1610958994

Website: http://practical.kr

반즐(Banzle) – 반려동물 전용 동영상 플레이어

반즐은 집에 혼자있는 반려친구를 위한 스마트폰용 동영상 플레이어입니다.

사용하지 않는 스마트폰을 활용해서 집에 혼자 있는 반려친구에게 전용 동영상을 틀어주세요.

반려견용, 반려묘용 동영상이 따로 준비되어 있어요. 밖에서도 원격으로 동영상을 바꿔서 틀어줄 수도 있어요.

그리고 혼자 있을때 무얼 하고 있는지 스마트폰 카메라로 화상통화를 할수 있어요.

아래 링크에서 다운받아 보세요. 무료앱이예요.

사용방법은 아래와 같아요. 그런데 주의할 점은 두대의 스마트폰에 반드시 같은 아이디로 로그인해야 원격 플레이와 화상통화를 할수 있어요.

◆ 주의사항

  1. 외출할때 꼭 “반즐”앱을 실행하고 나가야 해요
  2. 충전기에 연결되어 있어야해요
  3. 반려친구가 건드려서 앱이 꺼지지 않도록 적절한 위치에 두세요

브릿지(BritGi – Smart CCTV) 릴리즈

사용하지 않는 스마트폰을 CCTV로 활용할 수 있는 앱

브릿지(BritGi) V1.0

브릿지(BritGi)는 오래되서 사용하지 않는 스마트폰을 CCTV로 활용할 수 있는 앱입니다. 집을 비울때 반려견, 반려묘가 무었을 하고 있는지 내 스마트폰으로 실시간 조회 할 수 있습니다.

다운로드

아래 링크에서 무료로 다운로드 할 수 있습니다. 인앱결재 없이 계속 무료로 사용할 수 있습니다. 아이패드, 안드로이드 패드 지원합니다.

사용방법

브릿지(BritGi)는 오래된 스마트폰을 카메라로 사용하고 현재 쓰고 있는 스마트폰을 조회용으로 사용합니다.

  1. 카메라로 사용할 오래된 스마트폰과 지금쓰고 있는 스마트폰에 앱을 다운로드 하여 설치 합니다.
  2. 두개의 스마트폰에서 동일한 아이디(구글로그인 또는 애플로그인)로 로그인 합니다. (주의) 반드시 동일한 아이디로 로그인 해야 합니다. 카메라폰과 뷰어폰은 다른 종류라도 됩니다. – 예를들면 카메라는 안드로이드 뷰어는 아이폰
  3. 카메라 폰에서 카메라버튼을 눌러 카메라를 실행하고 뷰어폰에서 새로고침을 실행하면 카메라 목록이 화면에 나타나고 목록을 누르면 원격 영상을 볼수 있습니다.
  4. 카메라에 상시전원을 연결하고 고정하여 원격에서 전면, 후면 카메라를 선택하며 360도 거의 모든 방향을 볼 수 있습니다.

WebRTC(Peer-to-Peer)

브릿지(BritGi)는 카메라와 뷰어를 직접 연결하는 방식(WebRTC – Peer to Peer)으로 서버를 거치지 않고 영상정보를 전송합니다. 그래서 서버에 영상이 저장되지 않고 실시간으로만 조회가 가능합니다.

HD / Wifi, LTE, 5G

  • Wifi 연결에서는 HD 화질을 30 frame / sec 로 연결됩니다.
  • 5G/LTE 환경에서는 SD화질로 연결됩니다.
  • 가급적 Wifi 환경에서 사용하세요.

WebRTC, MQTT, Flutter

WebRTC를 이용한 화상/데이터 통신은 기본적으로 시그널 서버가 필요하다. 일반적으로 Websocket을 많이 사용하는데 서버는 클라이언트에서 전송되는 SDP, Candidate를 릴레이 하여 클라이언트가 연결할 상대방의 IP와 Port 정보를 주고 받은 다음 받은 정보를 이용하여 P2p 접속을 시도한다.

MQTT

MQTT는 발행/구독 기반으로 일대일, 일대다 데이터 통신에 적합하고 구독 채널을 트리구조로 구성 할 수 있기 때문에 Websocket에서 채팅방-서브 채팅방을 구현하는 기능을 아주 간단하게 구현 할 수 있다.

아이디어 – Mosquitto

WebRTC 화상통신앱을 만들며 처음부터 이 생각을 했다. WebSocket으로 채팅방을 만들지 않고 MQTT를 이용하면 안될까? Mosquitto 서버라면 보안성 문제도 쉽게 해결 할 수 있고 성능도 우수한 시그널 서버로 활용할 수 있지 않을까? 그래서 한번 해봤다.

Sample Code – Flutter

이 이미지는 대체 속성이 비어있습니다. 그 파일 이름은 1638688086230-1.jpg입니다

아래 링크의 소스 코드는 현재 만들고 있는 CCTV관련앱에서 기본적인 기능만 추출해서 Sample Project를 만들었다. Flutter로 만들어진 오픈소스이며 오픈된 Mosquitto 서버에 접속하여 동일한 토픽을 발행/구독하여 시그널을 주고 받은후 P2p를 연결하여 화상통신을 실행한다.

결론적으로 이 프로젝트에서 WebRTC 통신을 하기 위한 시그널 서버는 만들지않았다.

소스다운로드 링크

https://github.com/bipark/webrtc_mqtt_flutter_phone

P2p연결을 위해 Google Stun 서버를 사용하며 3G, LTE에서 연결이 되지 않을수도 있다. Stun 서버를 통한 P2p 연결이 불가능한 경우는 Turn 서버를 개별적으로 설치하고 운영해야 하는데 오픈소스인 Coturn을 활용하여 운용이 가능하다.

class MQTTManager {
  MqttServerClient? _client;

  MQTTManager(String clientId) {
    _client = MqttServerClient("test.mosquitto.org", clientId);
    _client!.autoReconnect = true;
    _client!.logging(on: false);
    _client!.keepAlivePeriod = 20;
  }

  Future&lt;void&gt; connect(String topic) async {
    try {
      await _client!.connect();
    } on Exception catch (e) {
      print('EXAMPLE::client exception - $e');
    }
    _client!.subscribe(topic, MqttQos.atMostOnce);
  }

  void publishMessage(String topic ,String message) {
    try {
      final builder1 = MqttClientPayloadBuilder();
      builder1.addString(message);
      _client!.publishMessage(topic, MqttQos.atLeastOnce, builder1.payload!);
    } on Exception catch (e) {
      print('EXAMPLE::client exception - $e');
    }
  }

  void subscribeTopic(String topic) {
    _client!.subscribe(topic, MqttQos.atMostOnce);
  }

  void unSubscribeTopic(String topic) {
    _client!.unsubscribe(topic);
  }

  void disconnect() {
    _client!.disconnect();
  }

  get client =&gt; _client;
}

WebRTC와 관련한 코드는 시그널 기능에 따른 많은 코드들이 요구되지만 셈플에서는 가장 기본적인 통신 기능만을 구현 했다.

  _mqtt = MQTTManager(_clientId);
  await _mqtt!.connect(_topic);
  
  ...
  var desc = await _localPc!.createOffer(offerSdpConstraints);
  await _localPc!.setLocalDescription(desc);
  _sendData("offer", desc.sdp);
  
  ...
  void _sendData(event, data) {
    var request = Map();
    request["command"] = "signal";
    request["clientid"] = _clientId;
    request["type"] = event;
    request["data"] = data;
    _mqtt!.publishMessage(_topic, jsonEncode(request).toString());
  }

박병일, 2021.12.5, rtlink.park@gmail.com

Swift/SwiftUI – 조도측정기 개발기

Swift/SwiftUI를 스터디 하며 개인적으로 두번째 앱을 스토어에 업로드 했습니다.

최근에 하던 작업에서 조도를 측정해야 할 일이 있었는데 측정수치만 보여주는 보여주는 앱을 다운 받았는데 측정 상황에 따른 데이터를 저장해 두고 싶었는데 그게 안되더군요. 그래서 하나 만들어 볼까 하는 생각을 했습니다.

개인적인 요구사항은 사진과 함께 측정결과값을 보관하고 다음에 다른 환경의 데이터와 비교해서 볼 수 있었으면 하는것이었습니다.

카메라뷰 컨트롤러

https://github.com/imaginary-cloud/CameraManager

요구 사항을 만족시키려면 우선 카메라가 필요합니다. 그리고 조도를 측정 하려면 프레임을 캡쳐해서 현재 화면의 메타데이터를 얻어야 합니다. 카메라 컨트롤은 위 링크의 오픈 소스를 사용했습니다. 이 오픈 소스는 아이폰 카메라를 만드는데 꼭 필요한 기본적인 기능을 갖추고 있는 아주 훌륭한 오픈소스 입니다.

하지만 SwiftUI 기반에서 프레임을 캡쳐하기 위하여 AVCaptureVideoDataOutputSampleBufferDelegate 을 얻으려면 몇가지 추가적인 작업을 해야 합니다. SwiftUI에서 View와 ViewController를 사용하려면 UIViewControllerRepresentable 프로토콜을 구현해서 델리게이션을 수행 할 수 있습니다.

델리게이션에서는 프레임이 변화될때마다 측정값을 계산합니다.

대략의 코드는 아래와 같습니다.

//
//  PreViewController.swift
//  CamMeter
//
//  Created by Park Billy on 2021/06/08.
//
import SwiftUI
import UIKit
import CameraManager
import AVFoundation


struct PreViewController: UIViewControllerRepresentable {
    @State var cameraManager:CameraManager
    @Binding var lux: Double

    func makeUIViewController(context: Context) -> some UIViewController {
        let controller = UIViewController()
            
        cameraManager.cameraDevice = UserDefaults.standard.integer(forKey: "device") == 1 ? CameraDevice.front : CameraDevice.back
        cameraManager.addPreviewLayerToView(controller.view)
        cameraManager.cameraOutputMode = CameraOutputMode.videoOnly
        
        let output = AVCaptureVideoDataOutput()
        if ((cameraManager.captureSession?.canAddOutput(output)) != nil) {
            cameraManager.captureSession?.addOutput(output)
            let VideoQueue = DispatchQueue(label: "VideoQueue")
            output.setSampleBufferDelegate(context.coordinator, queue: VideoQueue)
        }
        return controller
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
    }

    class Coordinator: NSObject, AVCaptureVideoDataOutputSampleBufferDelegate {
        @Binding var lux: Double

        init(lux: Binding<Double>) {
            _lux = lux
        }

        func captureOutput(_ output: AVCaptureOutput, didOutput sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection) {            
            if let metadata = CMGetAttachment(sampleBuffer, key: kCGImagePropertyExifDictionary, attachmentModeOut: nil) {
                if let fN = metadata["FNumber"] as? Double {
                    if let fT = metadata["ExposureTime"] as? Double {
                        if let speedArr = metadata["ISOSpeedRatings"] as? NSArray {                            
                            let calValue = UserDefaults.standard.double(forKey: "calvalue")                            
                            let fS = speedArr[0] as! Double
                            lux = (fN * fN) / (fT * fS) * calValue
                        }
                    }
                }
            }
            
        }
    }

    func makeCoordinator() -> Coordinator {
        return Coordinator(lux: $lux)
    }

}
 

조도계산

위의 코드에서 보다시피 프레임만 얻으면 조도계산은 간단합니다. 얻어낸 sampleBuffer에서 Exif 데이터를 추출하고 그중에서 FNumber, ExposureTime, ISOSpeedRatings을 이용해서 간단한 계산식을 만들면 끝입니다.

캘리브레이션

계산 결과로 나온 수치는 얼마나 정확 할까요? 확인할 방법이 없어서 아래와 같이 생긴 조도계를 구입했습니다.

그리고 조도계의 결과와 동일한 출력이 나올 수 있도록 Calibration 프리셋을 입력 할 수 있는 기능을 Settings에 추가 했습니다. 기본 프리셋은 18입니다. 아마도 더 정확한 조도계를 가지고 있다면 거기에 맞도록 프리셋을 조정 하면 됩니다. 측정결과를 보며 캘리브레이션값을 조정 할 수 있도록 메인화면에 슬라이드를 보이도록 할 수도 있습니다.

SwiftUI

개인적으로 AutoLayout이 도입되면서부터 iOS 개발이 좀 재미가 없어지지 않았나 하는 생각을 했습니다. 그리고 그 사이에 웹프론트 프로젝트를 하면서 HTML, CSS를 알게 되었죠. 아무래도 그 덕분에 SwiftUI를 더 쉽게 받아 들이고 있는게 아닌가 하는 생각을 했습니다. 최근 쓰고 있는 Flutter도 마찬가지 인것 같구요.

iOS 개발이 다시 재미있어진건 무었보다도 SwiftUI 덕분입니다.

조도측정기

두어달 전에 SwiftUI 기반으로 처음만든 연봉계산기는 올렸습니다만 조도 측정기는 실제 측정기 구입비 정도는 나와야 하지 않을까 싶어서 1달러에 스토어에 올렸습니다. 제가 여ㅓ가지 조도측정앱을 다운 받아 봤습니다만 쓸만합니다. ^^;

엊그제 버전을 1.1로 올리면서 광원거리를 입력하면 칸델라단위도 보여주도록 수정했습니다. 한글/영문/일본어 지원

당연히! 필요하신 분만 사시면 됩니다. ^^

https://apps.apple.com/app/id1572227924

박병일/20200720

SwiftUI 에서 URL Schemes 과 Deeplink

최근 SwiftUI를 공부하며 개인적으로 문제가 되고 있던것 중에 하나가 과거에 하던 방식으로 문제를 해결하려는 버릇인데 URLSchames 문제를 해결하려다 또 그런일이 있었다. 프레임워크가 변하면 생각을 바꿔야 하는데 그게 쉽지 않다.

URL Schemes

URL Schemes와 그에따른 처리방법은 아이폰앱에서 데이터를 전달할 수 있는 규격을 등록하고 등록된 규격의 데이터를 수신 했을때의 처리를 위한 일련의 처리를 말하는데 거의 초기버전의 iOS부터 지원한 방법이다.

내가 알고 있던 이 문제를 해결하는 방법은 AppDelegate와 SceneDelegate 에 아래와 같은 함수를 정의하고 URLContext의 URL을 파싱해서 데이터의 내용에 따라 분기를 하고 데이터에 맞는 ViewController를 오픈하는 단계까지 가는 것이 문제의 해결이었다.

 func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        if let url = URLContexts.first?.url {            
            print("url: \(url.absoluteURL)")
            print("scheme: \(url.scheme)")
            print("host: \(url.host)")
        }
    }

하지만 현재 XCode(V 12.5) 에서 기본적인 프로젝트 생성에서 Life Cycle을 SwiftUI App으로 만들면 AppDelegate, SceneDelegate를 만들어 주지 않는다. 이게 존재 하지 않으니 어디에서 url을 받아들이고 분기해야 할지 알 수가 없었다.

참고로 앱을 생성할때 아래의 Life Cycle을 UIKit App Delegate를 선택하면 이전에 쓰던 AppDelegate과 SceneDelegate 파일이 자동으로 생성된다.

삽질

과거의 방법으로 문제를 해결하려는 시도는 결국 며칠간의 삽질로 끝났다. AppDelegate와 SceneDelegate를 새로 만들었고 이런 해결방법도 가능하다는 결론에 도달했지만 검색중에 보게된 코드 때문에 그 코드들을 모두 버리고 말았다.

.onOpenURL()

문제의 해결 방법이 너무 간단해서 약간 허탈하긴 했지만 아래의 코드와 같이 View의 메소드를 호출하는 방법으로 URL Schemes에 등록된 url의 접근을 확인 할 수 있다.

@main
struct MyApplication: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
        .onOpenURL { url in
          print(url)
        }
    }
  }
}

DeepLink

위의 코드에서 보는것과 같이 모든 View 컨트롤은 .onOpenURL() 메소드를 가지고 있다. 이것은 위에 보이는 메인뷰에서도 url 이벤트를 확인해서 실제로 보여주고자 하는 상세 페이지까지 이동 했을 경우 그 뷰에도 동일한 함수(.onOpenURL())를 호출하면 url값을 얻을 수도 있다.

.onOpenURL { url in
            if (url.scheme! == "where-board" && url.host! == "invite") {
                if let components = NSURLComponents(url: url, resolvingAgainstBaseURL: true) {
                    for query in components.queryItems! {
                        print(query.name)
                        print(query.value!)                        
                    }
                }
            }            
        }

Sample 프로젝트

아래와 같이 신규 프로젝트를 생성해서 상세 페이지에서 URL Schames를 통해 전달된 데이터를 출력해 볼수 있다.

프로젝트의 Life Cycle은 SwiftUI App으로 선택한다.

URL Schemes을 생성하기 위해서는 프로젝트 – info – URL Types 를 선택하고 + 버튼을 눌러서 URL Schemes 항목에 유니크한 이름을 입력한다.

메인 프로젝트 App – Scene – View 의 구조에서 ContentView()에 아래의 코드와 같이 url을 확인 할 수 있다.

import SwiftUI

@main
struct DeepLink_TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onOpenURL(perform: { url in
                    print(url)
                })
        }
    }
}

실제 콘텐츠뷰의 내부에서도 url 을 전달 받을 수 있다

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
            .onOpenURL(perform: { url in
                print(url)
            })

    }
}

아이폰에 빌드하고 앱이 실핼된 상태에서 사파리 브라우저에서 위와 같이 주소를 입력하고 앱으로 전환되어 아래와 같이 url이 전달되는 것을 확인할 수 있었다. 두번 프린트 되었는데 첫번째는 위의 코드에서 두번째는 아래의 코드에서 전달된 데이터이다.

my-deeplink-test://share?id=1234
my-deeplink-test://share?id=1234

대략 아래와 같은 코드를 이용해서 url을 파싱할 수 있다.

        .onOpenURL { url in
            if (url.scheme! == "my-deeplink-test" && url.host! == "share") {
                if let components = NSURLComponents(url: url, resolvingAgainstBaseURL: true) {
                    for query in components.queryItems! {
                        print(query.name)
                        print(query.value!)                        
                    }
                }
            }            
        }

20210515 박병일

iOS/Swift에서 OpenCV 사용

수년전에 iOS에서 OpenCV를 이용해서 작업을 해본적이 있었는데 새로 같은 작은 작업을 하려다보니 다 잊어버려서 OpenCV 프레임워크를 설치하는 과정을 잊어버려서 잊지 않기 위해서, 그리고 새버전의 Swift/Xcode에서 OpenCV와의 연결에 문제가 없는지 확인하기 위해 다시 한번 해보고 아래와 같이 정리 했다.

OpenCV 프레임워크 다운로드

iOS용 OpenCV 프레임워크를 다운 받는다. OpenCV가 버전업 될때마다 친절하게도 iOS용 프레임워크를 빌드해서 다운받을 수 있도록 준비가 되어 있다. 아래 링크에서 프레임워크를 다운 받을 수 있다. 현재 버전은 V4,5,2 최근 버전이 굉장히 빠르게 올라가고 있다. 머신러닝과 관련한 기능들이 많이 추가된것이 원인인듯하다.

https://opencv.org/releases/

다운 받아 압축을 해제 하면 iOS에서 바로 사용할 수 있는 프레임워크 형식의 파일과 폴더로 구성되어 있다.

Xcode 신규 프로젝트 생성

프레임워크 추가

Xcode에서 OpenCV-Test 라는 이름의 신규 프로젝트를 하나 생성 했다. 내가 쓰고 있는 Xcode의 버전은 12.5이다. 위에서 압축 해제한 OpenCV 프레임워크를 폴더를 생성한 프로젝트 폴더로 이동하고 프로젝트를 선택하고 [Build Phase] 에서 Link Binary With Libraries 의 + 버튼을 눌러서 프로젝트에 포함시킨다.

래퍼클래스 생성

File 메뉴에서 New -> File..을 선택해서 아래 그림과 같은 순서로 CVWrapper를 생성한다.

이때 주의할점은 Language 에 Swift 대신에 Objecitive-C 언어로 선택을 해주어야만한다. Next를 선택하면 Xcode는 자동으로 브릿지 Header 파일을 생성하겠냐는 메세지를 보여준다. Create Bridging Header를 선택해서 브릿지헤더파일을 생성한다.

그리고 생성된 CVWrapper.m 파일의 확장자를 CVWrapper.mm 으로 변경해준다.

Prefix Header 파일 생성

그리고 메뉴에서 File – New – File… 을 선택해서 PCH file을 위 그림과 같이 선택해서 주어진 파일명으로 생성하고 생성된 .pch 파일에 아래와 같은 코드를 삽입한다.

//
//  PrefixHeader.pch
//  OpenCV-Test
//
//  Created by Park Billy on 2021/05/07.
//

#ifndef PrefixHeader_pch
#define PrefixHeader_pch

#ifdef __cplusplus
#include <opencv2/opencv.hpp>
#endif

#endif /* PrefixHeader_pch */

생성한 Prefix 파일을 컴파일러에 등록해 주어야 하는데 아래의 그림과 같이 Build Settings에서 $(SRCROOT)/프로젝트명/PrefixHeader.pch의 형식으로 등록한다.

OpenCV 버전확인 하기

아래의 코드를 추가해서 OpenCV의 버전을 가져오는 기능을 만들어 봤다. CVWrapper.h / CVWrapper.mm

//
//  CVWrapper.h
//  OpenCV-Test
//
//  Created by Park Billy on 2021/05/07.
//

#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface CVWrapper : NSObject

+ (NSString *)openCVVersion;

@end

NS_ASSUME_NONNULL_END
//
//  CVWrapper.mm
//  OpenCV-Test
//
//  Created by Park Billy on 2021/05/07.
//

#import "CVWrapper.h"
#import <opencv2/opencv.hpp>

@implementation CVWrapper

+ (NSString *)openCVVersion {
    return [NSString stringWithFormat:@"OpenCV Version %s",  CV_VERSION];
}

@end

ContentView.Swift에서 래퍼클래스의 함수를 호출하여 실제 아이폰 화면에 OpenCV 버전을 보여주는 코드를 아래와 같이 추가했다.

//
//  ContentView.swift
//  OpenCV-Test
//
//  Created by Park Billy on 2021/05/07.
//

import SwiftUI

struct ContentView: View {
    @State var version = ""
    
    var body: some View {
        Text(self.version)
            .padding()
            .onAppear(){
                self.version = CVWrapper.openCVVersion()
            }
    }
}

실행결과

실행 결과는 아래와 같다.

실제로 iOS에서 OpenCV 기능을 활용하려면 위의 CVWrapper.h 에 함수를 정의 하고 CVWrapper.mm에 기능을 구현해서 Swift 코드에서 함수를 호출하는 방식으로 사용하면 된다.

소스코드

아래 링크에서 소스 코드를 다운 받을 수 있다. 이 프로젝트를 테스트 하려면 소스에 OpenCV 프레임워크는 포함되어 있지 않으므로 다운 받아서 이글의 첫번째 부분과 같이 프레임워크를 포함시켜야 한다.

https://github.com/bipark/opencv_ios_starter

20210507 박병일