2013-09-04 11 views
26

MVC ASP.Net 4 HTML5 ile bir projede çalışıyorum (varsayılan tarayıcı google-chrome v29.0.1547.57) Bu araçlarla etkileşimde bulunabilir ve sadece ön kamerayla fotoğraf çekebilirim. Arka kamerayı nasıl etkinleştirebilirim? Tablet karakteristik: Samsung Galaxy Tab 2 Ben size Ardından kaynak seçmek ve onu geçebilirHTML5 ile arka kamerayı etkinleştir

MediaStreamTrack.getSources(gotSources); 

kullanarak kaynagi seçebilirsiniz nasıl gösterir https://simpl.info/getusermedia/sources/ beni

cevap

44

kontrol yardımcı olabilir umut getUserMedia içine isteğe bağlı yer

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

O

(V30 itibariyle) artık Kararlı Chrome ve mobil tamamen kullanılabilir
+0

Kinlan ben beta sürümünü (google chrome) denedik ve harika işler: ref

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(); }); 

, Umarım son sürümü bu tarayıcıyı güncellemek için yakında bu ipucu için teşekkürler. – raranibar

+3

GetSources'in artık kullanımdan kaldırıldığını unutmayın. https://www.chromestatus.com/feature/4765305641369600 – Brad

+0

Evet, bunu güncellemem gerek. – Kinlan

21

Bir demo https://webrtc.github.io/samples/src/content/devices/input-output/ adresinde bulunabilir. Bu hem ön hem de arka kameraya erişim sağlayacaktır. Eğer kaldırılmış işlevi güvenmek bulacaksınız

Birçok demoları:

MediaDevices.enumerateDevices() 

Örnek:

Chrome 45 ve Firefox 39 itibariyle

MediaStreamTrack.getSources() 

, sen işlevi kullanmak gerekecektir

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); 
 
    });

ayrıntılı belgeler burada bulunabilir: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

+0

Ayrıca, Chrome'un yalnızca https bağlantılarında kamerayı etkinleştirdiğinden de bahsetmeye değer. –

0
 //---------------------------------------------------------------------- 
     // 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)); 
+0

Merhaba Lightning2050 Ben çalıştım ama çalışmayan kaynak nasıl değiştirileceğini tam kodu alabilirsiniz! şimdiden teşekkürler –

+0

Hey! Şuna bir bakın: [link] (https: // stackoverflow.com/a/45130523/7197142) –

+0

@ Nahdiroviç Belki de bunun için herhangi bir html var mı? JS sadece benim için mobil kromda çalışmıyor. –

0

Son kez ben o kodu geliştirilen, soo burada i kullanmak sürümü: kodunuzda fonksiyon whichCamera doğrudan arayıp specefic hangi kamera "kullanıcı ", 'çevre' veya 'bilgisayar arka kamera ''' dan video çekmek için facingMode '= 'çevre' benim Samsung S8 Chrome'da bir bilgisayar koşuyoruz ise)

`//---------------------------------------------------------------------- 
// 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)); 

}