기본 설정_설치 파일
js와 html 파일이 존재하는 경로로 이동하여
npm install -S rtsp-relay express 설치!
jsp
<%@ 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>
</head>
<body>
<canvas id="video1"></canvas>
<canvas id="video2"></canvas>
<script src="resources/JS/cctv.js"></script>
<script type="text/javascript">
var client1 = new WebSocket('ws://localhost:9999');
var canvas1 = document.getElementById('video1');
var player1 = new jsmpeg(client1, {
canvas: canvas1, autoplay:true, audio:false, loop:true
});
var client2 = new WebSocket('ws://localhost:10000');
var canvas2 = document.getElementById('video2');
var player2 = new jsmpeg(client2, {
canvas: canvas2, autoplay:true, audio:false, loop:true
});
</script>
</body>
</html>js
const Stream = require('node-rtsp-stream');
const streamUrl1 = "${rtsp 주소}"; // rtsp 영상 주소가 없다면 아래 첨부해놓은 주소 쓰면됨
stream1 = new Stream({
name: 'foscam_stream',
streamUrl: streamUrl1,
wsPort: 9999, // 10000이나 10001 등으로 안겹칠만한 포트번호로 설정하면 된다.
width: 720,
height: 480
});
const streamUrl2 = "${rtsp 주소2}"; // rtsp 영상 주소가 없다면 아래 첨부해놓은 주소 쓰면됨
stream1 = new Stream({
name: 'foscam_stream',
streamUrl: streamUrl2,
wsPort: 10000, // 10000이나 10001 등으로 안겹칠만한 포트번호로 설정하면 된다.
width: 640,
height: 480
});=> cmd에서는 jstl 언어를 인식하지 못하기 때문에
실시간 영상 frame을 실행할 js 파일을 따로 만들어주었다.
frame 돌릴 js
const Stream = require('node-rtsp-stream');
const streamUrl1 = "rtsp://210.99.70.120:1935/live/cctv004.stream"; // rtsp 영상 주소가 없다면 아래 첨부해놓은 주소 쓰면됨
stream1 = new Stream({
name: 'foscam_stream',
streamUrl: streamUrl1,
wsPort: 9999, // 10000이나 10001 등으로 안겹칠만한 포트번호로 설정하면 된다.
width: 720,
height: 480
});
const streamUrl2 = "rtsp://210.99.70.120:1935/live/cctv001.stream"; // rtsp 영상 주소가 없다면 아래 첨부해놓은 주소 쓰면됨
stream1 = new Stream({
name: 'foscam_stream',
streamUrl: streamUrl2,
wsPort: 10000, // 10000이나 10001 등으로 안겹칠만한 포트번호로 설정하면 된다.
width: 640,
height: 480
});=> 해당 js 파일은 rtsp 실제 주소가 작성되어 있어야한다.
rtsp 실제 주소가 있는 js 폴더로 경로 이동 후
node 'js파일' 실행
아래와 같이 frame이 돌아가는 코드가 보이면 실시간 영상 연결 성공!
'Web > JavaScript' 카테고리의 다른 글
| [JS] 웹에 웹캠 거울버전으로 2개 영상 송출 (0) | 2023.07.19 |
|---|---|
| [JS]웹캠 영상 송출 (0) | 2023.07.19 |
| [NodeJS]rtsp 주소(실시간 영상) 웹으로 불러오기 (0) | 2023.07.17 |
| 카카오맵 API 기초 (0) | 2023.04.25 |
| to do 리스트 실습 (0) | 2023.04.25 |
댓글