整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端小程序-js+html调用电脑摄像头实现网页拍照

前端小程序-js+html调用电脑摄像头实现网页拍照

自网络

这是大家在做信息类网站的时候经常要用到的一个功能:

理想情况下我们应该先判断你的设备上是否有摄像头或相机,但简单起见,我们在这里直接写出了HTML标记,而不是用JavaScript先判断然后动态生成这些标记

<video id="video" width="300" height="240" autoplay></video>

<button id="snap">拍照</button>

<canvas id="canvas" width="300" height="240"></canvas>

</body>

</html>

$( function() {

try { document.createElement("canvas").getContext("2d"); } catch (e) { alert("not support canvas!") }

var video=document.getElementById("video"),

canvas=document.getElementById("canvas"),

context=canvas.getContext("2d");

navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (navigator.getUserMedia)

navigator.getUserMedia(

{ "video": true },

function (stream) {

if (video.mozSrcObject !==undefined)video.mozSrcObject=stream;

else video.src=((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;

video.play();

},

function (error) {

alert("Video capture error: " + error.code);

}

);

else alert("Native device media streaming (getUserMedia) not supported in this browser");

document.getElementById("snap").addEventListener("click", function() {

/*context.drawImage(video, 0, 0, 640, 480);//照片大小*/

context.drawImage(video, 0, 0, canvas.width=video.videoWidth, canvas.height=video.videoHeight)

}, false);

司项目需要调用摄像头,看了一下html5文档,主要是使用html5的getUserMedia()API,写一个例子来记录具体的使用方法。



<html>
<body>
<!-- 用于展示摄像头视频流 -->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<div>
 <button id="capture" onclick="handleClickCapture()">拍照</button>
</div>

<!-- 展示拍摄的照片 -->
<canvas id="canvas" width="480" height="320"></canvas>

<script>
 var video=document.getElementById('video');
 var capture=document.getElementById('capture');
 var ctx=document.getElementById('canvas').getContext('2d');

 /**
 * 调用用户媒体设备
 * @param constraints 配置信息
 * @param success 成功回调函数
 * @param error 失败回调函数
 */
 function getUserMediaToPhoto(constraints,success,error) {
 if(navigator.mediaDevices.getUserMedia){
 navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
 }else if (navigator.webkitGetUserMedia) {
 navigator.webkitGetUserMedia(constraints,success,error);
 }else if(navigator.mozGetUserMedia){
 navigator.mozGetUserMedia(constraints,success,error);
 }else if(navigator.getUserMedia){
 navigator.getUserMedia(constraints,success,error);
 }
 }

 /**
 * 成功回调函数
 * @param stream 视频流
 */
 function success(stream){
 var CompatibleURL=window.URL || window.webkitURL;
 try {
 video.src=CompatibleURL.createObjectURL(stream);
 } catch (e) {
 video.srcObject=stream;
 }
 video.play();
 }

 /**
 * 失败回调
 * @param error 错误对象
 */
 function error(error) {
 console.log('无法访问媒体设备', error);
 }

 if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
 getUserMediaToPhoto({video:{width:480,height:320}},success,error);
 }else{
 alert('不支持访问用户媒体设备');
 }

 /**
 * 拍照按钮点击事件
 */
 function handleClickCapture() {
 ctx.drawImage(video,0,0,480,320);
 }
</script>
</body>
</html>

实现了基本的摄像头调用和拍照,实现思路非常简单,基本上只是在调用api,唯一恶心的地方在于api版本比较多,不得不多做一些判断。具体的api介绍、使用和参数可以查看MediaDevices.getUserMedia()。

外小哥利用了几行代码直接访问了手机的相机功能,这听起来是一件很新鲜的事情。究竟是怎么实现的呢?感兴趣的话,可以继续了解下去哦。

这位国外小哥是从事网页开发的工程师,海外网友都叫他Austin Gil。

既然是从事网页开发设计的,对HTML、java、CSS等相关网页语言都很熟悉了。


Austin Gil采用了最简单的网页语言,仅用HTML,实现了在网页上点击按钮就能够直接打开手机前置镜头来拍照。也可以调用手机后置镜头,开启录像模式。

整个编译过程,利用了HTML的capture属性,设置几个input参数和加上几行代码就搞定了,不费吹灰之力。


虽然用JavaScript或其它的方法也可以实现,但比起别的方法,这样能够便捷地获取用户相机权限,而且不用担心安全问题。


很多人都想知道相关代码,接下来会提到的,一起来看看吧。

教你使用HTML打开相机:


首先创建一个index.html文档,配合HTML的accpet属性,来指定不同标签所要capture的文件的具体属性。


Austin Gil设置了“environment”和“user”两个标签。


点击“environment”,可以调用相机的后置镜头,且可以录像;

点击“user”,可以打开相机前置镜头拍照。

具体代码如下:

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8" />

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

<style>

* {

font-size: 1.5rem;

}

</style>

</head>


<body>

<label for="environment">Capture environment:</label>

<br>

<input

type="file"

id="environment"

capture="environment"

accept="video/*"

>

<br><br>

<label for="user">Capture user:</label>

<br>

<input

type="file"

id="user"

capture="user"

accept="image/*"

>

</body>


</html>

从这些代码中,我们可以捕获到一个信息,就是没有提示用户是否打开访问相机的权限,网页就直接调用了相机。


问题是,这样操作,没有安全风险吗?

当很多人提出疑惑的时候,Austin Gil做出了解释:无额外风险。


浏览器其实并不能真正控制手机相机APP,即便是这样操作可以直接访问,但也只不过是能轻松上传相机生成的新文件而已。


简单来说,就是对于用户而言,浏览器通过HTML只能打开手机摄像头。如果要把照片、视频展示到网站上,或是想要保存下来,还得用到JavaScript的MediaDevices API。

这样操作是比纯用JavaScript更安全的。


因为运用JavaScript,在用户允许访问相机后,浏览器就能直接控制摄像头了。


而在Web 3.0标准之后,规定网页不能直接访问用户的手机镜头。

PS:现在主要用的是Web 5的标准。

最后是兼容性,据悉在这方面并不是很好。


Austin Gil指出,这种直接通过HTML指令打开用户摄像头的方式目前还存在不足,比如兼容性不太好。


如下图所示:

红色模块:不支持

绿色模块:支持

棕色模块:部分支持

灰色:未知

很多网友在好奇心的驱使下,测试了调用手机相机的代码。也有前端小哥进行了测试,结果如下:

点击environment和user按钮,在MacBook上分别可以打开视频格式和图片格式的文件;而在iPhone上,使用百度等浏览器,真的可以直接打开前置和后置摄像头!

好咯,本期内容就分享到这里了~