Снять фото с Webrtc ⇐ Html

[Anonymous]

На моем Chrome следующий код только открывает камеру и сразу же сбои, т. Е. Показать черный экран. Этот код отлично работает на Firefox. Почему?

Код: Выделить всё

(function() {
// The width and height of the captured photo. We will set the
// width to the value defined here, but the height will be
// calculated based on the aspect ratio of the input stream.

var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream

// |streaming| indicates whether or not we're currently streaming
// video from the camera. Obviously, we start at false.

var streaming = false;

// The various HTML elements we need to configure or control. These
// will be set by the startup() function.

var video = null;
var canvas = null;
var photo = null;
var startbutton = null;

function startup() {
video = document.getElementById('takephoto-video');
canvas = document.getElementById('takephoto-canvas');
photo = document.getElementById('takephoto-preview');
previewarea = document.getElementById('takephoto-previewarea');
startbutton = document.getElementById('takephoto-startbutton');
downloadbutton = document.getElementById('takephoto-download');

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

navigator.getMedia({
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);

video.addEventListener('canplay', function(ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);

// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.

if (isNaN(height)) {
height = width / (4 / 3);
}

video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);

startbutton.addEventListener('click', function(ev) {
takepicture();
ev.preventDefault();
}, false);

clearphoto();
}

// Fill the photo with an indication that none has been
// captured.

function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);

var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}

// Capture a photo by fetching the current contents of the video
// and drawing it into a canvas, then converting that to a PNG
// format data URL. By drawing it on an offscreen canvas and then
// drawing that to the screen, we can change its size and/or apply
// other changes before drawing it.

function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);

var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);

previewarea.classList.remove("hide");
downloadbutton.href = data;

} else {
clearphoto();
}
}

startup();
})();

выше код копируется из

https://mdn-samples.mozilla.org/s/webrtc-capturestill/

Подробнее здесь: https://stackoverflow.com/questions/341 ... ith-webrtc