javascript - select web camera on google chrome - Stack Overflow

admin管理员组

文章数量:1356017

When you have multiple web cameras.

You can select web camera on the chrome , setting -> contents -> media

But,I would like to select camera from script.

How can I select camera by Html5 or javascript?

When you have multiple web cameras.

You can select web camera on the chrome , setting -> contents -> media

But,I would like to select camera from script.

How can I select camera by Html5 or javascript?

• javascript
• html
• google-chrome

Share Improve this question Follow asked May 17, 2013 at 7:04 whitebearwhitebear 12.5k2828 gold badges149149 silver badges299299 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Check this... It is huge code so I have not pasted it here.

This is camera API for DOM [Document Object Model]

You have everything you need here You'll have to use html5

I think you are out of luck. At the moment there doesn't seem to be a way in HMTL5 to list and select audio/video devices available.

simply you cant select by script you can just turn on the default by getUsermedia api

To select the webcam you need to have 2 steps. 1º step is about listing all devices:

<select id="video_id"></select>
<script>
navigator.getMedia = ( navigator.getUserMedia ||
                                 navigator.webkitGetUserMedia ||
                                 navigator.mozGetUserMedia ||
                                 navigator.msGetUserMedia);
navigator.mediaDevices.enumerateDevices()
          .then(function(devices) {
            devices.forEach(function(device) {
                if (device.kind == "videoinput"){
                    jQuery("#video_id").append("<option value='" + device.deviceId + "'>" + device.label + "</option>");
                }
              
            });
          });
</script>

Easy peasy. EnumerateDevices inside mediaDevices list all devices. I put each one using JQuery in the SELECT html. Now you have all options with all devices with the value being the ID of each device.

When someone select the device, it will trigger a function:

 jQuery("#video_id").change(function(){
     redo_video();
 })

Above jQuery sets the trigger when the select changes. It will fire the function redo_video()

 function redo_video(){
            
       constraints = {
             width: { ideal: 1280, max: 1920 },
             height: {ideal: 720, max: 1080 },
             deviceId: { exact: jQuery("#video_id").val()  }
        }
        navigator.getMedia(
        {
           video: constraints,
           audio: false
        },
        function(stream) {               
            video = document.querySelector('#video');
            if (navigator.mozGetUserMedia) {
                video.mozSrcObject = stream;
              } else {
                try {
                  video.srcObject = stream;
                    console.log(stream);
                } catch (error) {
                     video.src = window.URL.createObjectURL(stream);
                }
              }
                video.onloadedmetadata = function(e) {
                   video.play();
             };
              
        },
        function(err) {
          console.log("An error occured! " + err);
        }
    );
            
}

The function restarts the video player choose a device with a specific deviceId (the option selected).

本文标签： javascriptselect web camera on google chromeStack Overflow