Как я могу решить проблему html5_webcam на сайте? - PullRequest
Новая
       36

Как я могу решить проблему html5_webcam на сайте?

0 голосов
/ 17 февраля 2019

существует проблема с веб-камерой html5. Это ошибка, которая у меня есть. Uncaught TypeError: Не удалось выполнить 'createObjectURL' для 'URL': не найдено ни одной функции, соответствующей указанной подписи.at photo.js: 17

photo.js: 17 video.src = vendorUrl.createObjectURL (stream);

проверьте мой код

большое спасибо!

takeing_photo.html 

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <link href="{% static 'css/photo.css' %}" rel="stylesheet">
  </head>
  <body>

    <div class="booth">
      <video id="video" width="400" height="300"></video>
      <a href="#" id="capture" class="booth-capture-button">Take photo</a>
      <canvas id="canvas" width="400" height="300"></canvas>
      <img id="photo" src="http://placekitten.com/g/400/300" alt="photo of you">
    </div>
    <script src="{% static 'js/photo.js' %}"></script>
  </body>
</html>

photo.js 

(function(){
  var video = document.getElementById('video'),
      photo = document.getElementById('photo'),
      context = canvas.getContext('2d'),
      phto = document.getElementById('photo');
      vendorUrl = window.URL || window.webkitURL;

  navigator.getMedia = navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia;

  navigator.getMedia({
      video:true, 
      audio:false
  }, function(stream){
      video.src=vendorUrl.createObjectURL(stream);
      video.play();
  }, function(error){

  });
  document.getElementById('capture').addEventListener('click', function(){
      context.drawImage(video, 0, 0, 400, 300);
      photo.setAttribute('src', canvas.toDataURL('image/png'))
  });
})();

photo.css 

.booth{
  width:400px;
  background-color: #ccc;
  border:10px solid #ddd;
  margin:0 auto;
}

.booth-capture-button {
  display:block;
  margin:10px 0;
  padding:10px 20px;
  background-color: cornflowerblue;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

#canvas {
  display :none;
}

Я просто хочу, чтобы веб-камера правильно и имИнтересно, есть способ сохранить фотографии в папку, когда я нажимаю кнопку "Взять тебя"

Пожалуйста, дайте мне совет.Большое спасибо.

1 Ответ

0 голосов
/ 17 февраля 2019

Эта ошибка вызвана тем, что функция createObjectURL устарела.Вам необходимо обновить код, чтобы установить srcObject для объекта video напрямую. 

video.srcObject=stream;
...