Хотя в Интернете есть много примеров того, как этого добиться, мы предложим вам повторную сборку, которая покрывает все потребности этого API (запуск, пауза, остановка и создание снимков, работающих на Android, Chrome и Firefox).
Следующий код работает в Google Chrome (Android и на рабочем столе) и Mozilla Firefox.
var _streamCopy = null; // If you want to stop the transmission see how this works in Stop Transmision
var button = document.getElementById('takePhoto');
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var video = document.getElementById('video');
var videoSettings = {
audio:false,
video:true
};
var onError = function(err){
console.log(err);
console.log(err.name);
};
// Start the camera when the DOM is ready
window.addEventListener("DOMContentLoaded",function(){
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
_streamCopy = stream;
video.src = stream;
video.play();
}, onError);
} else {
navigator.mozGetUserMedia(videoObj, function(stream){
_streamCopy = stream;
if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
};
video.play();
}, onError);
}
},false);
// when the button is clicked, draw the video on the canvas, get a base64 image an open it in a new window.
button.addEventListener('click',function(){
context.drawImage(video, 0, 0, 500, 500);
var image = canvas.toDataURL();
window.open(image);
},false);
// Pause transmission on click button
document.getElementById('stopTransmission').addEventListener('click',function(){
video.pause();
},false);
document.getElementById('resumeTransmission').addEventListener('click',function(){
video.play();
},false);
Примечание. Помните, что вам нужно запустить предыдущий пример из соединения http или https, иначе API getUserMedia будет недоступен в файле file: // protocol.
Обрабатывать ошибки
Это все доступные коды ошибок в API getUserMedia, измените событие onError предыдущего кода на следующее:
var onError = function(err){
switch(err.name){
case 'PermissionDeniedError':
alert("Permission to use a media device was denied by the user or the system.");
break;
case 'NotFoundError':
alert('No media tracks of the type specified were found that satisfy the constraints specified.');
break;
default:
alert("An unknown error just happened ! :(");
break;
}
};Остановить передачу
Если вы хотите динамически остановить передачу, мы будем использовать следующий код:
// _streamCopy is declared in the first example ()
try{
_streamCopy.stop(); // if this method doesn't exist, the catch will be executed.
}catch(e){
_streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream
}
Только добавьте кнопку и прослушиватель событий и выполните код. Не забудьте скопировать переменную потока, которая генерируется в методе getUserMedia.
Повеселись !
