zoom video sdk 녹화 (canvas+audio dom+webcam)

By | 2021년 10월 22일

zoom 녹화 기능 구현

@zoom/videosdk 1.1.4 기준

zoom video sdk 에서 녹화가 없어서 직접 구현한다.

현재기준 sdk에 stream 관련 api는 없으므로 웹페이지에서 영상을 저장하고

vanila javascript로 접근한다.

canvas, audio, webcam 를 합쳐서 영상을 만든다.

화면 -> canvas

음성 -> audio dom (본인목소리 제외한음성) + webcam audio (본인목소리)

화면 캡쳐 (zoom 이 렌더링중인 canvas)

      const canvasStream = canvas.captureStream();

음성 캡쳐1 (zoom client audio dom)

zoom 객체 내부에서 audio dom 을 찾는다.

      const findSymbol = function (object, symbolName) {
        const prop = Object.getOwnPropertySymbols(object)
          .filter((x) => x.toString() == symbolName)
          .pop();
        if (!prop) return null;
        return object[prop];
      };

      const streamSymbol = findSymbol(client.stream, 'Symbol(stream)');
      const mediaCtx = findSymbol(streamSymbol, 'Symbol(mediaContext)');
      const audioDomNode = mediaCtx.mediaAgent.instance.audioDomNode;
      if (audioDomNode) {
        const audioStream = audioDomNode.captureStream();
      }

음성 캡쳐2 (webcam audio)

      const camAudioStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });

음성1,2 믹스

        const audioCtx = new AudioContext();
        const mixedDest = audioCtx.createMediaStreamDestination();
        const source1 = audioCtx.createMediaStreamSource(audioStream);
        source1.connect(mixedDest);
        const source2 = audioCtx.createMediaStreamSource(camAudioStream);
        source2.connect(mixedDest);
        //mixedDest.stream //mixed audio stream

화면 + 음성

        let outputTracks = [];
        outputTracks = outputTracks.concat(canvasStream.getTracks());
        outputTracks = outputTracks.concat(mixedDest.stream.getAudioTracks());

        let stream = new MediaStream(outputTracks);

영상 녹화

MediaRecorder를 이용해 stream을 인코딩 진행하면된다. 이후 저장은 websocket, ajax등을 이용하면 되겠다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다