비디오 라이브 스트리밍의 경우 초기 단계에서 websocket을 포함하여 많은 솔루션을 연구했지만 여러 가지 이유로 결국 이 솔루션을 채택하지는 않았지만 여전히 학습 경험을 기록하고 싶습니다.
WebSocket은 HTML5가 제공하기 시작한 단일 TCP 연결에서 전이중 통신을 위한 프로토콜입니다.
WebSocket API에서는 브라우저와 서버가 핸드셰이크 작업만 수행하면 브라우저와 서버 사이에 빠른 채널이 형성됩니다. 데이터는 둘 사이에서 직접 전송될 수 있습니다.
브라우저는 JavaScript를 통해 WebSocket 연결을 요청을 서버에 보냅니다. 연결이 설정된 후 클라이언트와 서버는 TCP 연결을 통해 직접 데이터를 교환할 수 있습니다.
웹 소켓 연결을 얻은 후 send() 메서드를 통해 서버에 데이터를 보내고, onmessage 이벤트를 통해 서버에서 반환된 데이터를 받을 수 있습니다.
이 과정에서 주요 아이디어는 녹화 페이지에서 setTimeout()을 사용하여 고정된 간격으로 캔버스를 통해 비디오를 프레임별 이미지로 변환한 다음 websocket의 소켓.send()를 사용하여 이미지 데이터를 보내는 것입니다. 서버. 생방송 페이지에서는 먼저 <img> 구조를 생성하고 websocket의 소켓.onmessage()를 통해 이미지 데이터를 얻어 <img> 태그에 표시하여 생방송을 구성합니다.
첨부코드
비디오 페이지 HTML 구조
<video autoplay id=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>
비디오 페이지 js
<script type=text/javascript charset=utf-8> //+ 인스턴스 생성 var 소켓 = new WebSocket(ws://+document.domain+:8080) var back = document.getElementById('output'); /캔버스에 그리기 위한 환경을 반환합니다. var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var Success = function(stream){ //비디오 스트림을 가져와서 URL로 변환합니다. window.URL.createObjectURL(stream); } //소켓 열기 소켓.onopen = function(){ console.log(열기 성공) } // Canvas 개체에 비디오 프레임을 그리고 Canvas는 육안 비디오 효과를 형성하기 위해 100ms마다 프레임을 전환합니다. var draw = function(){ try{ backcontext.drawImage(video,0,0, back.width, back.height) ; }catch( e){ if (e.name == NS_ERROR_NOT_AVAILABLE) { return setTimeout(draw, 100) } else { throw e; if(video.src){ //Canvas의 내용을 PNG 데이터 URI로 변환하여 서버로 전송하며, 압축 계수는 0.5입니다. 소켓.send(back.toDataURL(image/jpeg, 0.5) } setTimeout(draw) , 100) ; } //기기의 카메라를 호출하고 리소스를 비디오 태그에 넣습니다 navigator.getUserMedia = navigator.webkitGetUserMedia || || navigator.mozGetUserMedia || navigator.getUserMedia({video:true, audio:false}, 성공, console.log);라이브 페이지 HTML 구조:
<img id=수신기 스타일=너비:1600px;높이:900px/>
라이브 페이지 JS
<script type=text/javascript charset=utf-8> //소켓 인스턴스 생성 var receive_socket = new WebSocket(ws://+document.domain+:8008) Alert(ws://+document.domain+:8008) var image = document.getElementById('receiver'); // 메시지 수신 Receiver_socket.onmessage = 함수(데이터) { image.src=data.data } </script> 요약위 내용은 편집자가 소개하는 HTML5의 웹소켓 구현입니다. 궁금한 점이 있으면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!