pc端调起电脑的摄像头进行拍照功能

我的需求是在电脑端调起电脑上面的摄像头，有可能是电脑自带的摄像头也可能是插入的USB摄像头
下面这个是如果用户有两个摄像头的话，会将这两个摄像头都列出来，用户可以自己选择使用哪个摄像头。
下面是html代码

<div id="container">
<div class="select">
<label for="audioSource">Audio source: </label><select id="audioSource"></select>
</div><div class="select">
<label for="videoSource">Video source: </label><select id="videoSource"></select>
</div></div>
<div id="promoNode"></div>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

下面是javascript代码

//调用摄像头var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var video = document.getElementById('video');var mediaConfig = { video: true };var errBack = function (e) {console.log('An error has occurred!', e)};// Put video listeners into placeif (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {//video.src = window.URL.createObjectURL(stream);video.srcObject = stream;video.play();});}/* Legacy code below! */else if (navigator.getUserMedia) { // Standardnavigator.getUserMedia(mediaConfig, function (stream) {video.src = stream;video.play();}, errBack);} else if (navigator.webkitGetUserMedia) { // WebKit-prefixednavigator.webkitGetUserMedia(mediaConfig, function (stream) {video.src = window.webkitURL.createObjectURL(stream);video.play();}, errBack);} else if (navigator.mozGetUserMedia) { // Mozilla-prefixednavigator.mozGetUserMedia(mediaConfig, function (stream) {video.src = window.URL.createObjectURL(stream);video.play();}, errBack);}// Trigger photo takedocument.getElementById('snap').addEventListener('click', function () {context.drawImage(video, 0, 0, 250, 200);var ImageData = canvas.toDataURL('Image/jpeg', 1);//获取canvas中绘制的数据document.getElementById("show-img").src = ImageData;//将canvas中的数据转化为图片显示$('.show-img').show();var blob = base64DateUrlToBlob(ImageData, 'image/jpeg');//将图片转为二进制});var videoElement = document.querySelector('video');var videoSelect = document.querySelector('select#videoSource');navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);videoSelect.onchange = getStream;function gotDevices(deviceInfos) {for (var i = 0; i !== deviceInfos.length; ++i) {var deviceInfo = deviceInfos[i];var option = document.createElement('option');option.value = deviceInfo.deviceId;if (deviceInfo.kind === 'videoinput') {option.text = deviceInfo.label || 'camera ' +(videoSelect.length + 1);videoSelect.appendChild(option);} else {// console.log('Found one other kind of source/device: ', deviceInfo);}}}function getStream() {if (window.stream) {window.stream.getTracks().forEach(function (track) {track.stop();});}var constraints = {video: {deviceId: { exact: videoSelect.value }}};navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError);}function gotStream(stream) {window.stream = stream; // make stream available to consolevideoElement.srcObject = stream;}function handleError(error) {//console.log('Error: ', error);}function base64DateUrlToBlob(base64DataUrl, type) {//去掉url的头，并转换为bytesvar bytes = window.atob(base64DataUrl.split(',')[1]);//处理异常,将ascii码小于0的转换为大于0var ab = new ArrayBuffer(bytes.length);var ia = new Uint8Array(ab);for (var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob([ab], { type: type });}

下面是调用用户电脑上面自带的摄像头
html代码如下

<div class="box"><video src=""></video><button class='shot'>拍照</button><canvas id='canvas'></canvas><img src=''></div>

javascript代码如下
要引入这个文件

 var constraints = {audio: true, video: {width: 200,height: 250}};// 开启视频navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {console.log('getUserMedia:', mediaStream)var video = document.querySelector('video');video.srcObject = mediaStream;video.onloadedmetadata = function(e) {video.play();};// 使用canvas进行拍照var canvas = document.getElementById('canvas')$('button').on('click', function () {canvas.getContext('2d').drawImage(video, 0, 0, 200, 250);$('img').css('src', canvas.toDataURL("image/png"))})}).catch(function(err) {console.log(err.name + ": " + err.message);});

还有一篇讲的很详细的文章，要想深入了解的可以参考：https://www.html5rocks.com/en/tutorials/getusermedia/intro/

pc端调起电脑的摄像头进行拍照功能相关推荐

计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
使用微信PC端的截图dll库实现微信截图功能(C++ Builder实现)
使用微信PC端的截图dll库实现微信截图功能(C++ Builder实现) 网上有很多文章说"使用微信PC端的截图dll库实现微信截图功能",我用node实现截图也要用一下,于是找 ...
C#摄像头实现拍照功能的简单代码示例
C#摄像头实现拍照功能的简单代码示例 2009-11-20 来自:网上整理字体大小:[大中小] ·摘要:这里将介绍一个C#摄像头实现拍照功能的简单代码示例,代码虽然不短,但是基本上实现了相对应的功能 ...
调用PC端、手机、平板摄像头拍照
调用PC端摄像头拍照 HTML代码: <div id="android-camera"><input type="button" title= ...
pc端ui图片尺寸_pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
现在计算机常用的分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
html电脑屏幕尺寸,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
(@media 响应式PC端媒体查询)电脑屏幕分辨率尺寸大全
PC端按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.14.1寸.15寸; ) 128 ...
pc端文本_使用即将推出的Windows功能从PC发送文本
pc端文本 Windows/Android/iPhone: Send and receive SMS messages on your PC, and access all the files on ...

pc端调起电脑的摄像头进行拍照功能

pc端调起电脑的摄像头进行拍照功能相关推荐

最新文章

热门文章