利用javascript调用摄像头，可以配合socket开发监控系统 

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>摄像头的调用</title>
</head>
<body>
    <video autoplay id="sourcevid" style="width:320;height:240px"></video>

    <canvas id="output" style="display:none"></canvas>

    <script type="text/javascript" charset="utf-8">
        // 发送画面
        //var socket = new WebSocket("ws://"+document.domain+":8080");
        var back = document.getElementById('output');
        var backcontext = back.getContext('2d');
        var video = document.getElementsByTagName('video')[0];
        
        var success = function(stream){
            video.src = window.URL.createObjectURL(stream);
        }

        /*
        socket.onopen = function(){
            draw();
        }
        */

        var draw = function(){
            try{
                backcontext.drawImage(video,0,0, back.width, back.height);
            }catch(e){
                if (e.name == "NS_ERROR_NOT_AVAILABLE") {
                    return setTimeout(draw, 100);
                } else {
                    throw e;
                }
            }
            // socket.send(back.toDataURL("image/jpeg", 0.5));
            setTimeout(draw, 100);
        }

        navigator.getUserMedia = navigator.getUserMedia 
            || navigator.webkitGetUserMedia 
            || navigator.mozGetUserMedia 
            || navigator.msGetUserMedia;
        navigator.getUserMedia({video:true, audio:false}, success, console.log);

        /*
        // 接收画面
        var receiver_socket = new WebSocket("ws://"+document.domain+":8008");
        var image = document.getElementById('receiver');
        receiver_socket.onmessage = function(data)
        {
            image.src=data.data;
        }
        */
    </script>
</body>
</html>

　　

posted @ 2015-07-24 16:27  Adtuu  阅读(1631)  评论(0)  编辑  收藏  举报