Peerjs: MediaStream ์—†์ด ์–ด๋–ป๊ฒŒ ์ „ํ™”๋ฅผ ํ•ฉ๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2016๋…„ 01์›” 08์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: peers/peerjs

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์‚ฌ์šฉ ์‚ฌ๋ก€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋ฐœํ‘œ์ž์™€ ๋ทฐ์–ด์˜ ๋‘ ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ฐœํ‘œ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ์—ด๊ณ  ํ”ผ์–ด ID๋ฅผ ์–ป์Šต๋‹ˆ๋‹ค.
  • ๋ฐœํ‘œ์ž๋Š” ํ•ด๋‹น ํ”ผ์–ด ID๋ฅผ ๋ทฐ์–ด์— ๋ณด๋ƒ…๋‹ˆ๋‹ค.
  • Viewer๋Š” ํ•ด๋‹น ํ”ผ์–ด ID๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Presenter๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฐœํ‘œ์ž๋Š” ๋ทฐ์–ด์—๊ฒŒ ๊ณต์œ  ํ™”๋ฉด์„ ๋ณด๋ƒ…๋‹ˆ๋‹ค.

์ด ์‚ฌ์šฉ ์‚ฌ๋ก€์˜ ๊ฒฝ์šฐ ๋ทฐ์–ด ์ธก์—์„œ ๋‹ค์Œ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

var call = peer.call(presenterPeerID, null);
call.on('stream', function(theirWebcamStream) {
  showWebcamStream(theirWebcamStream);
});

peer.call(presenterPeerID, null) ๊ฐ€ undefined $ ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฒƒ์€ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

MediaStream์„ ๋ณด๋‚ด์ง€ ์•Š๊ณ  ์–ด๋–ป๊ฒŒ ํ˜ธ์ถœํ•ฉ๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ชจ๋“  ํŠธ๋ž™ ๋˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ชจ๋‘๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋นˆ ์ŠคํŠธ๋ฆผ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

export const createEmptyAudioTrack = () => {
  const ctx = new AudioContext();
  const oscillator = ctx.createOscillator();
  const dst = oscillator.connect(ctx.createMediaStreamDestination());
  oscillator.start();
  const track = dst.stream.getAudioTracks()[0];
  return Object.assign(track, { enabled: false });
};

export const createEmptyVideoTrack = ({ width, height }) => {
  const canvas = Object.assign(document.createElement('canvas'), { width, height });
  canvas.getContext('2d').fillRect(0, 0, width, height);

  const stream = canvas.captureStream();
  const track = stream.getVideoTracks()[0];

  return Object.assign(track, { enabled: false });
};

...

const audioTrack = createEmptyAudioTrack();
const videoTrack = createEmptyVideoTrack({ width:640, height:480 });
const mediaStream = new MediaStream([audioTrack, videoTrack]);

peer.call('id', mediaStream);

๋ชจ๋“  5 ๋Œ“๊ธ€

์ด๋ฒˆ ํ˜ธ ๊ตฌ๋…

๋ฐœํ‘œ์ž์—์„œ ๋ทฐ์–ด๋กœ์˜ ํ˜ธ์ถœ์„ ์‹œ์ž‘ํ•˜๊ณ  ํ˜ธ์ถœ์—์„œ ๋ฐœํ‘œ์ž์—๊ฒŒ ๋ฏธ๋””์–ด ์ŠคํŠธ๋ฆผ์„ ์ œ๊ณตํ•˜๊ณ  null์„ ๋ฏธ๋””์–ด ์ŠคํŠธ๋ฆผ์œผ๋กœ ์‚ฌ์šฉํ•˜์—ฌ ํ˜ธ์ถœ์— ์‘๋‹ตํ•ด ๋ณด์…จ์Šต๋‹ˆ๊นŒ?

์ €๋„ ๊ฐ™์€ ์ผ์„ ํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ์ œ #158 ์ฐธ์กฐ

+1

๋ชจ๋“  ํŠธ๋ž™ ๋˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ชจ๋‘๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋นˆ ์ŠคํŠธ๋ฆผ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

export const createEmptyAudioTrack = () => {
  const ctx = new AudioContext();
  const oscillator = ctx.createOscillator();
  const dst = oscillator.connect(ctx.createMediaStreamDestination());
  oscillator.start();
  const track = dst.stream.getAudioTracks()[0];
  return Object.assign(track, { enabled: false });
};

export const createEmptyVideoTrack = ({ width, height }) => {
  const canvas = Object.assign(document.createElement('canvas'), { width, height });
  canvas.getContext('2d').fillRect(0, 0, width, height);

  const stream = canvas.captureStream();
  const track = stream.getVideoTracks()[0];

  return Object.assign(track, { enabled: false });
};

...

const audioTrack = createEmptyAudioTrack();
const videoTrack = createEmptyVideoTrack({ width:640, height:480 });
const mediaStream = new MediaStream([audioTrack, videoTrack]);

peer.call('id', mediaStream);
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰