334. (TWOK/ERROR) [JavaScript] SecurityError: HTMLMediaElement: Cannot capture .. cross-origin data

---

[환경 설정 및 설명]

​

프로그램 : Web / Chrome

​

설 명 : [JavaScript] SecurityError: HTMLMediaElement: Cannot capture .. cross-origin data

 

---

[설 명]

​

--------------------------------------------------------------------------
[개발 및 테스트 환경]
--------------------------------------------------------------------------

- 제목 : [JavaScript] SecurityError: HTMLMediaElement: Cannot capture .. cross-origin data


- 테스트 환경 : PC / Web / Chrome / JavaScript


- 사전) HTMLVideoElement.captureStream() 간략 설명 : 

  >> HTMLVideoElement.captureStream() 은 HTML5 <video> 태그에서 재생 중인 비디오 콘텐츠를 실시간으로 캡처하여 MediaStream 객체로 반환하는 기능입니다

  >> HTMLVideoElement.captureStream() 의 스트림은 WebRTC나 MediaRecorder API 등과 함께 사용할 수 있어, 비디오를 녹화하거나 다른 피어로 전송하는 데 활용됩니다

  >> 기본 사용 방법 : 

    const video = document.querySelector('video');
    const stream = video.captureStream();

    localStream.getTracks().forEach(track => peerConnection.addTrack(track, stream)); // [스트림 트랙에 추가]

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[에러 원인]
--------------------------------------------------------------------------

1. 자바스크립트에서 HTML5 <video> 태그에서 captureStream() 메서드를 사용할 때 CORS (Cross-Origin Resource Sharing) 정책을 위반했기 때문에 발생하는 에러 이슈


2. 에러 로그 전문 : 

  >> Uncaught (in promise) SecurityError: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data


3. HTML 페이지에 선언 된 Video 태그 및 자바스크립트 비디오 재생 소스 코드 : 

  Body : <video autoplay="true" id="remoteView"></video>

  JavaScript : 

  const videoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";

  const remoteView = document.getElementById("remoteView");
  remoteView.controls = true; // 컨트롤 박스 표시

  remoteView.src = videoUrl;
  remoteView.play();

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[해결 방법]
--------------------------------------------------------------------------

[방법] : [1] : 서버에서 CORS 허용

  >> 외부 비디오 파일을 제공하는 서버가 다음과 같은 헤더를 포함해야 합니다

  >> 모든 도메인 허용 : Access-Control-Allow-Origin: *

  >> 특정 도메인만 허용 : Access-Control-Allow-Origin: https://yourdomain.com


[방법] : [2] : crossorigin 속성 사용

  >> HTML <video> 태그에 crossorigin 속성을 추가하면 브라우저가 CORS 요청을 시도합니다

  >> <video autoplay="true" crossorigin="anonymous" id="remoteView"></video>


[방법] : [3] : 프록시 서버 사용

  >> 외부 비디오를 직접 불러오는 대신, 자신의 서버를 통해 프록시하여 같은 origin에서 제공되도록 하면 CORS 문제가 해결됩니다

  >> 클라이언트 → https://yourdomain.com/proxy/video.mp4
     서버 → https://example.com/video.mp4를 받아서 전달


[참고 사항] : 

  >> CORS 정책은 브라우저 보안의 핵심이므로, 무조건 우회하거나 비활성화할 수는 없습니다.

  >> captureStream()은 DRM 보호 콘텐츠나 일부 브라우저에서는 제한될 수 있습니다.

--------------------------------------------------------------------------





--------------------------------------------------------------------------
[참고 사이트]
--------------------------------------------------------------------------

[참고 사이트] 온라인 http 동영상 플레이 주소 정리

https://blog.naver.com/kkh0977/222905245056?trackingCode=blog_bloghome_searchlist


[HTMLMediaElement: captureStream() 메소드 설명]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream

--------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://blog.naver.com/kkh0977/222905245056?trackingCode=blog_bloghome_searchlist

44. [참고 사이트] 온라인 http 동영상 플레이 주소 정리

---