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. 2.5 PE结构：导入表详细解析

    导入表(Import Table)是Windows可执行文件中的一部分,它记录了程序所需调用的外部函数(或API)的名称,以及这些函数在哪些动态链接库(DLL)中可以找到.在Win32编程中我们会经常 ...

  2. 7.5 C/C++ 实现链表队列

    链表队列是一种基于链表实现的队列,相比于顺序队列而言,链表队列不需要预先申请固定大小的内存空间,可以根据需要动态申请和释放内存.在链表队列中,每个节点包含一个数据元素和一个指向下一个节点的指针,头节点 ...

  3. Celery Worker log 中记录 task_id

    import inspect import logging import threading from logging import Logger as Logger, LogRecord from ...

  4. Windows XP Professional with Service Pack 3 (x86)

    Windows XP Professional with Service Pack 3 (x86) 链接:https://pan.baidu.com/s/1p99vLx5psoq9K4ONlRpkZA ...

  5. JQ模糊查询插件

    //构造函数写法 ;(function($,window,document,undefined){//注意这里的分号必须加 //插件的全部代码 var FazzSearch = function (e ...

  6. 关于JAVA泛型数组类型擦除引发的问题及解决方案

    先看如下一个DEMO示例代码:(其中doBatchGet被子类重写了1次) public abstract class BaseDemoService<T> { public String ...

  7. XD刷机中执行reclaimdisks.sh的作用

    之前刷机提到在使用OEDA进行一键部署前,需先在所有DB节点上运行reclaimdisks.sh,也提到观察会释放pvs/vgs/lvs相对应的剩余空间. 本文以一套X8环境为例,来看下具体的表现,以 ...

  8. LVM（逻辑卷管理器）

    目录 一.LVM概述 二.基本术语 三.PE.PV.VG.LV之间的关系 四.LVM的工作原理 五.LVM的使用 1.部署逻辑卷 第一步: 还原快照,并在虚拟机添加两块新硬盘设备,开机 第二步: 让新 ...

  9. C# 二十年语法变迁之 C# 8参考

    C# 二十年语法变迁之 C# 8参考 自从 C# 于 2000 年推出以来,该语言的规模已经大大增加,我不确定任何人是否有可能在任何时候都对每一种语言特性都有深入的了解.因此,我想写一系列快速参考文章 ...

  10. 使用JS快速读取TXT文件

    1 前言 最近有个需求,需要使用JS快速读取外部大数据文件(60w条记录的表).笔者尝试过使用JS读取Excel文件,但是跑了十几分钟仍未出结果,后来笔者尝试将原数据保存为TXT文件,再从TXT文件中 ...