如何通過html5訪問手機上的特定相機

當我使用html5'getUserMedia'API訪問android（4.0）手機上的相機時，它會出現「前置相機」，但我想打開「後置相機」。示例代碼：如何通過html5訪問手機上的特定相機

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Html5 Mobile Carema</title> 
    <script src="js/jquery.js"></script> 
    <script> 
     $(document).ready(init); 

     function init() { 
     try { 
     window.URL = window.URL || window.webkitURL || window.msURL 
       || window.oURL; 
     navigator.getUserMedia = navigator.getUserMedia 
       || navigator.webkitGetUserMedia 
       || navigator.mozGetUserMedia ||   navigator.msGetUserMedia; 


     navigator.getUserMedia({ 
      video : true 
     }, successsCallback, errorCallback); 
    } catch (err) { 
     // Tries it with old spec of string syntax 
     navigator.getUserMedia('video', successsCallback, errorCallback); 
    } 
    $(":button").click(function() { 
     slap(); 
    }); 
} 
function slap() { 
    var video = $("#myVideo")[0]; 
    var canvas = capture(video); 
    $("#result").empty(); 
    $("#result").append(canvas); 
    //alert(); 
    var imgData = canvas.toDataURL('image/png；base64,'); 
    //var imgData = canvas.toDataURL("image/png"); 
    var imgData = imgData.substring(22); 
    //blb = dataURItoBlob(imgData); 
    //sendMsg(blb); 
} 
function errorCallback(err) { 

} 
function successsCallback(stream) { 
    $("#myVideo").attr("src", window.webkitURL.createObjectURL(stream)); 
} 
function capture(video) { 
    var canvas = document.createElement('canvas'); 
    var width = video.videoWidth; 
    var height = video.videoHeight; 
    canvas.width = video.videoWidth; 
    canvas.height = video.videoHeight; 
    var context = canvas.getContext('2d'); 
    context.drawImage(video, 0, 0, 160, 120); 
    return canvas; 
} 

    </script> 
</head> 
<body> 
    <video id="myVideo" autoplay="autoplay"></video> 
    <br> <input type="button" value="capture" /> 
<br><div id="result" style="width: 145px"></div> 
<div> 
<p id="resultMsg" style="color: red"></p> 
<p id="decodeTime" style="color: green"></p> 
</div> 

</body> 
</html>

我不知道如何訪問android手機上的特定相機，誰知道？感謝

來源

2013-05-29 user2412803

對碼功能gotSources(sourceInfos)這是一個很大的問題 –

見下文

<!-- 
Based on Motion Detector Demo Created by Ákos Nikházy. 
If you use this app please link this demo http://motion-detector.nikhazy-dizajn.hu/ 
--> 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Frame capture demo</title> 

</head> 
<body> 
    <header> 
     <h1>Motion Detection</h1> 
     <h4>with HTML5 API using .getUserMedia()</h4> 
    </header> 

    <video autoplay></video> 
    <hr> 
    <canvas id="savePhoto"></canvas> 
    <script> 




    function hasGetUserMedia() { 
     //returns true if supported 
     return !!(navigator.getUserMedia || navigator.webkitGetUserMedia 
       || navigator.mozGetUserMedia || navigator.msGetUserMedia); 
    } 

    function onSuccess(stream) { 
     //If we can stream from camera. 
     var source; 

     //Get the stream. This goes to the video tag 
     if (window.URL) { 
      source = window.URL.createObjectURL(stream); 
     } else if (window.webkitURL) { 
      source = window.webkitURL.createObjectURL(stream); 
     } else { 
      source = stream; // Opera and Firefox 
     } 

     //Set up video tag 
     video.autoplay = true; 
     video.src = source; 

     //We try to find motion in every X second 
     setInterval(function() { 
      motionDetector(); 
     }, sampling); 

    } 

    function onError() { 
     //if we fail (not supported, no camera etc.) 
     alert('No stream, no win. Refresh.'); 
    } 

    function saveImage(canvasToSave) { 
     //create image from canvas 
     dataUrl = canvasToSave.toDataURL(); 
     imageFound = document.createElement('img'); 
     imageFound.src = dataUrl; 

     document.body.appendChild(imageFound); 
    } 

    function motionDetector() { 
     ctxSave.drawImage(video, 0, 0, savePhoto.width, savePhoto.height); 
    } 

    /*After all those functions lets start setting up the program*/ 

    //Set up elements. Should be a ini() but I don't care right now 
    var video = document.querySelector('video'); //the video tag 
    var savePhoto = document.getElementById('savePhoto'); //the possible saved image's canvas 

    var ctxSave = savePhoto.getContext('2d'); //the latest image from video in full size and color 

    var sampling = 1000; //how much time needed between samples in milliseconds 

    var videoSourceInfo = null; 

    //We need this so we can use the videoWidth and ...Height, also we setup canvas sizes here, after we have video data 
    video.addEventListener("loadedmetadata", function() { 
     console.log(video.videoWidth + ":" + video.videoHeight) 
     savePhoto.width = video.videoWidth; 
     savePhoto.height = video.videoHeight; 
    }); 




    function start() {  //Start the whole magic 
     if (hasGetUserMedia()) { 


      //it is working? 
      navigator.getUserMedia 
        || (navigator.getUserMedia = navigator.mozGetUserMedia 
          || navigator.webkitGetUserMedia 
          || navigator.msGetUserMedia); 


      var videoSourceInfoId = videoSourceInfo.id; 
      var constraints = { 
       video : { 
        optional: [{sourceId: videoSourceInfoId}] 
       }, 
       toString : function() { 
        return "video"; 
       } 
      }; 


      navigator.getUserMedia(constraints, onSuccess, onError); 
     } else { 
      //no support 
      alert('getUserMedia() is not supported in your browser. Try Chrome.'); 
     } 
    } 

    function gotSources(sourceInfos) { 
     for (var i = sourceInfos.length-1 ; i >= 0; i--) { // get last camera index (supposed to back camera) 
      var sourceInfo = sourceInfos[i]; 
      if (sourceInfo.kind === 'video') { 
       videoSourceInfo = sourceInfo; 
       console.log('SourceId: ', videoSourceInfo.id); 
       start(); 
       break; 
      } else { 
       console.log('Some other kind of source: ', sourceInfo); 
      } 
     } 
    } 

    if (typeof MediaStreamTrack === 'undefined') { 
     alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.'); 
    } else { 
     MediaStreamTrack.getSources(gotSources); // async task 
    } 


</script> 

</body> 
</html>

來源

2015-11-04 15:56:37

現在有最新規範指定相機與facingMode特性的能力：http://www.w3.org/TR/mediacapture-streams/#idl-def-VideoFacingModeEnum

此屬性是MediaStreamConstraints對象，它是getUserMedia方法的第一個參數的可選部分。

下面是來自規範的簡化示例：

var supports = navigator.mediaDevices.getSupportedConstraints(); 
if (!supports["facingMode"]) { 
    // Handle lack of browser support if necessary 
} 
var gotten = navigator.mediaDevices.getUserMedia({ 
    video: { 
    facingMode: {exact: "environment"} 
    } 
});

值environment意味着設備的後攝像機。其他值爲user，left和right。

請注意，對此的支持因瀏覽器/瀏覽器版本而異。

來源

2015-07-27 03:42:55 tagawa

如何通過html5訪問手機上的特定相機

回答

相關問題