ie11浏览器调用摄像头

ie11浏览器打不开摄像头,edge浏览器可以。有没有好兄弟帮帮忙,最好可以远程控制,谢谢!!

别给我发我自己找得到的链接,我就是因为没弄懂才自己提问的

贴出来你的控制摄像头部分的代码啊,不贴出来的话,没人能帮你,总不能每个人都远程一下你吧,如果是保密问题,那你只有控制台看一下有没有报错信息,或者看一下代码兼容性。

IE11怎么调取摄像头并拍照
https://blog.csdn.net/Funky_oaNiu/article/details/113477195

IE8及以下不支持HTML5标签:video和canvas;IE11及以下所有版本,包括Edge都不支持getUserMedia(),可参考如下链接解决https://blog.csdn.net/wonder233/article/details/79003412

https://www.csdn.net/tags/MtTaEgxsNDkxMzA2LWJsb2cO0O0O.html


<!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>网页调取摄像头</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
        #capture{
            position: absolute;
            right: 190px;
            bottom: -40px;

        }
        #video{
            position: absolute;
            right: 0;
            top: 0;
        }
        #img{
            position: absolute;
            left: 0;
            top: 0;
        }
        .auto{
            position: absolute;
            left: 50%;
            top: 50%;
            height: 320px;
            margin-top: -160px;
        }
        #sure{
            position: absolute;
            left: 210px;
            bottom: -40px;

        }
        button{
            cursor: pointer;
            margin: 0 auto;
            border: 1px solid #f0f0f0;
            background: #5CACEE;
            color: #FFF;
            width: 100px;
            height: 36px;
            line-height: 36px;
            border-radius: 8px;
            text-align: center;
            /*禁止选择*/
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Chrome/Safari/Opera */
            -khtml-user-select: none; /* Konqueror */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }

</style>
<body>
    <div class="auto">
            <video id="video" width="480" height="320" autoplay></video>
            <canvas id="canvas" width="480" height="320" style="display: none;"></canvas>
            <img src="./body_default.png" id="img" width="480" height="320" style="margin-left: 20px;">
            <div>
                <button id="capture" title="点击进行拍照">拍照</button>
            </div>
            <div>
                <button id="sure" title="是否用这张图片进行验证">确认</button>
            </div>
    </div>
  

  <script>
    var file ,stream;
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    }
 
    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');
 
    function success(stream) {
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      console.log(stream);
      stream = stream;
      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
    }
 
    function error(error) {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }
 
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      //调用用户媒体设备, 访问摄像头
      getUserMedia({video : {width: 480, height: 320}}, success, error);
    } else {
      alert('不支持访问用户媒体');
    }
        // base64转文件

    document.getElementById('capture').addEventListener('click', function () {
      context.drawImage(video, 0, 0, 480, 320);      
        // 获取图片base64链接
        var image = canvas.toDataURL('image/png');
        // 定义一个img
        var img = document.getElementById("img");
        //设置属性和src
        //img.id = "imgBoxxx";
        img.src = image;
        //将图片添加到页面中
        //document.body.appendChild(img);
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            file = new File([u8arr], filename, {type: mime});
            return new File([u8arr], filename, {type: mime});
        }
        console.log(dataURLtoFile(image, 'aa.png'));
    })

    document.getElementById('sure').addEventListener('click', function () {
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            type: "POST", // 数据提交类型
            url: "***********", // 发送地址
            data: formData, //发送数据
            async: true, // 是否异步
            processData: false, //processData 默认为false,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
            contentType: false,
            success:function(data){
                if(data.code === 200){
                    console.log(`${data.message}`);
                }else{
                    console.log(`${data.message}`);
                }
            },
            error:function(e){
                self.$message.warning(`${e}`);
                //console.log("不成功"+e);
            }
        });
        stream.getTracks()[0].stop();//结束关闭流
    })
  </script>
</body>
</html>


```
/* CSS */
.borderstyle {
    border: 1px solid #b6b6b6;
    width: 320px;
    height: 240px;
}
#camera {
    float: left;
    margin:10px;
}
#canvas {
    width: 320px;
    height: 240px;
    margin:10px;
}
```

```
/* camera.js代码 */
$(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);

        saveCB = function (data) {
            var col = data.split(";");
            var img = image;

            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;
            }
        };
    } else {
        var image = [];
        saveCB = function (data) {
            image.push(data);
            pos += 4 * 320;
            if (pos >= 4 * 320 * 240) {
                $.post(URL, {briStr: image.join(';')}, function (data) {
                    console.log(data);
                    //在页面显示base64图片处理
                    pos = 0;
                    image = [];
                });
            }
        };
    }

    $("#camera").webcam({
        width: w,
        height: h,
        mode: "callback", 
        swffile: "plugins/jQuery-webcam-master/jscam.swf",
        onSave: saveCB,
        onCapture: function () {               //捕获图像
            webcam.save();
        },
        debug: function (type, string) {       //控制台信息
            //console.log(type + ": " + string);
        },
        onLoad: function () {                   //flash 加载完毕执行
            //console.log('加载完毕!')
        }
    });

    $(".play").click(function () {
        webcam.capture();
    });

});

```

```
<!-- index.html -->
<body>
<div>
    <div id="camera" class="borderstyle"></div>
    <canvas id="canvas" class="borderstyle" width="320px" height="240px"></canvas>
    <div id="showImg"></div>
    <button class="play">拍照</button>
</div>
<script src="camera.js"></script>
</body>
```

 

如有帮助,请采纳,十分感谢!