实现效果：

代码如下：

<!DOCTYPE html>

<html lang="zh">

<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>Document</title>

</head>

<body>

<video src=""></video>

<script type="text/javascript">

var opt = {

audio: true,

video: {

width: 375,

height: 603

}

};

navigator.mediaDevices.getUserMedia(opt)

.then(function(mediaStream) {

var video = document.querySelector('video');

video.srcObject = mediaStream;

video.onloadedmetadata = function(e) {

video.play();

};

})

.catch(function(err) {

console.log(err.name + ": " + err.message);

}); // always check for errors at the end.

</script>

</body>

</html>

web网页利用JavaScript实现对摄像头的调用的更多相关文章

  1. 利用 JavaScript SDK 部署网页版“Facebook 登录”

    facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...

  2. 利用javascript调用摄像头，可以配合socket开发监控系统

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  3. 15款加速 Web 开发的 JavaScript 框架

    JavaScript 可以通过多种方式来创建交互式的网站和 Web 应用程序.利用 JavaScript,可以让你移动 HTML 元素,创建各种各样的自定义动画,给你的访问者更好的终端用户体验. 对于 ...

  4. web网页练习

    一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元 ...

  5. 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  6. 利用JavaScript函数对字符串进行加密

    加密.解密问题对我来说一直是很神秘的,感到神奇无比. 理论了解 前段时间看到关于利用JavaScript函数unescape()和escape()对字符串进行替换处理.通过查资料得知, escape( ...

  7. 15款增强web体验的Javascript库

    1. Pikaday: Standalone JavaScript Datepicker 这是一个令人耳目一新的JavaScript日期选择器 轻量轻(压缩和gzip后小于5KB) 没有依赖其它JS框 ...

  8. [Java Web] 4、JavaScript 简单例子(高手略过)

    内容概览: JavaScript简介 JavaScript的基本语法 JavaScript的基本应用 JavaScript的事件处理 window对象的使用 JavaScript简介: JavaScr ...

  9. WEB网页插件 如何实现 选择上传图片路径 【高级问题】

    发表于 2010-10-22 12:11 | |只看楼主       按键精灵程序里面的WEB网页插件 如何实现 选择上传图片路径 我想在上传图片的选框设置图片路径为 C:\fakepath\001. ...

随机推荐

  1. 1.1选择select

    一.核心(Core) 1.1选择 1.1.1 d3.select(selector) ​ 选择第一个与指定字符串selector匹配的元素,如果没有就返回空. 例如: <table> &l ...

  2. Windows下使用PuTTY连接Centos7、Linux系统目录结构、一些操作命令

    PuTTY可以远程管理Linux.PuTTY官网:https://www.putty.org/ 一.使用PuTTY连接Centos7 下载安装后,打开如下图: 1.输入主机名或IP地址2.端口号默认2 ...

  3. DevOps VS 职责分离

    原文地址: https://medium.com/@jeehad.jebeile/devops-and-segregation-of-duties-9c1a1bea022e 原文作者:Jeehad J ...

  4. selinux disable

    临时关闭: [root@localhost ~]# getenforceEnforcing [root@localhost ~]# setenforce 0[root@localhost ~]# ge ...

  5. python字典中列表追加数据

    dict = {} for i in range(1, 6): if i not in dict: dict[i] = [] for j in range(101, 106): dict[i].app ...

  6. appium---App页面滑动

    我们操作app的过程中都会进行页面滑动,那么这个过程通过python怎么实现呢? 如何滑动 大家都非常的清楚我们手动在app上是如何滑动的,然后自动化只是模仿了手工的方法去实现,我们通过一个图来分析 ...

  7. JVM-6-垃圾回收算法

    三如何垃圾回收   GC(Garbage Collection)垃圾回收算法 标记清除    速度快,但是会产生内存碎片: 标记整理    解决了标记清除内存碎片的问题,但是每次都得移动对象,因此成本 ...

  8. 四、排序算法总结二（归并排序）（C++版本）

    一.什么是归并排序? 归并排序是基于分而治之的思想建立起来的. 所谓的分而治之,也就是将一个数据规模为N的数据集,分解为两个规模大小差不多的数据集(n/2),然而分别处理这两个更小的问题,就相当于解决 ...

  9. Intellj IDEA 快捷键冲突

    Intellij IDEA快捷键冲突 [问题描述]: ctr + alt + 方向键 与系统的快捷键冲突,按快捷键,屏幕方向发生改变. [解决办法]: ctr + alt + F12 调用出Intel ...

  10. python第三次作业-mooc笔记

    1.注册中国大学MOOC 2.选择北京理工大学嵩天老师的<Python网络爬虫与信息提取>MOOC课程3.学习完成第0周至第4周的课程内容,并完成各周作业 4.提供图片或网站显示的学习进度 ...