[Web] 웹 브라우저 권한 설정 (알림, 비디오)

웹 브라우저에서 알림 기능을 지원하는지 확인

if('Notification' in window) {
  console.log('지원함');
} else {
  console.log('지원 안 함함')
}

---

알림 권한 요청

// 알림 기능을 브라우저에서 지원하면, 권한을 요청
Notification.requestPermission().then(permission => {
console.log(permission);
})

 

---

알림 띄우기

<button id="noti">버튼</button>
<script>
const noti = document.querySelector('#noti');
noti.addEventListener('click', () => {
  console.log('실행');
  const notification = new Notification('제목', { body: '내용' });
})

// 웹 브라우저에서 알림 기능을 지원하는지 확인
if ('Notification' in window) {
  console.log('지원함');

  // 알림 기능을 브라우저에서 지원하면, 권한을 요청
  Notification.requestPermission().then(permission => {
    console.log(permission);
  })

} else {
  console.log('지원 안 함')
}
</script>

 

알림 내용 수정 (이미지 띄우기)

const noti = document.querySelector('#noti');
noti.addEventListener('click', () => {
  console.log('실행');
  const notification = new Notification('제목', { 
    body: '내용',
    icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_5vmjPA2SvagWqCNABAcAPnIrcw7vp4zk4A&s",
    image: "https://image.utoimage.com/preview/cp872722/2022/12/202212008555_206.jpg"
  });

  notification.addEventListener('click', () => {
    window.open('https://www.naver.com');
  })
})

 

 

---

비디오 권한 설정

비디오 권한을 설정해주고,

video 라는 태그를 사용해서 비디오를 띄워준다.

 

window.navigator.mediaDevices = 마우스, 스피커 등

<video id="video"></video>

<button id="start">시작</button>
<script>
const start = document.querySelector('#start');
start.addEventListener('click', async () => {
  console.log('start');
  const stream = await window.navigator.mediaDevices.getUserMedia({ video: true });
  const video = document.querySelector('#video');
  video.srcObject = stream;
  video.autoplay = true;
})
</script>

짜잔