Peerjs: Как Π·Π²ΠΎΠ½ΠΈΡ‚ΡŒ Π±Π΅Π· MediaStream?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 8 янв. 2016  Β·  5ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: peers/peerjs

Π£ мСня Π΅ΡΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования, Π³Π΄Π΅:

  • Π΅ΡΡ‚ΡŒ Π΄Π²Π° Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°, Π’Π΅Π΄ΡƒΡ‰ΠΈΠΉ ΠΈ Π—Ρ€ΠΈΡ‚Π΅Π»ΡŒ
  • Π’Π΅Π΄ΡƒΡ‰ΠΈΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ страницу ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€Π°
  • Π’Π΅Π΄ΡƒΡ‰ΠΈΠΉ отправляСт этот ΠΎΠ΄Π½ΠΎΡ€Π°Π½Π³ΠΎΠ²Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π·Ρ€ΠΈΡ‚Π΅Π»ΡŽ
  • БрСдство просмотра ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ этот ΠΎΠ΄Π½ΠΎΡ€Π°Π½Π³ΠΎΠ²Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ для Π²Ρ‹Π·ΠΎΠ²Π° Π΄ΠΎΠΊΠ»Π°Π΄Ρ‡ΠΈΠΊΠ°.
  • Π’Π΅Π΄ΡƒΡ‰ΠΈΠΉ отправляСт свой ΠΎΠ±Ρ‰ΠΈΠΉ экран Π·Ρ€ΠΈΡ‚Π΅Π»ΡŽ

Для этого Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° использования ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ, для стороны просмотра:

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 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° этот выпуск

Π’Ρ‹ ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π·ΠΎΠ² ΠΎΡ‚ Π΄ΠΎΠΊΠ»Π°Π΄Ρ‡ΠΈΠΊΠ° ΠΊ Π·Ρ€ΠΈΡ‚Π΅Π»ΡŽ, прСдоставляя ΠΌΠ΅Π΄ΠΈΠ°ΠΏΠΎΡ‚ΠΎΠΊ Π΄ΠΎΠΊΠ»Π°Π΄Ρ‡ΠΈΠΊΠ°ΠΌ Π² Π²Ρ‹Π·ΠΎΠ²Π΅ ΠΈ отвСчая Π½Π° Π²Ρ‹Π·ΠΎΠ² с Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π² качСствС ΠΌΠ΅Π΄ΠΈΠ°ΠΏΠΎΡ‚ΠΎΠΊΠ°?

Π― Ρ‚ΠΎΠΆΠ΅ надСюсь ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ выпуск β„–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 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ