※2018년 7월 현재의 기사입니다
PWA 사용하면 프런트 엔드의 기술만으로 스마트폰 앱을 만들 수 있는 것 같기 때문에, "이것으로 카메라 앱 만들어 보자!"라고 생각해 도전했지만 결국 iOS11.4.1의 시점에서는 그것은 무리였던 것 같다는 이야기입니다. Safari 자체는 대응하고 있는 것 같지만, 조사하면 SeviceWorker가 아직 대응하고 있지 않다고 하는 것 같다. 실패했다고 말뿐이라고 외롭기 때문에, 작성까지의 기록을 여기에 적습니다.

준비

이번에는 Vue를 사용하여 만들었습니다. PWA 앱을 만드는 것이 너무 쉬웠기 때문입니다. 패키지 관리자는 yarn를 사용했습니다.

$ npm -g install yarn
$ yarn global add vue-cli
$ vue init pwa pwa-camera

만들기

App.vue

<template>
  <div id="app">
    <video ref="video" id="video"  autoplay playsinline ></video>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      video: {}
    }
  },
  mounted () {
    const medias = {audio: false,
      video: {
        facingMode: {
          exact: 'environment'  //リアカメラの設定
        }
      }}
    this.video = this.$refs.video
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia(medias).then(stream => {
        this.video.srcObject = stream
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
body {
  background-color: #000000;
  margin: 0px;
}

#app {
  text-align: center;
  color: #2c3e50;
}

#video {
  background-color: #000000;
  display: block;
  width: 100%;
}

#canvas {
  display: none;
  width: 100%;
}


</style>

그런 다음 GitHubPages에서 호스팅을 위해 config/index.js를 설정합니다. dist가 아닌 docs를 사용하므로 디렉토리 이름을 변경하십시오.

config/index.js

'use strict'

// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../docs/index.html'),
    assetsRoot: path.resolve(__dirname, '../docs'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

결과

yarn build에서 Vue를 빌드하면 GitHub로 푸시합니다. 그리고 푸시 한 페이지를 iPhone의 Safari에서 액세스하면


오, 무사히 움직이고 있는 움직이고 있다! 그럼 PWA로 갈 수 없다고 생각하고 홈 화면에 추가하고 움직이면 ...



화면이 어두웠지만 orz

감상

PWA가 빨리 카메라 등 대응해 주면 할 수 있는 폭이 늘어나는데라고 생각했다. SeviceWorker에 관해서도 지식이 모호하기 때문에 PWA 제대로 한다면 ServiceWorker의 제대로 된 지식도 필요하다. 언젠가 움직일 것이라고 기대를 담아 떠나자.
실제 사이트


추가
코멘트를 받았는데, SeviceWorker의 문제가 아닐 것 같습니다. getUserMedia는 Safari 내에서만 액세스 할 수있는 것 같습니다. Chrome에서 시작했는데 확실히 움직이지 않았습니다. 아직 iOS에서는 PWA는 벽이 높을 것 같습니다. (코멘트 감사합니다.)

참조

Vue.js로 시작하는 PWA
Vue.js에서 카메라 사용
iOS11의 Safari에서 카메라와 마이크에 액세스하는 간단하고 샘플 코드를 작성했습니다.