浏览器调摄像头

最新推荐文章于 2024-01-12 15:24:24 发布

北纬39°的风

最新推荐文章于 2024-01-12 15:24:24 发布

阅读量318

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_41647530/article/details/108405063

版权

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
           + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>

<div>
           <img id="img" name="img" width="480" height="360">
       </div>
       <div>
           <button id="opensxt" ">打开摄像头</button>
       </div>
       <div>
           <button id="take" οnclick="takePhoto()">点击拍照</button>
       </div>
   </div>

</body>
<script src="<%=path%>/jslib/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");
   var video = document.getElementById("video");
   var imgsrc = document.getElementById("img");
   $(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.srcObject = stream;
               video.play();
           }, errBack);
       } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
           navigator.webkitGetUserMedia(videoObj, function(stream) {
               video.src = window.webkitURL.createObjectURL(stream);
               video.play();
           }, errBack);
       } else if (navigator.mozGetUserMedia) { // Firefox-prefixed
           navigator.mozGetUserMedia(videoObj, function(stream) {
               video.src = window.URL.createObjectURL(stream);
               video.play();
           }, errBack);
       }
       ;

   });
   /* function opensxt(){
       videoObj = {
               "video" : true
           };
           var errBack = function(error) {
               console.log("Video capture error: ", error.code);
           };
           if (navigator.getUserMedia) { // Standard
               navigator.getUserMedia(videoObj, function(stream) {
                   video.srcObject = stream;
                   video.play();
               }, errBack);
           } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
               navigator.webkitGetUserMedia(videoObj, function(stream) {
                   video.src = window.webkitURL.createObjectURL(stream);
                   video.play();
               }, errBack);
           } else if (navigator.mozGetUserMedia) { // Firefox-prefixed
               navigator.mozGetUserMedia(videoObj, function(stream) {
                   video.src = window.URL.createObjectURL(stream);
                   video.play();
               }, errBack);
           }
           ;
   } */
   function takePhoto() {
       context.drawImage(video, 0, 0, 480, 360);
       // console.log(canvas.toDataURL('jpg'))
       var sr = canvas.toDataURL('jpg');
       var src = sr.replace(/^data:image\/\w+;base64,/, "");
       $("#img").attr('src',sr);
   }
</script>
</html>

北纬39°的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器调摄像头

<%@ page language="java" contentType="text/html; charset=utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getS...
复制链接

扫一扫