1
我有一個插件，在這裏我使用筆記本電腦或手機上的網絡攝像頭捕獲圖片，然後將其放置在畫布上。所有這些在Chrome中運行良好，但是在使用Firefox時，它不起作用。我懷疑它的navigator.getUserMedia導致在Firefox中的問題，因爲它已被棄用。使用網絡攝像頭捕獲配置文件圖片，並在畫布上顯示圖片
鏈接：https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia
而谷歌開發者建議使用navigator.getUserMedia的，它也與我的應用程序兼容。
鏈接：https://developers.google.com/web/updates/2015/10/media-devices
所以，請不要認爲什麼樣的變化，應在下面的代碼來完成爲它工作在Firefox。
在此先感謝。
<script type="text/javascript">
var ctx = null;
var canvas = document.getElementById("tmpImage");
var localMediaStream = null;
var video = document.querySelector('video');
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
var img = document.getElementById('CaptureImage');
// "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
img.src = canvas.toDataURL('image/webp');
}
}
function hasGetUserMedia() {
// Note: Opera builds are unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
function onFailSoHard(e) {
if (e.code == 1) {
alert('User denied access to their camera');
} else {
alert('getUserMedia() not supported in your browser.');
}
}
function start() {
if (hasGetUserMedia()) {
if (navigator.webkitGetUserMedia)
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
//var getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
//var gumOptions = { video: true, toString: function() { return 'video'; } };
if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true,
audio: false
}, function (stream) {
if (navigator.webkitGetUserMedia) {
video.src = window.webkitURL.createObjectURL(stream);
} else {
video.src = stream; // Opera
}
localMediaStream = stream;
}, onFailSoHard);
} else {
video.src = 'somevideo.webm'; // fallback.
}
}
}
function stop() {
video.pause();
video = document.getElementById('sourcevid');
video.src = "";
localMediaStream.stop();
}
function ResizeCanvas() {
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
}
$(document).ready(function() {
ctx = canvas.getContext('2d');
});