JS를 사용하여 로컬 카메라 기능을 호출하는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS를 사용하여 로컬 카메라 기능을 호출하는 단계에 대한 자세한 설명

php中世界最好的语言

May 23, 2018 am 10:13 AM

javascript 카메라 현지의

이번에는 JS로 로컬 카메라 함수를 호출하는 단계에 대해 자세히 설명하겠습니다. JS로 로컬 카메라 함수를 호출할 때 주의사항은 무엇인가요?

오늘은 js를 사용하여 로컬 카메라를 호출하는 방법을 배웠습니다. 실제로 구현하는 것은 크게 어렵지 않습니다. 다음은 Tomcat 서버에 연결한 후 웹 페이지에서 열어서 확인하는 부분입니다. 효과. . 오셔서 즐거운 시간을 보내세요!

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
video {
 border: 1px solid #ccc;
 display: block;
 margin: 0 0 20px 0;
 float:left;
}
canvas {
 margin-top: 20px;
 border: 1px solid #ccc;
 display: block;
}
</style>
</head>
<body>
<video width="640" height="480" id="myVideo"></video>
<canvas width="640" height="480" id="myCanvas"></canvas>
<button id="myButton">截图</button>
<button id="myButton2">预览</button>
<button id="myButton3">
<a download="video.png">另存为</a>
</button>
</body>
<script>
window.addEventListener('DOMContentLoaded',function(){
var cobj=document.getElementById('myCanvas').getContext('2d');
var vobj=document.getElementById('myVideo');
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById('myButton').addEventListener('click',function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById('myButton2').addEventListener('click',function(){
window.open(cobj.canvas.toDataURL("image/png"),'_blank');
},false);
},false);
function getUserMedia(obj,success,error){
if(navigator.getUserMedia){
getUserMedia=function(obj,success,error){
navigator.getUserMedia(obj,function(stream){
success(stream);
},error);
}
}else if(navigator.webkitGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.webkitGetUserMedia(obj,function(stream){
var _URL=window.URL || window.webkitURL;
success(_URL.createObjectURL(stream));
},error);
}
}else if(navigator.mozGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.mozGetUserMedia(obj,function(stream){
success(window.URL.createObjectURL(stream));
},error);
}
}else{
return false;
}
return getUserMedia(obj,success,error);
}
</script>
</html>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7461

Cakephp 튜토리얼

1376

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

Windows Hello가 지원되지 않는 카메라 문제를 해결하는 방법 Jan 05, 2024 pm 05:38 PM

Windows Shello를 사용하는 경우 지원되는 카메라를 찾을 수 없습니다. 일반적인 이유는 사용하는 카메라가 얼굴 인식을 지원하지 않거나 카메라 드라이버가 올바르게 설치되지 않았기 때문입니다. 그럼 설정 방법을 살펴보겠습니다. Windowshello에서 지원되는 카메라 튜토리얼을 찾을 수 없습니다. 이유 1: 카메라 드라이버가 올바르게 설치되지 않았습니다. 1. 일반적으로 Win10 시스템은 다음과 같이 대부분의 카메라에 대한 드라이버를 자동으로 설치할 수 있으며, 카메라를 연결한 후 알림이 표시됩니다. 이때 장치를 열어서 카메라 드라이버가 설치되어 있는지 관리자를 확인하세요. 그렇지 않은 경우 수동으로 설치해야 합니다. WIN+X를 누른 다음 장치 관리자를 선택합니다. 3. 장치 관리자 창에서 카메라 옵션을 확장하면 카메라 드라이버 모델이 표시됩니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

Win11 카메라 문제 해결 방법: Win11 카메라가 작동하지 않는 문제를 해결하는 네 가지 방법 Jan 29, 2024 pm 12:03 PM

카메라는 컴퓨터를 사용할 때 영상 채팅을 수행하는 데 도움이 되는 도구이지만, 많은 사용자는 win11 시스템을 사용할 때 카메라를 사용할 수 없다는 사실을 알게 됩니다. 사용자는 문제 해결사로 이동하여 카메라 작동 권한을 설정하거나 확인할 수 있습니다. 이 사이트에서는 Win11 카메라를 사용할 수 없는 문제에 대한 네 가지 해결 방법을 사용자에게 주의 깊게 소개합니다. Win11 카메라가 작동하지 않는 네 가지 해결 방법 해결 방법 1. 내장된 문제 해결사 사용 1. +를 눌러 설정을 연 다음 시스템 탭에서 문제 해결을 클릭합니다. Windows I4의 경우 화면의 지시에 따라 문제 해결 프로세스를 완료하고 권장 사항을 변경하십시오. 5. 사용

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

카메라 여는 방법 Win7 카메라 여는 방법을 가르쳐주세요. Jan 11, 2024 pm 07:48 PM

Win7 시스템에서는 카메라 단축키를 찾을 수 없고 프로그램에서만 카메라 기능을 호출할 수 있는 경우가 있습니다. 필요하신 분들께 드립니다. Win7 사용자분들이 카메라 사용시 많은 불편을 겪으셨습니다. 다음으로, 편집자는 Win7 카메라를 여는 방법에 대한 튜토리얼을 가져올 것입니다. 노트북을 사용하는 사용자라면 노트북에 카메라 기능이 내장되어 있다는 사실은 다들 아실 겁니다. 카메라를 연결해야 하는 데스크톱 컴퓨터와 달리 노트북 win7 시스템에서는 카메라를 바로 열어서 사용할 수 있어 매우 편리합니다. 그러나 일부 사용자는 일반적으로 탐색을 시도하지 않고 다양한 방법을 시도하지만 여전히 실패합니다. 이제 편집기에서 Win7 카메라를 여는 방법을 알려줄 것입니다.

소다 음악에 현지 음악을 추가하는 방법 Feb 23, 2024 pm 07:13 PM

Soda Music에 지역 음악을 추가하는 방법 Soda Music APP에 좋아하는 지역 음악을 추가할 수 있지만 대부분의 친구들은 지역 음악을 추가하는 방법을 모릅니다. 다음은 Soda Music에 지역 음악을 추가하는 방법에 대한 그래픽 튜토리얼입니다. 편집자 여러분, 관심 있는 사용자가 와서 살펴보세요! 소다 음악 사용에 대한 튜토리얼 소다 음악에 로컬 음악을 추가하는 방법 1. 먼저 소다 음악 앱을 열고 메인 페이지 하단의 [음악] 기능 영역을 클릭합니다. 오른쪽 하단에 있는 [점 3개] 아이콘 3. 마지막으로 아래 기능 표시줄을 확장하고 [다운로드] 버튼을 선택하여 로컬 음악에 추가합니다.

win10에서 카메라를 열고 사진을 찍는 방법 Jan 16, 2024 pm 10:06 PM

손에 휴대폰이 없고 컴퓨터만 있는데 사진을 찍어야 한다면 컴퓨터와 함께 제공되는 카메라를 사용하여 사진을 찍을 수 있습니다. 그렇다면 Win10 카메라를 열어 사진을 찍으려면 어떻게 해야 할까요? 사실 카메라 앱만 다운로드하면 됩니다. Win10 카메라를 열어 사진을 찍는 방법: 1. 먼저 단축키 "Win+i"를 사용하여 설정을 엽니다. 2. 앱을 연 후 '개인정보' 설정으로 들어갑니다. 3. 그런 다음 "카메라" 애플리케이션 권한에서 접근 권한을 활성화하세요. 4. 연 후에는 "카메라" 애플리케이션만 열면 됩니다. (그렇지 않은 경우 Microsoft 스토어에 가서 다운로드할 수 있습니다.) 5. 컴퓨터에 내장 카메라가 있거나 외장 카메라가 설치되어 있으면 열어서 사진을 찍을 수 있습니다. (카메라가 설치되어 있지 않아 시연을 할 수 없습니다.)

See all articles

JS를 사용하여 로컬 카메라 기능을 호출하는 단계에 대한 자세한 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제