Question

下面是我用来设置下拉列表最后一项要选择的代码，但由于某种原因，该值仍然是第一个值，有人可以帮助我。这是一个允许用户在给予浏览器许可的情况下打开后置摄像头的应用程序。问题是，虽然下拉列表是说摄像头2它仍然打开摄像头1.我认为问题是值没有改变

<body>
 <div class='select'>
<label for='videoSource'>Video source: </label><select id='videoSource'></select>
 </div>
  <video muted autoplay style="width:100%; height:auto"></video>

</body>
</html>
<script type="text/javascript">
 var videoElement = document.querySelector("video");
 var videoSelect = document.querySelector("select#videoSource");
 navigator.getUserMedia = navigator.getUserMedia ||
 navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

 function gotSources(sourceInfos) {
    for (var i = 0; i != sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i];
         var option = document.createElement("option");
          option.value = sourceInfo.id;
         if (sourceInfo.kind === 'video') {
           option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
           videoSelect.appendChild(option);
              if( i == sourceInfos.length - 1 ) {
              option.selected = true;
               }
        } 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);
   } 


   function successCallback(stream) {
    window.stream = stream; // make stream available to console
    videoElement.src = window.URL.createObjectURL(stream);
    videoElement.play();
   }

   function errorCallback(error) {
    console.log("navigator.getUserMedia error: ", error);
   }

    function start() {
    if (!!window.stream) {
        videoElement.src = null;
        window.stream.stop();
    }

    var videoSource = videoSelect.value;

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


    videoSelect.onchange = start;

    start();
    </script>

将最后一项设置下拉到选中但值不会更改

0 个答案: