zoukankan      html  css  js  c++  java
  • Html5使用摄像头

    Html

    <div id="contentHolder">
            <video id="video" width="320" height="320" autoplay>
            </video>
            <button id="snap" style="display: none">
                拍照
            </button>
            <canvas style="display: none" id="canvas" width="320" height="320">
            </canvas>
        </div>
        <div>
            <input type="button" value="拍照" onclick="CatchCode()" /></div>
    

    Js

    //这段代 主要是获取摄像头的视频流并显示在Video 签中           
            window.addEventListener("DOMContentLoaded", function () {
                var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                errBack = function (error) {
                    console.log("Video capture error: ", error.code);
                };
                //navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow       
                if (navigator.getUserMedia) {
                    navigator.getUserMedia(videoObj, function (stream) {
                        video.src = stream;
                        video.play();
                    }, errBack);
                } else if (navigator.webkitGetUserMedia) {
                    navigator.webkitGetUserMedia(videoObj, function (stream) {
                        video.src = window.webkitURL.createObjectURL(stream);
                        video.play();
                    }, errBack);
                }
                //这个是拍照按钮的事件,          
                $("#snap").click(function () {
                    context.drawImage(video, 0, 0, 320, 320);
                    //CatchCode();           
                });
            }, false);
    
            //这个是 刷新上 图像的        
            function CatchCode() {
                //$("#snap").click();
                document.getElementById("canvas").getContext("2d").drawImage(video, 0, 0, 320, 320);
                //实际运用可不写,测试代 , 为单击拍照按钮就获取了当前图像,有其他用途    
                var canvans = document.getElementById("canvas");
                //获取浏览器页面的画布对象                       
                //以下开始编 数据   
                var imgData = canvans.toDataURL();
                //将图像转换为base64数据
                var base64Data = imgData.substr(22);
                //在前端截取22位之后的字符串作为图像数据       
                //开始异步上             
                $.post("Html5UseCamera.aspx?action=upload", { "img": base64Data }, function (data, status) { }, "text");
            }      
    

      C#

    byte[] imgBytes = Convert.FromBase64String(Request.Form["img"]);
                Stream stream = new MemoryStream(imgBytes);
                System.Drawing.Image image = System.Drawing.Image.FromStream(stream);
                image.Save(Server.MapPath("~/") + Guid.NewGuid().ToString() + ".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
    

      

  • 相关阅读:
    某电校园网
    M100(3) 无线数传
    【转】大厦将倾,互联网将如何变革传统行业(下)
    【转】大厦将倾,互联网将如何变革传统行业(上)
    【转】用户十秒离开你网站的25个原因
    web及移动应用测试知识总结
    【转】Watir, Selenium & WebDriver
    ICMP协议
    我不会OOO,仍然可以XXX_转
    查看网络连接数目(解决TIME_WAIT过多造成的问题_转)
  • 原文地址:https://www.cnblogs.com/Lance-Lan/p/3577689.html
Copyright © 2011-2022 走看看