Pesquisar na Comunidade

Olá pessoal, tudo certo?! Estou com um código que está funcionando bem. Mas gostaria de que a câmera traseira do celular fosse a padrão. Abaixo segue o código, caso possam me ajudar a efetuar esta alteração. Desde já, agradeço! (function () { var video = document.querySelector('video'); var pictureWidth = 640; var pictureHeight = 360; var fxCanvas = null; var texture = null; function checkRequirements() { var deferred = new $.Deferred(); //Check if getUserMedia is available if (!Modernizr.getusermedia) { deferred.reject('Your browser doesn\'t support getUserMedia (according to Modernizr).'); } //Check if WebGL is available if (Modernizr.webgl) { try { //setup glfx.js fxCanvas = fx.canvas(); } catch (e) { deferred.reject('Sorry, glfx.js failed to initialize. WebGL issues?'); } } else { deferred.reject('Your browser doesn\'t support WebGL (according to Modernizr).'); } deferred.resolve(); return deferred.promise(); } function searchForRearCamera() { var deferred = new $.Deferred(); //MediaStreamTrack.getSources seams to be supported only by Chrome if (MediaStreamTrack && MediaStreamTrack.getSources) { MediaStreamTrack.getSources(function (sources) { var rearCameraIds = sources.filter(function (source) { return (source.kind === 'video' && source.facing === 'environment'); }).map(function (source) { return source.id; }); if (rearCameraIds.length) { deferred.resolve(rearCameraIds[0]); } else { deferred.resolve(null); } }); } else { deferred.resolve(null); } return deferred.promise(); } function setupVideo(rearCameraId) { var deferred = new $.Deferred(); var videoSettings = { video: { optional: [ { width: { min: pictureWidth } }, { height: { min: pictureHeight } } ] } }; //if rear camera is available - use it if (rearCameraId) { videoSettings.video.optional.push({ sourceId: rearCameraId }); } navigator.mediaDevices.getUserMedia(videoSettings) .then(function (stream) { //Setup the video stream video.srcObject = stream; video.addEventListener("loadedmetadata", function (e) { //get video width and height as it might be different than we requested pictureWidth = this.videoWidth; pictureHeight = this.videoHeight; if (!pictureWidth && !pictureHeight) { //firefox fails to deliver info about video size on time (issue #926753), we have to wait var waitingForSize = setInterval(function () { if (video.videoWidth && video.videoHeight) { pictureWidth = video.videoWidth; pictureHeight = video.videoHeight; clearInterval(waitingForSize); deferred.resolve(); } }, 100); } else { deferred.resolve(); } }, false); }).catch(function () { deferred.reject('There is no access to your camera, have you denied it?'); }); return deferred.promise(); } function step1() { checkRequirements() .then(searchForRearCamera) .then(setupVideo) .done(function () { //Enable the 'take picture' button $('#takePicture').removeAttr('disabled'); //Hide the 'enable the camera' info $('#step1 figure').removeClass('not-ready'); }) .fail(function (error) { showError(error); }); } function step2() { var canvas = document.querySelector('#step2 canvas'); var img = document.querySelector('#step2 img'); //setup canvas canvas.width = pictureWidth; canvas.height = pictureHeight; var ctx = canvas.getContext('2d'); //draw picture from video on canvas ctx.drawImage(video, 0, 0); //modify the picture using glfx.js filters texture = fxCanvas.texture(canvas); fxCanvas.draw(texture) .hueSaturation(-1, -1)//grayscale .unsharpMask(20, 2) .brightnessContrast(0.2, 0.9) .update(); window.texture = texture; window.fxCanvas = fxCanvas; $(img) //setup the crop utility .one('load', function () { if (!$(img).data().Jcrop) { $(img).Jcrop({ onSelect: function () { //Enable the 'done' button $('#adjust').removeAttr('disabled'); } }); } else { //update crop tool (it creates copies of <img> that we have to update manually) $('.jcrop-holder img').attr('src', fxCanvas.toDataURL()); } }) //show output from glfx.js .attr('src', fxCanvas.toDataURL()); } function step3() { var canvas = document.querySelector('#step3 canvas'); var step2Image = document.querySelector('#step2 img'); var cropData = $(step2Image).data().Jcrop.tellSelect(); var scale = step2Image.width / $(step2Image).width(); //draw cropped image on the canvas canvas.width = cropData.w * scale; canvas.height = cropData.h * scale; var ctx = canvas.getContext('2d'); ctx.drawImage( step2Image, cropData.x * scale, cropData.y * scale, cropData.w * scale, cropData.h * scale, 0, 0, cropData.w * scale, cropData.h * scale); var spinner = $('.spinner'); spinner.show(); $('blockquote p').text(''); $('blockquote footer').text(''); // do the OCR! Tesseract.recognize(ctx).then(function (result) { var resultText = result.text ? result.text.trim() : ''; //show the result spinner.hide(); $('blockquote p').html('&bdquo;' + resultText + '&ldquo;'); $('blockquote footer').text('(' + resultText.length + ' characters)'); }); } /********************************* * UI Stuff *********************************/ //start step1 immediately step1(); $('.help').popover(); function changeStep(step) { if (step === 1) { video.play(); } else { video.pause(); } $('body').attr('class', 'step' + step); $('.nav li.active').removeClass('active'); $('.nav li:eq(' + (step - 1) + ')').removeClass('disabled').addClass('active'); } function showError(text) { $('.alert').show().find('span').text(text); } //handle brightness/contrast change $('#brightness, #contrast').on('change', function () { var brightness = $('#brightness').val() / 100; var contrast = $('#contrast').val() / 100; var img = document.querySelector('#step2 img'); fxCanvas.draw(texture) .hueSaturation(-1, -1) .unsharpMask(20, 2) .brightnessContrast(brightness, contrast) .update(); img.src = fxCanvas.toDataURL(); //update crop tool (it creates copies of <img> that we have to update manually) $('.jcrop-holder img').attr('src', fxCanvas.toDataURL()); }); $('#takePicture').click(function () { step2(); changeStep(2); }); $('#adjust').click(function () { step3(); changeStep(3); }); $('#go-back').click(function () { changeStep(2); }); $('#start-over').click(function () { changeStep(1); }); $('.nav').on('click', 'a', function () { if (!$(this).parent().is('.disabled')) { var step = $(this).data('step'); changeStep(step); } return false; }); })();

Boa tarde iMasters! Sou novo aqui no fórum! Estou precisando de uma ajuda para acessar imagem de uma Câmera IP! Usando o seguinte código está dando erro! ----- document.getElementById('img_camera').src = 'http://root:pass@192.168.15.119/mjpg/video.mjpg'; ----- Erro Apresentado no Console do Chrome: Subresource requests whose URLs contain embedded credentials... Obs.: Preciso passar usuário e senha! Agora se mando abrir uma nova janela com a mesma URL, dá certo... Mas preciso abrir a imagem em um campo!!! ----- window.open ('http://root:pass@192.168.15.119/mjpg/video.mjpg', '_self' , 'width = 320, height = 240'); ----- Agradeço desde já a todos! Abraço!