Абярыце камеру, выкарыстоўваючы navigate.getUserMedia ()

Я выкарыстоўваю метад navigate.getUserMedia() для захопу відэа на маім мабільным і зрабіць наступную апрацоўку на ім. Але цяпер яна захоплівае відэа з дапамогай пярэдняй камеры. Як я магу зрабіць гэта, каб атрымаць доступ да задняй панэлі камеры ??

Ніжэй прыведзены прыклад кода, які я выкарыстоўваю ў маім дадатку:

  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
  if (navigator.getUserMedia){
    navigator.getUserMedia({video: true}, successCallback, errorCallback);

Загадзя дзякую

10
Я думаю, што гэтае пытанне з'яўляецца занадта агульным, гэта можа залежаць ад пастаўшчыка, праграмнага забеспячэння і мадэлі прылады.
дададзена аўтар cerkiewny, крыніца
Але гэты код працуе на розных платформах, .. праблема ў тым, што ён звяртаецца да пярэдняй камеры, так што можа быць нейкі спосаб, якім мы можам вызначыць яго адкрыць заднюю камеру, .. ці атрымаць ўсплывальнае меню даступных камер і дазваляюць карыстачу выбіраць з яго. ,
дададзена аўтар Vinay C, крыніца

8 адказы

У гэтым прыкладзе на simpl.info дэманструе выкарыстанне MediaStreamTrack.getSources , каб выбраць з некалькіх крыніц відэа.

https://simpl.info/getusermedia/sources/

Я магу пацвердзіць, што гэта працуе ў Chrome 32.

16
дададзена
Гэта павінна быць правільны адказ. Пакуль не рэалізаваная на ўсіх прыладах, я магу пацвердзіць гэта працуе ў хром на Android не ў звычайным браўзэры, хоць на маім GS2 (я ведаю яго стары). Doesnt праца ў ios7, але я буду адчуваць гэтае на ios8 бэта 3, як толькі я атрымліваю ў офіс у панядзелак.
дададзена аўтар John S, крыніца

У гэтым прыкладзе на simpl.info дэманструе выкарыстанне MediaStreamTrack.getSources , каб выбраць з некалькіх крыніц відэа.

https://simpl.info/getusermedia/sources/

Я магу пацвердзіць, што гэта працуе ў Chrome 32.

16
дададзена
Гэта павінна быць правільны адказ. Пакуль не рэалізаваная на ўсіх прыладах, я магу пацвердзіць гэта працуе ў хром на Android не ў звычайным браўзэры, хоць на маім GS2 (я ведаю яго стары). Doesnt праца ў ios7, але я буду адчуваць гэтае на ios8 бэта 3, як толькі я атрымліваю ў офіс у панядзелак.
дададзена аўтар John S, крыніца

Вы можаце выкарыстоўваць facingMode , каб выбраць «карыстач» або «асяроддзе» для пярэдняй або задняй камеры адпаведна. Не ўпэўнены, што падтрымка браўзэра, але ён працуе на Android Chrome 58.

выкарыстанне

navigator.getвыкарыстаннеrMedia({video: { facingMode: { exact: "environment" } } },
successCallback, errorCallback);

або, каб запасны варыянт нейкай іншай камеры

navigator.getвыкарыстаннеrMedia({video: { facingMode: "environment" } },
successCallback, errorCallback);

замест

navigator.getвыкарыстаннеrMedia({video: true}, successCallback, errorCallback);

From https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getвыкарыстаннеrMedia

5
дададзена
прэстыжнасць гэтага адказу! аднак ён будзе працаваць у крос-платформавай
дададзена аўтар Mr. Pyramid, крыніца

Вы можаце выкарыстоўваць facingMode , каб выбраць «карыстач» або «асяроддзе» для пярэдняй або задняй камеры адпаведна. Не ўпэўнены, што падтрымка браўзэра, але ён працуе на Android Chrome 58.

выкарыстанне

navigator.getвыкарыстаннеrMedia({video: { facingMode: { exact: "environment" } } },
successCallback, errorCallback);

або, каб запасны варыянт нейкай іншай камеры

navigator.getвыкарыстаннеrMedia({video: { facingMode: "environment" } },
successCallback, errorCallback);

замест

navigator.getвыкарыстаннеrMedia({video: true}, successCallback, errorCallback);

From https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getвыкарыстаннеrMedia

5
дададзена
прэстыжнасць гэтага адказу! аднак ён будзе працаваць у крос-платформавай
дададзена аўтар Mr. Pyramid, крыніца
        //----------------------------------------------------------------------
       // 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));
3
дададзена
гэта будзе лепшы адказ, калі вы ахарактарызавалі свой код там!
дададзена аўтар Deep, крыніца
Калі ласка, зменіце адказ!
дададзена аўтар Deep, крыніца
Я збіраюся растлумачыць некаторыя лініі тут. <�Б> videoDevices : просты масіў, які будзе ўтрымліваць ідэнтыфікатар аб Вайя і заднюю камеру. <�Б> devices.forEach : пералічыць усе мультымедыйныя прылады (відэа і аўдыё). Калі а <�Ь> device.kind == «видеоввода» , яго сярэдняе гэта відэа мультымедыйнае прылада, мы захоўваем ідэнтыфікатары ўсіх відэа прылад у папярэднім масіве videoDevices . <�Б> вар контрсилы змяшчае дазвол відэа і камеры, якія мы хацелі б пачаць. <�Б> videoDevices [1] = задняя камера і <�б> videoDevices [0] = пярэдняя камера . Чым мы пераходзім абмежаванне на <�б> GetUserMedia <�б /> функцыі.
дададзена аўтар shadowoviç, крыніца
        //----------------------------------------------------------------------
       // 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));
3
дададзена
гэта будзе лепшы адказ, калі вы ахарактарызавалі свой код там!
дададзена аўтар Deep, крыніца
Калі ласка, зменіце адказ!
дададзена аўтар Deep, крыніца
Я збіраюся растлумачыць некаторыя лініі тут. <�Б> videoDevices : просты масіў, які будзе ўтрымліваць ідэнтыфікатар аб Вайя і заднюю камеру. <�Б> devices.forEach : пералічыць усе мультымедыйныя прылады (відэа і аўдыё). Калі а <�Ь> device.kind == «видеоввода» , яго сярэдняе гэта відэа мультымедыйнае прылада, мы захоўваем ідэнтыфікатары ўсіх відэа прылад у папярэднім масіве videoDevices . <�Б> вар контрсилы змяшчае дазвол відэа і камеры, якія мы хацелі б пачаць. <�Б> videoDevices [1] = задняя камера і <�б> videoDevices [0] = пярэдняя камера . Чым мы пераходзім абмежаванне на <�б> GetUserMedia <�б /> функцыі.
дададзена аўтар shadowoviç, крыніца

См гэтага для атрымання дадатковай інфармацыі.

<�Р> Якія камеры выкарыстоўваецца пакідаецца прылада: «агенты карыстальніка   рэкамендуецца выкарыстоўваць па змаўчанні асноўны або сістэмы па змаўчанні карыстальніка   камера і/або мікрафон (у залежнасці ад абставін) для стварэння сродкаў масавай інфармацыі   Паток ". </Р>

Пытанне, які вы можаце спытаць, як вы можаце змяніць камеру па змаўчанні. Але, як я ўжо згадваў у раздзеле каментароў гэта адрознівацца ў залежнасці ад аперацыйнай сістэмы прылады, які выкарыстоўваецца, пастаўшчыка або нават мадэлі, і можа быць вялікай праблемай.

EDIT (паляпшэнне які абслугоўваецца адказу на аснове пазней адзін):

Калі ласка, глядзіце гэты блог для таго, як змяніць крыніца камеры:

https://www.html5rocks.com/en/tutorials/getusermedia/intro/ </а>

1
дададзена

См гэтага для атрымання дадатковай інфармацыі.

<�Р> Якія камеры выкарыстоўваецца пакідаецца прылада: «агенты карыстальніка   рэкамендуецца выкарыстоўваць па змаўчанні асноўны або сістэмы па змаўчанні карыстальніка   камера і/або мікрафон (у залежнасці ад абставін) для стварэння сродкаў масавай інфармацыі   Паток ". </Р>

Пытанне, які вы можаце спытаць, як вы можаце змяніць камеру па змаўчанні. Але, як я ўжо згадваў у раздзеле каментароў гэта адрознівацца ў залежнасці ад аперацыйнай сістэмы прылады, які выкарыстоўваецца, пастаўшчыка або нават мадэлі, і можа быць вялікай праблемай.

EDIT (паляпшэнне які абслугоўваецца адказу на аснове пазней адзін):

Калі ласка, глядзіце гэты блог для таго, як змяніць крыніца камеры:

https://www.html5rocks.com/en/tutorials/getusermedia/intro/ </а>

1
дададзена