pc端调起电脑的摄像头进行拍照功能

我的需求是在电脑端调起电脑上面的摄像头，有可能是电脑自带的摄像头也可能是插入的USB摄像头
下面这个是如果用户有两个摄像头的话，会将这两个摄像头都列出来，用户可以自己选择使用哪个摄像头。
下面是html代码

<div id="container">
<div class="select">
<label for="audioSource">Audio source: </label><select id="audioSource"></select>
</div>

<div class="select">
<label for="videoSource">Video source: </label><select id="videoSource"></select>
</div>

</div>
<div id="promoNode"></div>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

下面是javascript代码

//调用摄像头
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        var mediaConfig = { video: true };
        var errBack = function (e) {
            console.log('An error has occurred!', e)
        };

        // Put video listeners into place
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {
                //video.src = window.URL.createObjectURL(stream);
                video.srcObject = stream;
                video.play();
            });
        }
        /* Legacy code below! */
        else if (navigator.getUserMedia) { // Standard
            navigator.getUserMedia(mediaConfig, function (stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(mediaConfig, function (stream) {
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if (navigator.mozGetUserMedia) { // Mozilla-prefixed
            navigator.mozGetUserMedia(mediaConfig, function (stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById('snap').addEventListener('click', function () {
            context.drawImage(video, 0, 0, 250, 200);
            var ImageData = canvas.toDataURL('Image/jpeg', 1);//获取canvas中绘制的数据
            document.getElementById("show-img").src = ImageData;//将canvas中的数据转化为图片显示
            $('.show-img').show();
            var blob = base64DateUrlToBlob(ImageData, 'image/jpeg');//将图片转为二进制
        });

        var videoElement = document.querySelector('video');
        var videoSelect = document.querySelector('select#videoSource');

        navigator.mediaDevices.enumerateDevices()
            .then(gotDevices).then(getStream).catch(handleError);

        videoSelect.onchange = getStream;

        function gotDevices(deviceInfos) {
            for (var i = 0; i !== deviceInfos.length; ++i) {
                var deviceInfo = deviceInfos[i];
                var option = document.createElement('option');
                option.value = deviceInfo.deviceId;
                if (deviceInfo.kind === 'videoinput') {
                    option.text = deviceInfo.label || 'camera ' +
                        (videoSelect.length + 1);
                    videoSelect.appendChild(option);
                } else {
                    // console.log('Found one other kind of source/device: ', deviceInfo);
                }
            }
        }

        function getStream() {
            if (window.stream) {
                window.stream.getTracks().forEach(function (track) {
                    track.stop();
                });
            }

            var constraints = {
                video: {
                    deviceId: { exact: videoSelect.value }
                }
            };

            navigator.mediaDevices.getUserMedia(constraints).
                then(gotStream).catch(handleError);
        }

        function gotStream(stream) {
            window.stream = stream; // make stream available to console
            videoElement.srcObject = stream;
        }

        function handleError(error) {
            //console.log('Error: ', error);
        }
        function base64DateUrlToBlob(base64DataUrl, type) {
            //去掉url的头，并转换为bytes
            var bytes = window.atob(base64DataUrl.split(',')[1]);
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            return new Blob([ab], { type: type });
        }

下面是调用用户电脑上面自带的摄像头
html代码如下

<div class="box">
    <video src=""></video>
    <button class='shot'>拍照</button>
    <canvas id='canvas'></canvas>
    <img src=''>
  </div>

javascript代码如下
要引入这个文件

 var constraints = {audio: true, video: {width: 200,height: 250}};
    // 开启视频
    navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
      console.log('getUserMedia:', mediaStream)
      var video = document.querySelector('video');
      video.srcObject = mediaStream;
      video.onloadedmetadata = function(e) {
        video.play();
      };
      
      // 使用canvas进行拍照
      var canvas = document.getElementById('canvas')
      $('button').on('click', function () {
        canvas.getContext('2d').drawImage(video, 0, 0, 200, 250);
        $('img').css('src', canvas.toDataURL("image/png"))
      })
      
    }).catch(function(err) {
      console.log(err.name + ": " + err.message);
    });

还有一篇讲的很详细的文章，要想深入了解的可以参考：https://www.html5rocks.com/en/tutorials/getusermedia/intro/

pc端调起电脑的摄像头进行拍照功能

猜你喜欢