Bật camera sau với HTML5

Question

Tôi đang làm việc trên một dự án với MVC ASP.Net 4 HTML5 (trình duyệt mặc định là google-chrome v29.0.1547.57) Tôi có thể tương tác với các công cụ này và chụp ảnh nhưng chỉ với camera trước, Làm thế nào tôi có thể kích hoạt camera sau? các đặc trưng của Tablet: Samsung Galaxy Tab 2 Tôi hy vọng bạn có thể giúp tôi

Answer 1

Check-out https://simpl.info/getusermedia/sources/ cho thấy làm thế nào bạn có thể chọn nguồn sử dụng

MediaStreamTrack.getSources(gotSources); 

Sau đó bạn có thể chọn nguồn và vượt qua nó trong khi tùy chọn vào getUserMedia

var constraints = { 
    audio: { 
    optional: [{sourceId: audioSource}] 
    }, 
    video: { 
    optional: [{sourceId: videoSource}] 
    } 
}; 
navigator.getUserMedia(constraints, successCallback, errorCallback); 

Nó bây giờ là hoàn toàn có sẵn trong Chrome Stable và điện thoại di động (Tính đến v30)

Answer 2

Bản trình diễn có thể được tìm thấy tại https://webrtc.github.io/samples/src/content/devices/input-output/. Điều này sẽ cho phép truy cập vào cả camera phía trước và phía sau.

Nhiều demo mà bạn sẽ tìm thấy dựa trên chức năng chấp nhận:

MediaStreamTrack.getSources() 

Tính đến phiên bản Chrome 45 và FireFox 39, bạn sẽ cần phải sử dụng các chức năng:

MediaDevices.enumerateDevices() 

Ví dụ:

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { 
 
    console.log("enumerateDevices() not supported."); 
 
    return; 
 
} 
 

 
// List cameras and microphones. 
 

 
navigator.mediaDevices.enumerateDevices() 
 
    .then(function(devices) { 
 
    devices.forEach(function(device) { 
 
     console.log(device.kind + ": " + device.label + 
 
     " id = " + device.deviceId); 
 
    }); 
 
    }) 
 
    .catch(function(err) { 
 
    console.log(err.name + ": " + error.message); 
 
    });

tài liệu hơn nữa có thể được tìm thấy ở đây: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

Answer 3

 //---------------------------------------------------------------------- 
     // Here we list all media devices, in order to choose between 
     // the front and the back camera. 
     //  videoDevices[0] : Front Camera 
     //  videoDevices[1] : Back Camera 
     // I used an array to save the devices ID 
     // which i get using devices.forEach() 
     // Then set the video resolution. 
     //---------------------------------------------------------------------- 
     navigator.mediaDevices.enumerateDevices() 
     .then(devices => { 
      var videoDevices = [0,0]; 
      var videoDeviceIndex = 0; 
      devices.forEach(function(device) { 
      console.log(device.kind + ": " + device.label + 
       " id = " + device.deviceId); 
      if (device.kind == "videoinput") { 
       videoDevices[videoDeviceIndex++] = device.deviceId;  
      } 
      }); 


      var constraints = {width: { min: 1024, ideal: 1280, max: 1920 }, 
      height: { min: 776, ideal: 720, max: 1080 }, 
      deviceId: { exact: videoDevices[1] } 
     }; 
     return navigator.mediaDevices.getUserMedia({ video: constraints }); 

     }) 
     .then(stream => { 
      if (window.webkitURL) { 
      video.src = window.webkitURL.createObjectURL(stream); 
      localMediaStream = stream; 
      } else if (video.mozSrcObject !== undefined) { 
      video.mozSrcObject = stream; 
      } else if (video.srcObject !== undefined) { 
      video.srcObject = stream; 
      } else { 
      video.src = stream; 
      }}) 
     .catch(e => console.error(e)); 

Answer 4

Thời gian qua tôi developped mã, soo đây là phiên bản mà tôi sử dụng: bạn gọi trực tiếp các chức năng whichCamera trong mã của bạn và bạn specefic mà camera "người dùng ", 'môi trường' hay 'máy tính'" nếu bạn đang runing trong một máy tính)

`//---------------------------------------------------------------------- 
// whichCamera(Type) 
// For smartphone or tablet : 
//  Start the type={user,environment} camera. 
// For computer it's simple : 
//  type = "computer". 
//---------------------------------------------------------------------- 
var streamSrc, cameraType; 
function whichCamera(type){ 

    var cameraFacing; 
    cameraType = type; 
    if(type == "user") 
    cameraFacing = 0; 
    else if(type == "environment") 
    cameraFacing = 1; 
    else if(type == "computer"){ 
    cameraFacing = 2; 
    } 
    console.log(type+" index : "+cameraFacing); 

    // Here we list all media devices, in order to choose between 
    // the front and the rear camera. 
    //  videoDevices[0] : user Camera 
    //  videoDevices[1] : environment Camera 
    // Then set the video resolution. 
    navigator.mediaDevices.enumerateDevices() 
    .then(devices => { 
    var videoDevices, videoDeviceIndex, constraints; 
    // Initialize the array wich will contain all video resources IDs. 
    // Most of devices have two video resources (Front & Rear Camera). 
    videoDevices = [0,0]; 
    // Simple index to browse the videa resources array (videoDevices). 
    videoDeviceIndex = 0; 
    // devices.forEach(), this function will detect all media resources (Audio, Video) of the device 
    // where we run the application. 
    devices.forEach(function(device) { 
     console.log(device.kind + ": " + device.label + 
     " id = " + device.deviceId); 
     // If the kind of the media resource is video, 
     if (device.kind == "videoinput") { 
     // then we save it on the array videoDevices. 
     videoDevices[videoDeviceIndex++] = device.deviceId; 
     console.log(device.deviceId+" = "+videoDevices[videoDeviceIndex-1]); 
     } 
    }); 
    console.log("Camera facing ="+cameraFacing+" ID = "+videoDevices[videoDeviceIndex-1]); 

    // Here we specified which camera we start, 
    // videoDevices[0] : Front Camera 
    // videoDevices[1] : Back Camera 
    if(cameraFacing != "computer"){ 
     constraints = { deviceId: { exact: videoDevices[cameraFacing] }}; 
     return navigator.mediaDevices.getUserMedia({ video: 
                  constraints, 
                  width: { min: 1280, ideal: 1600, max: 1920 }, 
                  height: { min: 720, ideal: 1200, max: 1080 } 
                } 
               ); 
    }else 
     return navigator.mediaDevices.getUserMedia({ video: true }); 
    }) 
    // Then we retrieve the link to the video stream. 
    .then(stream => { 
     if (window.webkitURL) { 
     video.src = window.webkitURL.createObjectURL(stream); 
     localMediaStream = stream; 
     console.log(localMediaStream +" = "+ stream) 
     } else if (video.mozSrcObject !== undefined) { 
     video.mozSrcObject = stream; 
     console.log(video.mozSrcObject +" = "+ stream) 
     } else if (video.srcObject !== undefined) { 
     video.srcObject = stream; 
     console.log(video.srcObject +" = "+ stream) 
     } else { 
     video.src = stream; 
     console.log(video.src +" = "+ stream) 
     } 
     streamSrc = stream; 
    }) 
    .catch(e => console.error(e)); 

} 

Answer 5

trong Chrome trên Samsung S8 của tôi, tôi có thể sử dụng 'facingMode' = 'môi trường' để lấy video từ 'máy ảnh phía sau' . Giá trị mặc định có vẻ là "user" (các 'trước' máy ảnh)

trong nguyên cảo:

const video = document.getElementById("video"); 
    const constraints = { 
     advanced: [{ 
      facingMode: "environment" 
     }] 
    }; 
    navigator.mediaDevices 
     .getUserMedia({ 
      video: constraints 
     }) 
     .then((stream) => { 
      video.src = window.URL.createObjectURL(stream); 
      video.play(); 
     }); 

ref: MediaTrackConstraints/facingMode