• 12-05-2017, 04:05:43
    #1
    Merhaba arkadaşlar, js ile webcamden görüntü alıp çekilen fotografın url sini bir input içine nasıl aktarabilirim ?

    Biraz araştırdım ancak çözemedim. Yardımcı olursanız sevinirim.
  • 12-05-2017, 04:26:30
    #2
    https://w3c.github.io/mediacapture-m...usermedia.html

    <input type="file" accept="video/*;capture=camcorder">
    <input type="file" accept="audio/*;capture=microphone">
    
    <device type="media" onchange="update(this.data)"></device>
    <video autoplay></video>
      function update(stream) {
        document.querySelector('video').src = stream.url;
      }

    <video autoplay></video>
    <img src="">
    <canvas style="display:none;"></canvas>
    
    <script>
      var video = document.querySelector('video');
      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');
      var localMediaStream = null;
    
      function snapshot() {
        if (localMediaStream) {
          ctx.drawImage(video, 0, 0);
          // Chrome için webp döner
          // Diğerleri için png
          document.querySelector('img').src = canvas.toDataURL('image/webp');
        }
      }
    
      video.addEventListener('click', snapshot, false);
    
    
      navigator.getUserMedia({video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
      }, errorCallback);
    </script>
    Kontrol için

    function hasGetUserMedia() {
      return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }
    
    if (hasGetUserMedia()) {
     //  Bağlantı media bağlantısı destekleniyor
    } else {
      alert('Kullandığınız browser ne yazık ki kayıt aygıtlarını desteklemiyor');
    }
    İzin kontrol

    <script>
      var errorCallback = function(e) {
        console.log('Medya bağlantısına erişim izni vermediniz!', e);
      };
    
     
      navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
        var video = document.querySelector('video');
        video.src = window.URL.createObjectURL(localMediaStream);
    
        video.onloadedmetadata = function(e) {
         //Veri gelmeye başlıyor yalnız Chrome da bu event geçerli değil.
        };
      }, errorCallback);
    </script>
  • 12-05-2017, 04:54:08
    #3
    Hocam kodları bi sayfaya ekledim. İzin isteği geliyor kabul ediyorum. Webcam ışığı yanıyor ancak ekrana görüntü gelmiyor. Nedeni ne olabilir ?

    Caesar adlı üyeden alıntı: mesajı görüntüle
    https://w3c.github.io/mediacapture-m...usermedia.html

    <input type="file" accept="video/*;capture=camcorder">
    <input type="file" accept="audio/*;capture=microphone">
    
    <device type="media" onchange="update(this.data)"></device>
    <video autoplay></video>
      function update(stream) {
        document.querySelector('video').src = stream.url;
      }

    <video autoplay></video>
    <img src="">
    <canvas style="display:none;"></canvas>
    
    <script>
      var video = document.querySelector('video');
      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');
      var localMediaStream = null;
    
      function snapshot() {
        if (localMediaStream) {
          ctx.drawImage(video, 0, 0);
          // Chrome için webp döner
          // Diğerleri için png
          document.querySelector('img').src = canvas.toDataURL('image/webp');
        }
      }
    
      video.addEventListener('click', snapshot, false);
    
    
      navigator.getUserMedia({video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
      }, errorCallback);
    </script>
    Kontrol için

    function hasGetUserMedia() {
      return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }
    
    if (hasGetUserMedia()) {
     //  Bağlantı media bağlantısı destekleniyor
    } else {
      alert('Kullandığınız browser ne yazık ki kayıt aygıtlarını desteklemiyor');
    }
    İzin kontrol

    <script>
      var errorCallback = function(e) {
        console.log('Medya bağlantısına erişim izni vermediniz!', e);
      };
    
     
      navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
        var video = document.querySelector('video');
        video.src = window.URL.createObjectURL(localMediaStream);
    
        video.onloadedmetadata = function(e) {
         //Veri gelmeye başlıyor yalnız Chrome da bu event geçerli değil.
        };
      }, errorCallback);
    </script>
  • 12-05-2017, 05:02:59
    #4
    Sadece https sayfalarda yapabilirsin.