js调用网络摄像头
阅读原文时间:2023年07月10日阅读:1

不支持IE浏览器(需要使用flash插件), 支持移动端, 未经过完全测试

PC端使用的时候, HTML页面需要预留video标签, canvas标签

移动端使用的时候, HTML页面需要预留file标签, canvas标签, img标签

(function (window, document) {
window.camera = {
init: function (options) {
/**
* options 属性示例
* videoID: video控件ID
* canvasID: canvas控件ID
* fileID: type为file的input控件的ID
* imageID: img控件的ID
* videoEnable: 是否启用摄像头
* audioEnable: 是否启用麦克风
* videoWidth: 视频宽度
* videoHeight: 视频高度
* photoWidth: 拍照宽度
* photoHeight: 拍照高度
*/

        \_options = options;  
        if (isMobileTerminal()) {  
            initMobileTerminal();  
        } else {  
            initComputerTerminal();  
        }  
    },  
    photo: function () {  
        if (isMobileTerminal()) {  
            photoMobileTerminal();  
        } else {  
            photoComputerTerminal();  
        }  
    }  
};

let \_options = null;

function initComputerTerminal() {  
    let videoDom = document.getElementById(\_options.videoID);  
    if (!videoDom) {  
        alert('Video 控件无效');  
        return;  
    }

    let canvasDom = document.getElementById(\_options.canvasID);  
    if (!canvasDom) {  
        alert('Canvas 控件无效');  
        return;  
    }  
    canvasDom.setAttribute('width', \_options.photoWidth + 'px');  
    canvasDom.setAttribute('height', \_options.photoHeight + 'px');

    let parameters = {  
        video: \_options.videoEnable ? {  
            width: \_options.videoWidth,  
            height: \_options.videoHeight  
        } : false,  
        audio: \_options.audioEnable  
    };

    navigator.mediaDevices.getUserMedia(parameters)  
        .then(function (MediaStream) {  
            video.srcObject = MediaStream;  
            video.play();  
        }).catch(function (reason) {  
            console.log(reason);  
            alert(reason);  
        });  
}

function photoComputerTerminal() {  
    let videoDom = document.getElementById(\_options.videoID);  
    if (!videoDom) {  
        alert('Video 控件无效');  
        return;  
    }

    let canvasDom = document.getElementById(\_options.canvasID);  
    if (!canvasDom) {  
        alert('Canvas 控件无效');  
        return;  
    }

    let context = canvasDom.getContext('2d');  
    context.drawImage(videoDom, 0, 0, \_options.photoWidth, \_options.photoHeight);  
}

function initMobileTerminal() {  
    let fileDom = document.getElementById(\_options.fileID);  
    if (!fileDom) {  
        alert('File 控件无效');  
        return;  
    }

    fileDom.setAttribute('accept', 'image/\*');  
    fileDom.setAttribute('capture', 'camera');

    let canvasDom = document.getElementById(\_options.canvasID);  
    if (!canvasDom) {  
        alert('Canvas 控件无效');  
        return;  
    }

    canvasDom.setAttribute('width', \_options.photoWidth + 'px');  
    canvasDom.setAttribute('height', \_options.photoHeight + 'px');

    let imageDom = document.getElementById(\_options.imageID);  
    if (!imageDom) {  
        alert('Image 控件无效');  
        return;  
    }

    fileDom.addEventListener('change', function () {  
        let file = fileDom.files\[0\];  
        let reader = new FileReader();  
        reader.onloadend = function () {  
            imageDom.setAttribute('src', reader.result);

            setTimeout(function () {  
                let context = canvas.getContext("2d");  
                context.drawImage(imageDom, 0, 0, \_options.photoWidth, \_options.photoHeight);  
            }, 300);  
        };  
        reader.readAsDataURL(file);  
    });  
}

function photoMobileTerminal() {  
    let fileDom = document.getElementById(\_options.fileID);  
    fileDom.click();  
}

function isMobileTerminal() {  
    if (/AppleWebKit.\*Mobile/i.test(navigator.userAgent) || /Mobile/.test(navigator.userAgent) || /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))  
        return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);  
    return false;  
}  

})(window, document);

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章