探秘移动端网页调用摄像头的两种方式
前言小叙
PC 端网页调用摄像头 的场景想必大家并不陌生，打开一个网址，开启摄像头开始笔试/视频聊天/直播等。
而在 移动端网页调用摄像头 的场景你见得多吗？我想答案应该是不多吧（在下见识浅薄）。
H5 相较于native app 一直被诟病的就有 调用手机原生能力差 这一点。
但需求总是会突如其来，做与不做？
其实，做与不做都不应该影响你去贮备相关知识、做较为充分的调研。市面上类似的技术实现不多，不代表不能做。真的不能做，也至少得知道原因吧？
也许在你探寻的过程中，就会有不一样的发现。
点赞美三代👍评论富一生🤞
一、 WebRTC
方案一就是 webRTC，也正是 PC 端的实现方案。
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。 —— MDN-WebRTC_API
核心API
核心的API为： navigator.mediaDevices.getUserMedia
- 特注：这里还有一个旧有的 API Navigator.getUserMedia 已经被废弃掉了， 注意区分 ，别再用旧 API 做测试啦~
兼容情况
Can I Use：看一下这个 API 的兼容情况
https://caniuse.com/?search=GetUserMedia
本瓜结合网上代码，小做修改，放到了线上。
在线测试地址： https://tuaran.site/static/webrtc.html
贴下关键代码
<body>
<div>H5调前置摄像头DEMO</div>
<video id="video" width="480" height="320" muted controls autoplay="autoplay">
</video>
<button id="capture">拍照</button>
<canvas id="canvas" width="480" height="320"></canvas>
<script>
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia({
'audio':{ echoCancellation: false },
'video':{ 'facingMode': "user" }//调用前置摄像头，后置摄像头使用video: { facingMode: { exact: "environment" } }
.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);
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
function success(stream) {
//兼容webkit核心浏览器
let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
function error(error) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({ video: { width: 480, height: 320 } }, success, error);
} else {
alert('不支持访问用户媒体');