반응형
react-router-dom
반응형
저작자표시

'react' 카테고리의 다른 글

react map key 설정안해주면 eiSettings + - 제대로 동작안했던듯  (0) 2024.05.14
Promise결과를 받아서 useMemo에 저장후 사용하려 하면 에러남, useState로 저장후에 useEffect로 감지하려고 해도 에러남  (0) 2024.04.08
react function Cannot access before initialization  (0) 2024.03.22
useRef - 여러개일때 배열로 사용하는 방법  (1) 2024.02.20
[React Jsx Syntax] style="display:none;"에러남 style={{display:'none',...}}로 써야함  (0) 2024.01.22
반응형
반응형
저작자표시

'js > js date' 카테고리의 다른 글

[date->string]YYYY-MM-DD: new Date().toISOString().slice(0,10), moment를 쓴다면 moment().format("YYYY-MM-DD")  (0) 2024.04.17
[string->date]moment를 쓰면 moment('20240101'), moment('2024-01-02') 모두 가능, 안쓰면 new Date('20240101') 불가능  (0) 2024.04.17
이달 마지막날: ( d=> new Date(d.getFullYear(), d.getMonth()+1, 0) ) (new Date()) 날짜자리에 0,음수사용가능  (0) 2024.03.25
이달 첫날: ( d=> new Date(d.getFullYear(), d.getMonth(), 1) ) (new Date())  (0) 2024.03.25
n일 전/후: new Date( new Date().getTime() ± 1000*60*60*24*n )  (0) 2024.03.25
반응형
반응형
저작자표시

'js > js date' 카테고리의 다른 글

[string->date]moment를 쓰면 moment('20240101'), moment('2024-01-02') 모두 가능, 안쓰면 new Date('20240101') 불가능  (0) 2024.04.17
오늘 0시: new Date( new Date().setHours(0, 0, 0, 0) )  (0) 2024.03.25
이달 첫날: ( d=> new Date(d.getFullYear(), d.getMonth(), 1) ) (new Date())  (0) 2024.03.25
n일 전/후: new Date( new Date().getTime() ± 1000*60*60*24*n )  (0) 2024.03.25
n분 전,n시간 전, n일 전, n주 전, n개월 전, n년 전 - js구현방법  (0) 2024.02.16
반응형
반응형
저작자표시

'js > js date' 카테고리의 다른 글

[string->date]moment를 쓰면 moment('20240101'), moment('2024-01-02') 모두 가능, 안쓰면 new Date('20240101') 불가능  (0) 2024.04.17
오늘 0시: new Date( new Date().setHours(0, 0, 0, 0) )  (0) 2024.03.25
이달 마지막날: ( d=> new Date(d.getFullYear(), d.getMonth()+1, 0) ) (new Date()) 날짜자리에 0,음수사용가능  (0) 2024.03.25
n일 전/후: new Date( new Date().getTime() ± 1000*60*60*24*n )  (0) 2024.03.25
n분 전,n시간 전, n일 전, n주 전, n개월 전, n년 전 - js구현방법  (0) 2024.02.16
반응형
  • 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())
반응형
저작자표시

'js > js date' 카테고리의 다른 글

[string->date]moment를 쓰면 moment('20240101'), moment('2024-01-02') 모두 가능, 안쓰면 new Date('20240101') 불가능  (0) 2024.04.17
오늘 0시: new Date( new Date().setHours(0, 0, 0, 0) )  (0) 2024.03.25
이달 마지막날: ( d=> new Date(d.getFullYear(), d.getMonth()+1, 0) ) (new Date()) 날짜자리에 0,음수사용가능  (0) 2024.03.25
이달 첫날: ( d=> new Date(d.getFullYear(), d.getMonth(), 1) ) (new Date())  (0) 2024.03.25
n분 전,n시간 전, n일 전, n주 전, n개월 전, n년 전 - js구현방법  (0) 2024.02.16
반응형

#{}, ${}이 포함된 부분을 절대 주석처리 하면 안된다.
 코드를 작성하다가 사용하지 않는 부분이 생겨 <!-- -->으로 주석처리하는 경우 MyBatis에서 에러를 뱉게 될 수 있다. #{}, ${}으로 변수 바인딩 시켜놓은 부분 때문에 발생하게 된다. 이 에러는 자주 발생하지 않기 때문에 잘 기억하기 어렵고, 에러가 난 상황 전후를 정확히 알고 있지 않으면 다른 에러로 착각하기 쉽기 때문에 정말 주의 해야 한다. 찾기 어려운 에러 중 하나.
문자열 비교 연산시 '(따옴표, Single Quotation), "(쌍따옴표, Double Quotation) 주의 해서 사용해야한다.
   MyBatis도 String과 Character의 구분이 있기 때문에, 문자열 비교인 경우는 반드시 ""으로 비교해야한다. 비교값이 한개의 문자인 경우 특별히 주의할 것!

반응형
저작자표시
반응형

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

 

반응형
저작자표시
반응형

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

 

반응형
저작자표시
반응형

아래 함수를 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 VS window.location.href

https://duckgugong.tistory.com/197

 

반응형
저작자표시

+ Recent posts

티스토리툴바