getUserMedia 获取 摄像头 拍照 代码 1920-1080 video canvas

20210422

摄像头代码 是基于 https 协议的，需要开启协议后才能测试

http-server -S 开启 https 服务

https://www.cnblogs.com/pengchenggang/p/14685560.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>摄像头拍照</title>

</head>

<body>

  <video id="video" width="480" height="320"></video>

  <div> <button id="capture">拍照</button> </div>

  <video id="videoBig" width="1920" height="1080" style="display: none;"></video>

  <canvas id="canvas" width="1920" height="1080" style="display: none;"></canvas>

  <script>

    //访问用户媒体设备的兼容方法

    function getUserMedia(constraints, success, error) {

      if (navigator.mediaDevices.getUserMedia) {

        //最新的标准API

        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);

      } else if (navigator.webkitGetUserMedia) {

        //webkit核心浏览器

        navigator.webkitGetUserMedia(constraints, success, error)

      } else if (navigator.mozGetUserMedia) {

        //firfox浏览器

        navigator.mozGetUserMedia(constraints, success, error);

      } else if (navigator.getUserMedia) {

        //旧版API

        navigator.getUserMedia(constraints, success, error);

      }

    }

    var video = document.getElementById('video');

    var videoBig = document.getElementById('videoBig');

    var canvas = document.getElementById('canvas');

    var context = canvas.getContext('2d');

    function success(stream) {

      //兼容webkit核心浏览器

      var CompatibleURL = window.URL || window.webkitURL;

      //将视频流设置为video元素的源

      console.log(stream);

      //video.src = CompatibleURL.createObjectURL(stream);

      video.srcObject = stream;

      video.play();

      videoBig.srcObject = stream;

      videoBig.play()

    }

    function error(error) {

      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);

    }

    // jsp 调用拍照后的函数

    function snapGetBase64(base64) {

      console.info('snapGetBase64 - image Base64: ', base64)

    }

    function main() {

      if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator

        .mozGetUserMedia) {

        //调用用户媒体设备, 访问摄像头

        getUserMedia({

          video: {

            width: 1920,

            height: 1080

          }

        }, success, error);

      } else {

        alert('不支持访问用户媒体');

      }

      document.getElementById('capture').addEventListener('click', function () {

        context.drawImage(videoBig, 0, 0, 1920, 1080);

        var image = canvas.toDataURL('image/jpeg', 0.8)

        snapGetBase64(image)

      })

    }

    main();

  </script>

</body>

</html>

getUserMedia 获取 摄像头 拍照 代码 1920-1080 video canvas的更多相关文章

  1. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能，不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  2. [转] HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频（完整示例）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. h5获取摄像头拍照功能

    完整代码展示 <!DOCTYPE html> <head> <title>HTML5 GetUserMedia Demo</title> <met ...

  4. OpenCv调用摄像头拍照代码

    近期在研究OpenCv对摄像头的调用.现将代码贴出,供大家批评指正. 1.申明 #include"./opencv2/opencv.hpp" #ifdef _DEBUG #prag ...

  5. js实现浏览器调用电脑的摄像头拍照

    <!DOCTYPE html> <html lang="en"> <head> <style> * { margin: ; padd ...

  6. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  7. 如何用猿大师播放器在网页上同时播放20路以上海康威视高分辨率（1920*1080）摄像头RTSP视频流?

    问: 同时播放分辨率为1920*1080的高清分辨率的摄像头视频流,找了很长时间试过无数方法均不能满足,服务器转码方案卡顿非常严重,几乎不能播放.了解到猿大师可以用到本机的硬件解码和加速,播放高清视频 ...

  8. vue 调用摄像头拍照以及获取相片本地路径(实测有效)

    在学习这个的时候有一点前提:这是针对手机功能的,所以最重要的是要用手机进行实时调试 包含图片的增加和删除功能 <template> <div> <!--照片区域--> ...

  9. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

  10. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

随机推荐

  1. 3.2 Windows驱动开发：内核CR3切换读写内存

    CR3是一种控制寄存器,它是CPU中的一个专用寄存器,用于存储当前进程的页目录表的物理地址.在x86体系结构中,虚拟地址的翻译过程需要借助页表来完成.页表是由页目录表和页表组成的,页目录表存储了页表的 ...

  2. Python 使用Scapy构造特殊数据包

    Scapy是一款Python库,可用于构建.发送.接收和解析网络数据包.除了实现端口扫描外,它还可以用于实现各种网络安全工具,例如SynFlood攻击,Sockstress攻击,DNS查询攻击,ARP ...

  3. Python 实现Ping命令状态检测

    ping 是一种因特网包探索器,用于测试网络连接量的程序,Ping是工作在TCP/IP网络体系结构中应用层的一个服务命令,主要是向特定的目的主机发送 ICMP 请求报文,测试目的站是否可达及了解其有关 ...

  4. vi / vim编辑器的使用 [补档-2023-07-01]

    vi/vim编辑器 ​ vi/vim编辑器是linux中的文本编辑器,其中vim比vi的功能更加强大,可以编辑shell程序,推荐使用vim,下面也将介绍vim如何使用. 2-1 vi/vim的三种工 ...

  5. map和set的模拟实现｜利用红黑树封装map和set｜STL源码剖析

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量干货博客汇总https://blog. ...

  6. flutter3+dart3聊天室|Flutter3跨平台仿微信App语音聊天/朋友圈

    全新研发flutter3+dart3+photo_view跨多端仿微信App界面聊天Flutter3-Chat. flutter3-chat基于最新跨全平台技术flutter3+dart3+mater ...

  7. delphi中 注意一点，record 类型 参数默认是 值拷贝，class 参数 默认是传地址；值传递，指针传递、引用传递

    作为函数的入参,若是record类型,默认是值拷贝,效率低,若要传指针,需要加 var ; 作为函数的入参,若是 class类型,默认是传地址,不需要加var unit Unit1; interfac ...

  8. 大数据技术之DataX

    一.DataX简介 DataX 是阿里巴巴开源的一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL.Oracle等).HDFS.Hive.ODPS.HBase.FTP等各种异构数据源之 ...

  9. Nginx+uwsgi+ssl配置https

    Nginx+uwsgi+ssl配置https 使用原始django,太过于笨重和杂多nginx是一个轻量级的web服务器,在处理静态资源和高并发有优势uwsgi是一个基于python的高效率的协议,处 ...

  10. .NET周刊【2月第2期 2024-02-11】

    国内文章 C#/.NET该如何自学入门? https://www.cnblogs.com/Can-daydayup/p/18006914 随着DotNetGuide技术社区交流群的扩大,很多新成员希望 ...