PWA保存拍摄的照片而没有下载提示

时间:2018-08-05 20:47:49

标签: progressive-web-apps

我正在尝试构建一个渐进式Web应用程序,该应用程序使用设备相机拍摄照片,但希望将其保存到自己的“照片”图库中,而不像本机相机应用程序一样被提示下载。还没有发现一种方法,如果将它上传到云上,Google上关于它的信息也就不多了吗?

谢谢

1 个答案:

答案 0 :(得分:0)

https://whatwebcando.today/photos.html上的链接表明这是可能的。

capturer = ImageCapture(streamVideoTrack)

在Media Stream Video Track之外创建图像捕获器。

capturer.takePhoto()

返回使用当前设置拍摄的照片解决的承诺。

capturer.setOptions(photoSettings)

配置photoSettings以进行后续捕获;如果可见,则可以在用作输入的Track中看到配置的效果。

这是示例代码:

function getUserMedia(options, successCallback, failureCallback) {
  var api = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;
  if (api) {
    return api.bind(navigator)(options, successCallback, failureCallback);
  }
}

var theStream;

function getStream() {
  if (!navigator.getUserMedia && !navigator.webkitGetUserMedia &&
    !navigator.mozGetUserMedia && !navigator.msGetUserMedia) {
    alert('User Media API not supported.');
    return;
  }

  var constraints = {
    video: true
  };

  getUserMedia(constraints, function (stream) {
    var mediaControl = document.querySelector('video');
    if ('srcObject' in mediaControl) {
      mediaControl.srcObject = stream;
      mediaControl.src = (window.URL || window.webkitURL).createObjectURL(stream);
    } else if (navigator.mozGetUserMedia) {
      mediaControl.mozSrcObject = stream;
    }
    theStream = stream;
  }, function (err) {
    alert('Error: ' + err);
  });
}

function takePhoto() {
  if (!('ImageCapture' in window)) {
    alert('ImageCapture is not available');
    return;
  }

  if (!theStream) {
    alert('Grab the video stream first!');
    return;
  }

  var theImageCapturer = new ImageCapture(theStream.getVideoTracks()[0]);

  theImageCapturer.takePhoto()
    .then(blob => {
      var theImageTag = document.getElementById("imageTag");
      theImageTag.src = URL.createObjectURL(blob);
    })
    .catch(err => alert('Error: ' + err));
}

所以看来您可以拍照了……我看不到任何地方表示您可以将这张照片保留在用户存储中。我想错了。