本篇教程探讨了HTML5如何调用本机摄像头，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

代码如下，在这个代码在谷歌浏览器46版本是没问题的，在火狐浏览器也行，但是在谷歌浏览器高版本下是不兼容的

<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Welcome to webcam</h1>
                <br />
                <h2>兼容谷歌浏览器46版本，48版本，谷歌浏览器高版本，火狐浏览器</h2>
            </hgroup>
            
        </div>
    </section>
    <section class="content-wrapper main-content clear-fix">
        <h3>
            html5在本机调用摄像头是没问题，但是部署到外网服务器，谷歌浏览器高版本需要将http要改成https;<br />
            https在IIS7.5配置教程：//www.cnblogs.com/bobliu/archive/2012/08/05/2590694.html ;
        </h3>
        <ol class="round">           
            <li class="one">                
                <video id="video" width="320" height="240" autoplay></video>
                <input type="button" value="拍照按钮" id="snap" />
            </li>
            <li class="two">
                <canvas id="canvas" width="320" height="240"></canvas>
            </li>
        </ol>
    </section>
</div>

 

<script type="text/javascript">

        var canvas =  document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var video = document.getElementById("video");
        $(document).ready(function () {
            videoObj = { video: true };
            var errBack = function (error) {
                console.log("Video capture error: ", error.code);
            };
            if (navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }
            else if (navigator.mozGetUserMedia) { // Firefox-prefixed
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.mozSrcObject = stream;
                    video.play();
                }, errBack);
            };
            $("#snap").on("click", function () {
                context.drawImage(video, 0, 0, 640, 480);
            });
        });
</script> 

谷歌浏览器高版本要兼容以上代码，必须要将项目部署成https 
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！