谷歌浏览器开启摄像头功能

注意：
由于浏览器安全策略，开启摄像功能只支持https协议；
让谷歌浏览器http协议支持的解决方案：

右键chrome快捷方式》属性》快捷方式》目标
最后添加上

--unsafely-treat-insecure-origin-as-secure="http://yourexample.com" --

最后的http://yourexample.com是想摆脱http安全策略限制，即实现开启摄像头功能的站点

<!DOCTYPE html>
<html lang="ZH-CN">
<head><meta charset="utf-8"><title>web拍照</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><style>button{margin-right:15px;font-size: 16px;letter-spacing:2px;padding:5px; }canvas{display:none;}video{border:1px solid #ddd;float: right;width: 320px;height: 240px;background: black;}.row{margin-left:0px;margin-right: 0px;}.row.menu,.row.video,.row.report{border-bottom: 1px solid #ddd;padding:10px;}.row.video {display: none;}button[disabled]{cursor: not-allowed;}</style>
</head>
<body><div class="row menu"><button id="carema" class="btn-primary">打开摄像头</button><button id="take-picture" class="btn-default" disabled>拍摄</button><button id="close-camera" class="btn-default" disabled>关闭摄像头</button>
</div><div class="row video"><video id="video"></video></div><div class="row report"><canvas id="canvas"></canvas><img src="" alt="" id="img-result"></div></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>let canvas = document.querySelector("#canvas"); //let video = document.querySelector("#video");let img = document.querySelector("#img-result");let context = canvas.getContext('2d');let width = 320; //视频和canvas的宽度let height = 240; //let streaming = false; // 是否开始捕获媒体var mediaStreamTrack;// 获取用户媒体,即摄像头function openCamera(){navigator.mediaDevices.getUserMedia({video: true}).then(stream => {mediaStreamTrack = stream;video.srcObject = stream; // 将捕获的视频流传递给video  放弃window.URL.createObjectURL(stream)的使用video.play(); //  播放视频});$("#take-picture").addClass('btn-primary')$("#close-camera").addClass('btn-primary')$("#take-picture").attr('disabled',false)$("#close-camera").attr('disabled',false)$('.row.video').css('display','block');}// 关闭摄像头function closeCamera(){mediaStreamTrack.getTracks()[0].stop();$("#take-picture").attr('disabled',true)$("#take-picture").removeClass('btn-primary')$("#take-picture").removeClass('btn-danger')$("#close-camera").removeClass('btn-primary')$("#close-camera").attr('disabled',true)}// 拍照function takePicture() {// 需要判断媒体流是否就绪if(streaming){context.drawImage(video, 0, 0, width, height);// 将视频画面捕捉后绘制到canvas里面img.src = canvas.toDataURL('image/png');// 将canvas的数据传送到img里}else {alert('请检查摄像头是否正常开启');}}$('#carema').click(function(){openCamera();});$('#close-camera').click(function(){closeCamera();$('.row.video').css('display','none');});// 监听视频流就位事件,即视频可以播放了video.addEventListener('canplay', function(ev){if (!streaming) {// height = video.videoHeight / (video.videoWidth/width);video.setAttribute('width', width);video.setAttribute('height', height);canvas.setAttribute('width', width);canvas.setAttribute('height', height);streaming = true;}}, false);$("#take-picture").click(function(){takePicture();if(streaming){$(this).html('重新拍摄');$(this).removeClass('btn-primary');$(this).addClass('btn-danger');}else{}});</script>
</body>
</html>

谷歌浏览器开启摄像头功能相关推荐

使用Chrome浏览器的搜索引擎，谷歌浏览器开启同步功能
试了很多方法使用谷歌的搜索和登录,结果都是页面加载失败,最后还是找到了一个插件极简插件 https://chrome.zzzmh.cn/#/extension 右上角搜索"chrome同步 ...
谷歌浏览器自动填充功能怎么开启？自动填充功能开启方法
为了避免用户在登录同一网站时频频输入账号.密码的现象,谷歌在自家的Chrome浏览器中贴心的加入了"自动填充功能".那么,谷歌浏览器自动填充功能要怎么开启呢?不清楚操作方法的朋友, ...
如何开启谷歌浏览器的实验室功能
谷歌浏览器的实验室功能都隐藏在 chrome://flags 中 1. 开启并行下载 chrome://flags/#enable-parallel-downloading 2. 标签页分组功能 ch ...
谷歌浏览器开启导入登录密码功能
1.打开谷歌浏览器输入 chrome://flags 2.然后在搜索框里输入 password 3.找到Password import,选择Enable开启导入功能 4.然后设置这里会多出一项导入功能 ...
谷歌浏览器获取摄像头
谷歌浏览器默认只支持htpps,localhost,127.0.0.1这三种地址获取摄像头,如何使用http获取摄像头呢?只需以下4步 1.打开浏览器输入 chrome://flags/#unsafe ...
python怎么实现打开摄像头_python开启摄像头以及深度学习实现目标检测方法
最近想做实时目标检测,需要用到python开启摄像头,我手上只有两个uvc免驱的摄像头,性能一般.利用python开启摄像头费了一番功夫,主要原因是我的摄像头都不能用cv2的VideCapture打开 ...
python开启摄像头以及深度学习实现目标检测
最近想做实时目标检测,需要用到python开启摄像头,我手上只有两个uvc免驱的摄像头,性能一般.利用python开启摄像头费了一番功夫,主要原因是我的摄像头都不能用cv2的VideCapture打开 ...
54：第五章：开发admin管理服务：7：人脸入库流程；人脸登录流程；浏览器开启视频调试模式（以便能够在本机的不安全域名的情况下，也能去开启摄像头）；
说明: (1)本篇博客内容:介绍人脸入库流程,人脸登录流程:人脸入库流程:Chrome开启视频调试模式,以便能够在本机的不安全域名的情况下,也能去开启摄像头: 目录一:人脸入库流程,人脸登录流程: ...
Google怎么登录账号并开启同步功能？
Google怎么登录账号实现开启同步功能? 很多小伙伴可能使用谷歌浏览器的时候发现,谷歌浏览器没办法登录.如果我们能登录账号,那以后换一台电脑或者重装系统之后,原来保存在浏览器的收藏夹也会同步过来,所 ...

谷歌浏览器开启摄像头功能

谷歌浏览器开启摄像头功能相关推荐

最新文章

热门文章