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. 4.6 Windows驱动开发：内核遍历进程VAD结构体

    在上一篇文章<内核中实现Dump进程转储>中我们实现了ARK工具的转存功能,本篇文章继续以内存为出发点介绍VAD结构,该结构的全程是Virtual Address Descriptor即虚 ...

  2. 推荐一款接口自动化测试数据提取神器 JSonPath

    在之前分享中,给大家介绍过一篇:如何快速审核接口返回值全部字段解决方案,详见原文:接口自动化测试,一键快速校验接口返回值全部字段 .当时,提到解决这类问题,市面上常见的解决方案有两种: 根据业务校验需 ...

  3. 21.2 静态TLS--《Windows核心编程》

    部分笔记来自于:https://blog.csdn.net/Steven_programe_life/article/details/103358251?utm_medium=distribute.p ...

  4. ABC 309

    直接从 F 开. F 三维偏序. 把盒子按 \(h_i\) 排序,离散化,正常跑三维偏序(注意不能相等). 还要处理 \(h_i\) 相等的情况,可以再把 \(h_i\) 从大到小排序,然后 \(w_ ...

  5. DRF解决跨域问题

    Django Rest Framework提供了corsheaders模块解决跨域问题 安装模块 pip3.9 install django-cors-headers 注册应用 # 注册 corshe ...

  6. Jsp+Servlet实现文件上传下载（一）--文件上传

    文件上传和下载功能是Java Web必备技能,很实用. 本文使用的是Apache下的著名的文件上传组件 org.apache.commons.fileupload 实现 下面结合最近看到的一些资料以及 ...

  7. Java并发编程实例--18.修改锁的公平性

    ReentrantLock和ReentrantReadWriteLock类的构造函数可接受一个布尔类型参数fair,表示你可以控制这2个类的行为. 其默认值为false,代表non-fair(不公平) ...

  8. DVWA XSS

    XSS Store hign level <?php if( isset( $_POST[ 'btnSign' ] ) ) { // Get input $message = trim( $_P ...

  9. crontab采坑总结

    目录 crontab环境变量 脚本缺少执行权限 crontab是Linux平台实现定时任务的服务工具,通常情况下该服务会预装在发行版中,直接使用即可. 关于crontab的详细用法参考:https:/ ...

  10. Hdf5开发笔记（一）：hdf5介绍，在windows上编译msvc2015x64版本

    前言   matlab的matio库需要使用到hdf5,编译hdf5的msvc2015x64版本. HDF5介绍   HDF(Hierarchical Data Format)是一种设计用于存储和组织 ...