Запись с веб-камеры в <img>

0

Используя javascript или Jquery, я хочу получить текущее изображение из фида веб-камеры на моей странице и поместить его в тег.

У меня есть немного скрипта, который генерирует теги динамически с уникальным идентификатором, поэтому после генерации одного, что я хочу сделать, это захват изображения с веб-камеры в этот момент и сохранение изображения в сгенерированном теге. После взятия изображения я просто хочу, чтобы веб-камера нести до следующего раза, когда требуется фотография.

У меня уже есть веб-камера, работающая с использованием библиотеки, которая отслеживает лица, однако я хочу расширить ее с помощью этой функции, чтобы создать галерею захваченных изображений на странице.

Библиотека, которую я использую, - ClmTracker

Создатель библиотеки предложил вызвать getImageData (x, y, w, h) на элементе видео, и я пробовал это. также пытались внедрить учебники, которые я видел на других сайтах, но безрезультатно. Казалось бы, ответ должен быть конкретным для моего кода. Я попытался использовать холст вместо тегов для размещения изображения, но я продолжал получать ошибки из-за их динамического создания в коде.

var vid = document.getElementById('videoel');
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');

/********** check and set up video/webcam **********/

function enablestart() {
    var startbutton = document.getElementById('startbutton');
    startbutton.value = "start";
    startbutton.disabled = null;
}


navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;

// check for camerasupport
if (navigator.getUserMedia) {
    // set up stream

    var videoSelector = {
        video: true
    };
    if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
        var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
        if (chromeVersion < 20) {
            videoSelector = "video";
        }
    };

    navigator.getUserMedia(videoSelector, function (stream) {
        if (vid.mozCaptureStream) {
            vid.mozSrcObject = stream;
        } else {
            vid.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
        }
        vid.play();
    }, function () {
        //insertAltVideo(vid);
        alert("There was some problem trying to fetch video from your webcam. If you have a webcam, please make sure to accept when the browser asks for access to your webcam.");
    });
} else {
    //insertAltVideo(vid);
    alert("This demo depends on getUserMedia, which your browser does not seem to support. :(");
}

vid.addEventListener('canplay', enablestart, false);

Как я могу захватить изображение с веб-камеры и поместить его в div, используя приведенный выше код в качестве основы?

Я не уверен, что могу дать более подробную информацию, поскольку у меня нет знаний о том, как это сделать.

Теги:

2 ответа

1
Лучший ответ

Сначала нарисуйте его на холсте:

var canvas = document.createElement('canvas');
canvas.height = video.height;
canvas.width = video.width;
canvas.getContext('2d').drawImage(video, 0, 0);

И теперь вы можете создать изображение:

var img = document.createElement('img');
img.src = canvas.toDataURL();
Поделиться
  • 0
    Вы хотели бы опубликовать рабочий пример, используя код, который я предоставил в качестве основы?
  • 0
    @DanW Моя video переменная ваша vid . И просто запустите код, когда захотите. Если вы предоставите рабочий пример своего кода, я добавлю этот код.
Показать ещё 4 комментария
0

Я не могу заставить себя работать с поршнем, но часть веб-камеры работает нормально, я буду обновляться по завершении.

JSFiddle

HTML

<div id="container">
    <video autoplay="true" id="videoElement">dsasd</video>
    <br>
    <button onclick="snap()">Screenshot</button>
    <canvas></canvas>
</div>

JS

var video = document.querySelector("#videoElement");

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

if (navigator.getUserMedia) {
    navigator.getUserMedia({
        video: true
    }, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // do something
}



        // Get handles on the video and canvas elements
        var video = document.querySelector('video');
        var canvas = document.querySelector('canvas');
        // Get a handle on the 2d context of the canvas element
        var context = canvas.getContext('2d');
        // Define some vars required later
        var w, h, ratio;

        // Add a listener to wait for the 'loadedmetadata' state so the video dimensions can be read
        video.addEventListener('loadedmetadata', function() {
            // Calculate the ratio of the video width to height
            ratio = video.videoWidth / video.videoHeight;
            // Define the required width as 100 pixels smaller than the actual video width
            w = video.videoWidth - 100;
            // Calculate the height based on the video width and the ratio
            h = parseInt(w / ratio, 10);
            // Set the canvas width and height to the values just calculated
            canvas.width = w;
            canvas.height = h;          
        }, false);

        // Takes a snapshot of the video
        function snap() {
            // Define the size of the rectangle that will be filled (basically the entire element)
            context.fillRect(0, 0, w, h);
            // Grab the image from the video
            context.drawImage(video, 0, 0, w, h);
        }

CSS

контейнер {

margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;

}

videoElement, canvas {

width: 500px;
height: 375px;
background-color: #666;

}

Поделиться
  • 0
    Хорошо, я подожду все это. Вы помещаете изображение в элемент canvas или в тег img?
  • 0
    Вам нужно сначала поместить их в тег cavas, а затем преобразовать, например: stackoverflow.com/questions/923885/…
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню