html5調用本機網路攝影機相容Google瀏覽器高版本,Google瀏覽器低版本,Firefox瀏覽器

標籤：creat   script   cap   class   top   archive   span   play   one   

做這個功能的時候在網上查了一些資料，代碼如下，在這個代碼在Google瀏覽器46版本是沒問題的，在Firefox瀏覽器也行，但是在Google瀏覽器高版本下是不相容的

<div id="body">    <section class="featured">        <div class="content-wrapper">            <hgroup class="title">                <h1>Welcome to webcam</h1>                <br />                <h2>相容Google瀏覽器46版本，48版本，Google瀏覽器高版本，Firefox瀏覽器</h2>            </hgroup>                    </div>    </section>    <section class="content-wrapper main-content clear-fix">        <h3>            html5在本機調用網路攝影機是沒問題，但是部署到外網伺服器，Google瀏覽器高版本需要將http要改成https;<br />            https在IIS7.5配置教程：http://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> 

Google瀏覽器高版本要相容以上代碼，必須要將項目部署成https 

https與IIS7.5部署教程可以見這麼同學的部落格：http://www.cnblogs.com/bobliu/archive/2012/08/05/2590694.html ;

自己做了一個測試demo 點擊下載

 

html5調用本機網路攝影機相容Google瀏覽器高版本,Google瀏覽器低版本,Firefox瀏覽器