html 调用pc摄像头,HTML调用PC摄像头

使用HTML５中的canvas和video技术实现调用PC摄像头

1.[代码][HTML]代码

HTML5调用电脑摄像头实例

window.addEventListener("DOMContentLoaded", function() {

// Grab elements, create settings, etc.

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

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

video = document.getElementById("video"),

videoObj = { "video": true },

errBack = function(error) {

console.log("Video capture error: ", error.code);

};

// Put video listeners into place

if(navigator.getUserMedia) { // Standard

//alert("支持navigator.getUserMedia");

navigator.getUserMedia(videoObj, function(stream) {

video.src = stream;

video.play();

}, errBack);

} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed

//alert("支持navigator.webkitGetUserMedia");

navigator.webkitGetUserMedia(videoObj, function(stream){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errBack);

}

else if(navigator.mozGetUserMedia) { // Firefox-prefixed

//alert("支持navigator.mozGetUserMedia");

navigator.mozGetUserMedia(videoObj, function(stream){

video.src = window.URL.createObjectURL(stream);

video.play();

}, errBack);

}

// 触发拍照动作

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

context.drawImage(video, 0, 0, 640, 480);

});

}, false);

点击拍照

html 调用pc摄像头,HTML调用PC摄像头相关推荐

delphi XE 10实现App和PC下TreeView调用ImageList和Sqlite数据
delphi XE 10实现App和PC下TreeView调用ImageList和Sqlite数据一.工程 program TreeView; usesSystem.StartUpCopy,FMX. ...
python+opencv用电脑调用手机摄像头或其他网路摄像头
python+opencv用电脑调用手机摄像头或其他网路摄像头文章目录: 1 获取手机摄像头或网络摄像头的ip 1.1 获取手机摄像头的ip 1.2 获取网络摄像头的IP 1.3 关于RTSP协议 ...
HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试
为什么80%的码农都做不了架构师?>>> 但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容.新的A ...
软件c#语言调用摄像头,C#调用摄像头的几种方式
C#调用摄像头的方式本文将讲诉在C#的winform程序中如何调用摄像头: 1.调用USB摄像头 2.调用普通IP摄像头 3.通过摄像头SDK进行调用使用的DLL 首先给上我所使用的DLL 调用U ...
PC端页面调用QQ聊天 - 封装篇
PC端页面调用QQ聊天 - 封装篇今天收到网页留言,说因为兼容性的问题,他提供了有新的调用QQ代码的方式. 这里苏查了一下别人的源码,研究学习了一下.剥离贴出来,供大家参考学习. 来自用户tyj10 ...
python opencv 摄像头_python+opencv实现摄像头调用的方法
最近入了一块树莓派,想让其实现摄像头的调用,因此写下此博客备忘一.树莓派网络的配置首先,对树莓派进行网络配置,否则就无法进行软件的安装我们知道,ifconfig命令可以修改ip地址.子网掩码等信 ...
html5 android6.0摄像头,HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试...
但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容.新的API更替为MediaDevices.getUserMedia.Me ...
opencv python 调用摄像头_python+opencv实现摄像头调用的方法
最近入了一块树莓派,想让其实现摄像头的调用,因此写下此博客备忘一.树莓派网络的配置首先,对树莓派进行网络配置,否则就无法进行软件的安装我们知道,ifconfig命令可以修改ip地址.子网掩码等信 ...
linux qt调用摄像头,Qt5下实现摄像头预览及捕获图像方法实例
Step4:修改mainwindow.cpp 源码如下 #include "mainwindow.h" #include "ui_mainwindow.h" M ...
荣品RP4412开发板摄像头驱动调用及对焦控制
1.关于更换不同摄像头驱动调用问题. 问:RP4412开发板,我用的摄像头640*480图像预览时OK的,但是我调用1280*720的初始化预览,摄像头没有图像了,是不是camera程序也需要修改? ...

html 调用pc摄像头,HTML调用PC摄像头

html 调用pc摄像头,HTML调用PC摄像头相关推荐

最新文章

热门文章