Vonage Video API를 사용하여 비디오에 오버레이 추가

15626 단어 videojavascriptapi
Vonage Video 게시자를 만들 때 비디오 스트림은 사용자 카메라, <video> 요소 또는 HTML<canvas> 요소에서 직접 가져올 수 있습니다. 픽셀이 캔버스에 그려지면 Video API 세션에서 사용되기 전에 쉽게 조작할 수 있습니다.

이 자습서에서는 화상 통화에 포함할 수 있는 텍스트 또는 이미지 오버레이를 카메라 이미지에 추가하는 방법을 알아봅니다.

프로젝트가 작동하려면 몇 가지 구성 요소가 필요합니다. 첫째, <video> 요소는 사용자의 카메라에서 스트림을 가져옵니다. 각 프레임, 비디오 요소는 캔버스에 그려지며 여기에 텍스트나 이미지를 추가합니다. 캔버스에 원하는 출력이 있으면 캔버스를 Vonage Video API 게시자의 소스로 사용할 수 있으며 친구와의 비디오 세션에서 사용할 수 있습니다.

완성된 코드를 보려면 https://github.com/nexmo-community/video-overlay 에서 찾을 수 있습니다.

비계 마크업



새 프로젝트 폴더와 새 파일 index.html을 만들고 이 파일을 다음 코드로 채웁니다.

<!DOCTYPE html>
<html>
<head></head>
<body>
  <video id="v1" width="320" height="240" autoplay></video>
  <canvas id="c1" width="320" height="240"></canvas>
  <canvas id="c2" width="320" height="240"></canvas>
  <div id="vonage-publishers"></div>
  <div id="vonage-subscribers"></div>
  <script>
    // Create references to the video and canvas elements
    const v1 = document.getElementById('v1')
    const c1 = document.getElementById('c1')
    const c2 = document.getElementById('c2')
    // Get canvas contexts
    const c1Ctx = c1.getContext('2d')
    const c2Ctx = c2.getContext('2d')
  </script>
</body>
</html>


이 자습서에서는 첫 번째 캔버스c1에 텍스트를 추가하고 두 번째 캔버스c2에 이미지 오버레이를 추가합니다.

웹캠 비디오 가져오기


<video> 요소의 소스를 사용자 웹캠의 스트림으로 설정합니다. 이 스니펫은 기본 카메라를 선택합니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => { v1.srcObject = stream })


모든 프레임에서 함수 실행



빈addText() 함수를 만듭니다. 사용자의 비디오 장치가 준비되고 '재생'되면 매 프레임마다 함수를 실행합니다.

v1.addEventListener('play', () => {
  setInterval(addText, 0)
  setInterval(addImage, 0)
})
function addText() {
}
function addImage() {
}


캔버스에 비디오 스트림 및 텍스트 그리기



업데이트addText():

function addText() {
  // User Video
  c1Ctx.drawImage(v1, 0, 0, 320, 240)
  // Rectangle
  c1Ctx.beginPath();
  c1Ctx.fillStyle = "#584fa8";
  c1Ctx.rect(0, 190, 155, 40); // x, y of top-left, width, height
  c1Ctx.fill();
  // Text
  c1Ctx.font = "20px Monospace";
  c1Ctx.fillStyle = "white";
  c1Ctx.fillText("Kevin Lewis", 10, 215); // x, y of top-left
}


브라우저를 새로 고치면 이제 텍스트가 캔버스에 오버레이되는 것을 볼 수 있습니다.



캔버스에 비디오 스트림 및 이미지 그리기



먼저 <script> 태그 상단에서 오버레이에 사용할 이미지를 로드합니다.

const overlayImg = new Image()
overlayImg.src = 'vonage.png'


그런 다음 업데이트addImage():

function addImage() {
  // User Video
  c2Ctx.drawImage(v1, 0, 0, 320, 240)
  // Overlay Image
  c2Ctx.drawImage(overlayImg, 10, 10, 35, 30) // x, y of top-left, width, height
}


귀하의 페이지는 다음과 같아야 합니다.



비디오 API 세션에 캔버스 포함



Vonage Video Dashboard에서 새 프로젝트를 만듭니다. 일단 생성되면 프로젝트 도구까지 아래로 스크롤하여 새 라우팅 세션을 생성합니다. 세션 ID를 가져오고 새 토큰을 만듭니다.
<script> 맨 위에 프로젝트 대시보드의 데이터를 사용하여 세 개의 새 변수를 만듭니다.

const sessionId = 'YOUR_SESSION_ID'
const apiKey = 'YOUR_PROJECT_API_KEY'
const token = 'YOUR_TOKEN'


그런 다음 Vonage Video API Client SDK page에서 <script> 태그를 복사하여 기존 <script> 태그 위에 놓습니다.
<script> 태그 하단에서 기본 Vonage Video API 세션을 초기화하고 두 번째 캔버스에서 게시합니다.

// Initialize session
const session = OT.initSession(apiKey, sessionId)
// Create publisher
const publisher = OT.initPublisher("vonage-publishers", {
  // c1 is the text canvas. Substitute c2 if you want to use the overlay canvas.
  videoSource: c1.captureStream().getVideoTracks()[0],
  width: 320,
  height: 240
})
// Once connected to session, publish the publisher
session.connect(token, () => {
  session.publish(publisher)
})
// Show other users' streams
session.on('streamCreated', event => {
  session.subscribe(event.stream, "vonage-subscribers")
})


요소 숨기기



이 작업을 수행하려면 <video> 및 <canvas> 요소가 필요하지만 웹 페이지에 표시되는 것을 원하지 않을 수 있습니다. <head> 에서 다음 CSS를 추가하여 숨깁니다.

<style>
  #v1, #c1, #c2 { display: none }
</style>


비디오를 어떻게 멋지게 꾸밀 것입니까?



바라건대, 이 블로그 게시물이 유용하다는 것을 알았고 이제 마음에 드는 콘텐츠에 대한 사용자 지정 오버레이를 만들 수 있습니다. 이미지의 크기와 위치를 변경하거나 사용자가 직접 편집하도록 선택할 수 있습니다.

https://github.com/nexmo-community/video-overlay에서 최종 프로젝트를 찾을 수 있습니다.

언제나처럼 지원이 필요하시면 언제든지 Vonage Developer Community Slack으로 연락해 주세요. 그곳에서 뵙기를 바랍니다.
【전잔의 길】 마이크로서비스 과정 9_Ribbon 심층 분석
ASyncChannel 클래스 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage