<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="resources/css/main.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmpeg/0.1/jsmpg.js"></script>
<title>메인페이지</title>
<style type="text/css">
#videoElement, #mirrored{
width: 500px;
height: 375px;
background-color: #666;
display: inline-block;
}
</style>
</head>
<body>
<div class="videoPlayer">
<video autoplay="true" id="videoElement">
<canvas class="canvas" id="mirrored"></canvas>
</div>
<script type="text/javascript">
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("Something went wrong!");
});
}
</script>
</body>
</html>
참고 블로그
'Web > JavaScript' 카테고리의 다른 글
| [JS] 그래프 연동 (0) | 2023.08.04 |
|---|---|
| [JS] 웹에 웹캠 거울버전으로 2개 영상 송출 (0) | 2023.07.19 |
| [NodeJS] nodejs로 한 화면에 2개의 rtsp 영상 송신 (0) | 2023.07.18 |
| [NodeJS]rtsp 주소(실시간 영상) 웹으로 불러오기 (0) | 2023.07.17 |
| 카카오맵 API 기초 (0) | 2023.04.25 |
댓글