반응형
- new Date(new Date().getTime() ± 1000*60*60*24*n) = new Date(new Date().valueOf() ± 1000*60*60*24*n)
- ( d => new Date(d.setDate(d.getDate() - 1)) ) (new Date())
반응형
분류 전체보기
- n일 전/후: new Date( new Date().getTime() ± 1000*60*60*24*n ) 2024.03.25 js/js date
- mybatis #{} error 2024.03.22 1 카테고리 없음
- rtsp to web 2024.03.22 카테고리 없음
- scrollTo, scrollIntoView 2024.03.22 카테고리 없음
- react function Cannot access before initialization 2024.03.22 react
- history.push(새로고침X,state유지O) VS window.location.href(새로고침O,state유지X) 2024.03.22 카테고리 없음
- [다중정렬]data.sort((a, b) => a.price - b.price || a.name.localeCompare(b.name)); 2024.03.22 js/js syntax
- 스트리밍 2024.03.07 카테고리 없음
- fixed-point(고정소수점) vs floating-point(부동소수점) precision, scale이 정해지면 fixed, 아니면 floating 2024.03.06 카테고리 없음
- getMaxZIndex 2024.03.04 html, css
n일 전/후: new Date( new Date().getTime() ± 1000*60*60*24*n )
2024. 3. 25. 15:59 [js/js date]
mybatis #{} error
2024. 3. 22. 17:32 [카테고리 없음]
반응형
#{}, ${}이 포함된 부분을 절대 주석처리 하면 안된다.
코드를 작성하다가 사용하지 않는 부분이 생겨 <!-- -->으로 주석처리하는 경우 MyBatis에서 에러를 뱉게 될 수 있다. #{}, ${}으로 변수 바인딩 시켜놓은 부분 때문에 발생하게 된다. 이 에러는 자주 발생하지 않기 때문에 잘 기억하기 어렵고, 에러가 난 상황 전후를 정확히 알고 있지 않으면 다른 에러로 착각하기 쉽기 때문에 정말 주의 해야 한다. 찾기 어려운 에러 중 하나.
문자열 비교 연산시 '(따옴표, Single Quotation), "(쌍따옴표, Double Quotation) 주의 해서 사용해야한다.
MyBatis도 String과 Character의 구분이 있기 때문에, 문자열 비교인 경우는 반드시 ""으로 비교해야한다. 비교값이 한개의 문자인 경우 특별히 주의할 것!
반응형
rtsp to web
2024. 3. 22. 17:30 [카테고리 없음]
반응형
package.json
{
"name": "cctv",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.3",
"node-rtsp-stream": "^0.0.9",
"rtsp-ffmpeg": "^0.0.17",
"socket.io": "^4.7.4",
"ws": "^8.16.0"
}
}
app.js
const Stream = require('node-rtsp-stream')
const stream = new Stream({
name: 'name',
streamUrl: 'rtsp://admin:hikvision!@192.168.3.65:554',//rtsp://210.99.70.120:1935/live/cctv001.stream, rtsp://admin:hikvision!@192.168.3.65:554
//streamUrl: 'rtsp://210.99.70.120:1935/live/cctv001.stream',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 30 // options with required values specify the value after the key
}
})
const app = require('express')(),
server = require('http').Server(app),
io = require('socket.io')(server),
rtsp = require('rtsp-ffmpeg');
server.listen(6148, () => { console.log('Server started on port 6148'); }); //열고싶은 포트번호 입력
//var uri = 'rtsp://210.99.70.120:1935/live/cctv001.stream'
// stream = new rtsp.FFMpeg({ input: uri });
// io.on('connection', function (socket) {
// var pipeStream = function (data) {
// socket.emit('data', data.toString('base64'));
// };
// stream.on('data', pipeStream);
// socket.on('disconnect', function () {
// stream.removeListener('data', pipeStream);
// });
// });
console.log('__dirname',__dirname);
app.get('/', function (req, res) {
res.sendFile(__dirname + '/test.html');
});
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas></canvas>
<script>
var client = new WebSocket('ws://localhost:9999');
var canvas = document.querySelector('canvas');
var player = new jsmpeg(client, {
canvas: canvas
});
</script>
</body>
</html>
정영복N공유링크, 테스트 소스 있으나 이대로 했을 때 ffmpeg 실행에러가 떳음: https://siksik1117.tistory.com/10
- npm install express
- npm install rtsp-ffmpeg: 검색해보니, 윈도우 환경에서는 node로 설치하면 안되고 별도의 ffmpeg를 받아야 한다고 함, 별도로 소스받고 환경변수 설정해서 해결했음
- npm install socket.io: 뭔 때문인지 잘 안되었던 듯 결국 socket.io가 아니라 ws (web socket?)으로 성공했었던듯
express, ws 설치해서 사용하는 소스 나와있음, https://sir.kr/pg_tip/17552
NodeJS로 ffmpeg 사용하여 rtsp 데이터를 websocket 으로 방송하기 > SIR
1. 먼저, Node.js 프로젝트를 설정하고 필요한 패키지를 설치합니다. 예를 들어, `express`와 `ws` 패키지를 사용할 수 있습니다. <br/> <br/> <br/>2. Express를 사용하여 웹 서버를 설정하고 WebSocket 연결을 처
sir.kr
여러 solution을 찾아본 경험과 링크 정리, 실질적 소스는 없음 https://qodbtn.tistory.com/392
웹에서 IP 카메라 스트리밍 하기
카메라는 공유기 포트포워딩해서 RTSP로 접속해서 데이터를 가져오고 있는 상태찾아보면서 너무 오래된 답변이 많아서 고생했다. 목차- VLS 해보기- 이것저것 찾아보기- FFMPEG로 RTSP를 HLS로 변환
qodbtn.tistory.com
ffmpeg, node-rtsp-stream을 이용한 샘플코드 나와있음 (웹서버는 없고 index.html파일에서 rtsp url이 재생되는 page를 만들어내는 부분까지만) https://gps-homepage.tistory.com/12
RTSP 웹 스트리밍 개발 - 1 -
1. VMS(Video Management System)으로 부터 CCTV들의 RTSP를 받아 웹 브라우저에서 출력해야하는 임무를 받게 되었다.(왜 협력해주는 vms에서 rtsp만 지원해주는지는 몰?루) 2. 여러 시도와 폭풍 구글링 끝에
gps-homepage.tistory.com
VLC media player를 사용해서 rtsp재생하는 법, cctv직구해서 AP연결하는 법 https://monocsp.dev/12
4. 컴퓨터에서 공유기와 RTSP를 이용한 CCTV연결(VLC)
이전 포스팅에서 파이썬으로 파일 옮기기를 했었다. 이번에는 RTSP(Real Time Streaming Protocol)를 이용하여 영상을 받아오기로 하자. 외부에서 접근하면 더 좋게 만들 수 있겠지만, 나는 내부망으로 사
monocsp.dev
영어설명, 나름 소스도 있으나 안해봤음 https://dev.to/tejasvi2/rtsp-stream-to-web-browser-using-ffmpeg-1cb
RTSP stream to Web Browser using FFMPEG
If you need to stream your video from the webcam to your browser webpage. To achieve this I have trie...
dev.to
반응형
scrollTo, scrollIntoView
2024. 3. 22. 17:26 [카테고리 없음]
반응형
document.getElementById('idTermsOfUsePopup_dialog-content').scrollTo(document.getElementById('idTermsOfUsePopup_dialog-content').scrollTop,0)
refVerData.current.scrollIntoView({ block: 'start' }) refVerData로 이동하게 됨
setTimeout(() => { document.getElementById('idTermsOfUsePopup_dialog-content').scrollTo(document.getElementById('idTermsOfUsePopup_dialog-content').scrollTop,0) }, 100)
//setTimeout(() => { refVerData.current.scrollIntoView({ block: 'start' }) }, 100)
https://weavingcoding.tistory.com/20
[Javascript+html] scrollTo 안 먹히는 이유 - 찔끔 움직이고 끝나는 이유 / 움직일 스크롤 특정
(업데이트) html, body 둘다 overflow를 먹인채로 scrollTo를 써야하는 경우가 있어서... 좀 더 고심끝에 새로운 방법을 찾았습니다! - 20220802 #1 원인 스크립트가 동작하지 않는다면 가장 먼저 생각해볼
weavingcoding.tistory.com
반응형
react function Cannot access before initialization
2024. 3. 22. 17:24 [react]
반응형
아래 함수를 useEffect(,[])에서 못 부름
위치가 문제인가?
setListData
const setListData = () => {
setCurrent(true);
noticeSeq.current = null;
const query = new Query();
let queryId = '';
if (currentTab === 1) {
queryId = '/cmmNotice/selectFarmFaqList';
}
if (currentTab === 0) {
queryId = '/cmmNotice/selectNoticeList';
}
if (currentTab === 1) {
let checkCategory = [];
let checkboxList, allCheckbox;
allCheckbox = document.querySelector('#checkallFaqType');
checkboxList = document.querySelectorAll('._checkboxFaqType');
if (allCheckbox.checked) {
for (let i = 0; i < checkboxList.length; i++) {
checkCategory.push((checkboxList.item(i)).value)
};
} else {
for (let i = 0; i < checkboxList.length; i++) {
if ((checkboxList.item(i)).checked === true) {
checkCategory.push((checkboxList.item(i)).value)
}
};
}
if (checkCategory.length > 0) {
query.addParams('cond_check_faq_type', checkCategory);
}
srchParamKeyword.current = txtSrchFaq.current.value;
srchParamCond.current = cmbOptCondFaq.current.value;
}
if (currentTab === 0) {
query.addParams('cond_st_dt', getFromDateStr(new Date()));
query.addParams('cond_ed_dt', getFromDateStr(new Date()));
srchParamKeyword.current = txtSrchNotice.current.value;
srchParamCond.current = cmbOptCondNotice.current.value;
}
if (srchParamKeyword.current !== '') {
if (srchParamCond.current === initialData.dsSearchTypeList[1].VALUE) {
query.addParams('cond_title', srchParamKeyword.current);
} else if (srchParamCond.current === initialData.dsSearchTypeList[2].VALUE) {
query.addParams('cond_content', srchParamKeyword.current);
} else if (srchParamCond.current === initialData.dsSearchTypeList[0].VALUE) {
query.addParams('cond_title_content', srchParamKeyword.current);
}
}
query.addParams('cond_use_yn', 'Y');
const dataManager = one.createDataManger(
{
service: 'farmos',
queryId: queryId
}
);
dataManager.executeQuery(
query,
(res) => {
if (currentTab === 1) {
}
if (currentTab === 0) {
}
boardList.current.setBoardList(res.result);
},
(error) => {
const message = one.resMsg(error);
one.alertMsg('', message);
}
)
}
반응형
'react' 카테고리의 다른 글
| Promise결과를 받아서 useMemo에 저장후 사용하려 하면 에러남, useState로 저장후에 useEffect로 감지하려고 해도 에러남 (0) | 2024.04.08 |
|---|---|
| [페이지전환]react-router-dom<Link> window.href.location history.push()... (0) | 2024.03.27 |
| useRef - 여러개일때 배열로 사용하는 방법 (1) | 2024.02.20 |
| [React Jsx Syntax] style="display:none;"에러남 style={{display:'none',...}}로 써야함 (0) | 2024.01.22 |
| react에 css 파일 import할때 css파일내에 문법에러있으면 import에러남 (0) | 2024.01.11 |
history.push(새로고침X,state유지O) VS window.location.href(새로고침O,state유지X)
2024. 3. 22. 17:17 [카테고리 없음]
[다중정렬]data.sort((a, b) => a.price - b.price || a.name.localeCompare(b.name));
2024. 3. 22. 17:16 [js/js syntax]
반응형
data.sort((a, b) => a.price - b.price || a.name.localeCompare(b.name)); // 가격이 낮은 순으로 정렬하고, 가격이 같으면 이름순으로 정렬
반응형
'js > js syntax' 카테고리의 다른 글
스트리밍
2024. 3. 7. 16:38 [카테고리 없음]
반응형
공공데이터포털 http://www.data.go.kr > 교통정보 cctv검색 > 충청남도 천안시_교통정보 CCTV클릭 > 미리보기 정보에 스트리밍 프로토콜 주소 제공함
rtsp://210.99.70.120:1935/live/cctv001.stream
rtmp://210.99.70.120/live/cctv001.stream
스트리밍 프로토콜 주소 http://210.99.70.120:1935/live/cctv001.stream/playlist.m3u8
출처: https://noanomal.tistory.com/101
테스트용 cctv 데이터, 테스트용 스트리밍 주소, rtsp
테스트용 cctv 데이터, 테스트용 스트리밍 주소, rtsp rtsp 주소는 공공데이터 포털에서 찾을 수 있습니다. (www.data.go.kr/) 저는 "교통정보 cctv" 를 검색해서 "충청남도 천안시_교통정보 CCTV"를 선택하
noanomal.tistory.com
https://siksik1117.tistory.com/10
[Node.js] rtsp카메라를 이용해서 웹페이지에서 실시간 스트리밍(CCTV) 서비스 이용하기
ffmpeg를 사용하는 이유 : 웹페이지는 정적인 이미지파일만 사용가능하기 때문에 FFmpeg를 통하며 MJPG파일을 동적인 이미지로 변환하여 전송한다. 소켓통신을 사용하는 이유 : FFmpeg를 통해서 RTSP를
siksik1117.tistory.com
반응형
fixed-point(고정소수점) vs floating-point(부동소수점) precision, scale이 정해지면 fixed, 아니면 floating
2024. 3. 6. 15:54 [카테고리 없음]
getMaxZIndex
2024. 3. 4. 15:42 [html, css]
반응형
maxZIndex : () => {
return Array.from(document.querySelectorAll('.e-dialog'))
.map(a => parseFloat(window.getComputedStyle(a).zIndex))
.filter(a => !isNaN(a))
.sort()
.pop()
},
반응형