实现效果：

代码如下：

<!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. 【Unity】 关于Package Manager 无限加载的问题(Loading Packages)，以及可能的解决办法（待补充。）

    ·版本:2019.1.8f 官方论坛对于此问题的讨论:地址>Package Manager 许多人都遇到了这个问题,但是无法定位问题出在哪里.官方技术人员提供了一个名为 Package Mana ...

  2. SAP 不支持交货单中同一个物料多个行项目HU与序列号组合发货场景

    SAP 不支持交货单中同一个物料多个行项目HU与序列号组合发货场景 笔者所在的项目里,后勤业务启用了序列号管理,Handling Unit Manager以及批次号管理.不同的物料分别启用序列号管理, ...

  3. Flutter中通过https post Json接收Json

    Flutter 已然成为炙手可热前端框架.若问跨平台到底有多香,自然是要多香有多香.今天我就分享这些天研究Flutter http连接和json格式转换的内容,小弟对Flutter也是小白一名,如有错 ...

  4. 如何判断Linux系统安装在VMware上?

    如何判断当前Linux系统是否安装在VMware上面呢? 因为公司大部分服务器位于VMware上,也有小部分系统部署在物理机上面.今天老大要求统计一下VMware和物理机上服务器的数量,个人简单测试. ...

  5. tornado的IOLoop.instance()方法和IOLoop.current()方法区别

    在使用tornado时,经常有人疑惑IOLoop.instance()方法和IOLoop.current()方法的区别是什么. IOLoop.instance() 返回一个全局 IOLoop实例. 大 ...

  6. C# List<T> 转 DataTable

    C# List<T>转DataTable 学习自:博客园 Overview 数据!!个人认为程序就是将数据变着花样的显示它.那么这个时候我们的数据处理和获取就时我们的关键一步,如果你数据都 ...

  7. python request获取ip、获取登录设备

    from flask import request 获取ip request.remote_addr 获取登录设备 request.user_agent.string

  8. umi+dva+antd新建项目(亲测可用)

    首先全局安装dva+umiumi:npm install -g umidva:npm install -g dva-cli 通过脚手架创建项目 一: mkdir myapp && cd ...

  9. openpyxl常用API

    worksheet.cell(self, row, column, value=None)描述:给指定位置的单元格赋值参数: row&column:必须参数,单元格的坐标 value:可选参数 ...

  10. 【Linux命令】nohup命令用法

    nohup命令用法 当我们想将某个脚本或程序运行在后台的时候.我们一般会在程序或脚本后面添加 & 字符来表示在后台运行,但使用& 运行在后台,当我们将shell窗口关闭时,该脚本或程序 ...