PC端调用摄像头(兼容各浏览器)

·  阅读 641

一、使用标准api调用摄像头

兼容谷歌、火狐、360等主流浏览器

注:页面协议必须是https,需要在https协议下才能生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <video id="video" autoplay="" style='width:640px;height:480px'></video>
    <button id="start">开启摄像头</button>
    <button id='picture'>拍照</button>
    <canvas id="canvas" width="640" height="480"></canvas>
</body>
<script type="text/javascript">
    var video = document.getElementById("video");
    var context = canvas.getContext("2d");
    var start = document.getElementById("start");
    var errocb = function () {
        console.log('ok!');
    };
    start.onclick = function () {
        if (navigator.mediaDevices.getUserMedia) { // 标准的API
            var p = navigator.mediaDevices.getUserMedia({
                video: true
            });
            p.then(function (mediaStream) {
                var video = document.querySelector('video');
                try{
                    video.srcObject = mediaStream;
                }catch(error){
                    video.src = window.URL.createObjectURL(mediaStream);
                }
                video.onloadedmetadata = function (e) {
                    // Do something with the video here.
                    video.play();
                };
            });
            p.catch(function(err) { console.log(err.name); });
        } else if (navigator.mediaDevices.webkitGetUserMedia) { // WebKit 
            var p = navigator.mediaDevices.webkitGetUserMedia({
                video: true
            });
            p.then(function (mediaStream) {
                var video = document.querySelector('video');
                video.src = window.URL.createObjectURL(mediaStream);
                video.onloadedmetadata = function (e) {
                    // Do something with the video here.
                    video.play();
                };
            });
            p.catch(function(err) { console.log(err.name); });
        }
        document.getElementById("picture").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });
    }
</script>
</html>
复制代码

二、使用flash插件调用摄像头(webcam插件)

兼容ie浏览器

相关js下载地址:

百度网盘:pan.baidu.com/s/1WspOaJ7V…

提取码:ae27

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="camera" class="borderstyle"></div>
    <canvas id="canvas" class="borderstyle" width="320px" height="240px"></canvas>
    <div id="showImg"></div>
    <ul id="cams"></ul>
    <button class="play">拍照</button>
</body>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.webcam.js"></script>
<script type="text/javascript">
// 该控件默认只支持320*240尺寸。
// 如果需要修改,可以参考  https://blog.csdn.net/qq_34310906/article/details/105573012
// 打开demo时,如果不能播放,请用http:// 方式打开,而不是file:///C:/  方式
$(function() {
     var w = 320,
         h = 240;
     var pos = 0,
         ctx = null,
         saveCB;
    var canvas = document.getElementById("canvas")
    if (canvas.toDataURL) {
        ctx = canvas.getContext("2d");
         var image = ctx.getImageData(0, 0, w, h);
         // console.log(image)
         // let data = image.data
         saveCB = function(data) {
             var col = data.split(";");
             var img = image;
             // console.log(4123456)
             for (var i = 0; i < 320; i++) {
                 var tmp = parseInt(col[i]);
                 img.data[pos + 0] = (tmp >> 16) & 0xff;
                 img.data[pos + 1] = (tmp >> 8) & 0xff;
                 img.data[pos + 2] = tmp & 0xff;
                 img.data[pos + 3] = 0xff;
                 pos += 4;
             }
             if (pos >= 4 * 320 * 240) {
                 ctx.putImageData(img, 0, 0);
                 var Imagedata = canvas.toDataURL().substring(22); //上传给后台的图片数据
                 pos = 0;
                 console.log(Imagedata)
             }
         };
     } else {
         // 低版本的ie不支持canvas.toDataURL,需要把数据传给后台转换
         var image = [];
         saveCB = function(data) {
             image.push(data);
             pos += 4 * 320;
             if (pos >= 4 * 320 * 240) {
                 $.post(URL, {
                     briStr: image.join(';')
                 }, function(data) {
                     //在页面显示base64图片处理
                     pos = 0;
                     image = [];
                 });
             }
         };
     }
     $("#camera").webcam({
         width: w,
         height: h,
         mode: "callback",
         swffile: "./swf/jscam.swf",
         // swffile: "./swf/jscam_canvas_only.swf",
         onSave: saveCB,
         onCapture: function() { //捕获图像
             webcam.save();
         },
         debug: function(type, string) { //控制台信息
             console.log(type + ": " + string);
         },
         onLoad: function() { //flash 加载完毕执行
             var cams = webcam.getCameraList();
             for (var i in cams) {
                 jQuery("#cams").append("<li>" + cams[i] + "</li>");
             }
         }
     });
 
     $(".play").click(function() {
         webcam.capture();
     }); 
 });
</script>
</html>
复制代码
分类:
前端
标签: