[Mobilar] Take a photo with its location information

资源一

Vue.js Tutorial: Learn to Build a Web App Quickly + Source Code

Vue.js Tutorial: Learn to Build a Web App Quickly

 

 

资源二

Location Based (GPS) Augmented Reality on the Web

貌似内置方向，比较重要。

 

 

资源三

vuejs geolocation and camera api photoTag

Codepen代码参考：https://gist.github.com/edwardlorilla/1d32b2f07350a365656d47052fdfad79

简单的方案。

 

 

资源四

从这里入手：

How to create a CAMERA APP in VueJS - Day 15 - #100DaysOfCode

 

 

资源五

https://codepen.io/ditarahma08/pen/GRRxZLW

how to convert codepen to vue?

 

 

 

 

各种问题

---

一、手机打开后，成了全屏

要求

a) 打开后置摄像头。

b) preview area可控。

      <video
        v-show="!isPhotoTaken"
        ref="camera"
        :width="450"
        :height="337.5"
        autoplay
      ></video>

      <canvas
        v-show="isPhotoTaken"
        id="photoTaken"
        ref="canvas"
        :width="450"
        :height="337.5"
      ></canvas>

 

方案

• 读取video的frame。

let vc = null;

function startCamera() {
　　if (streaming) return;
　　navigator.mediaDevices.getUserMedia({video: resolution, audio: false})
　　　　.then(function(s) {
　　　　stream = s;
　　　　video.srcObject = s;
　　　　video.play();
　　})
　　　　.catch(function(err) {
　　　　console.log("An error occured! " + err);
　　});

　　video.addEventListener("canplay", function(ev) {
　　　　if (!streaming) {
　　　　　　height = video.videoHeight;
　　　　　　width  = video.videoWidth;
　　　　　　video.setAttribute("width", width);
　　　　　　video.setAttribute("height", height);
　　　　　　streaming = true;
　　　　　　vc = new cv.VideoCapture(video);
　　　　}
　　　　startVideoProcessing();
　　}, false);
}

vc.read(src);

 

• 处理后，写入result。

  cv.imshow("canvasOutput", result);

 

• 再刷新canva。

<td>
    <canvas class="center-block" id="canvasOutput" width=320 height=240></canvas>
</td>

 

• 后置摄像头配置

async function startCamera() {
  const videoConstraints = {};
  videoConstraints.facingMode = 'environment';    // <---- open rear camera.

  let stream = await navigator.mediaDevices.getUserMedia({video: videoConstraints, audio: false});
  g_video.srcObject = stream;
  await g_video.play();

  setInterval(() => takeSnapshot(), 200);
}

 

 

二、防止video自动全屏

设置为：inline模式

      <video
        v-show="!isPhotoTaken"
        ref="camera"
        :width="450"
        :height="337.5"
        autoplay playsinline muted
      ></video>

 

 

 

End.