UIのカスタマイズ — Web

// Replace the first parameter with ID of the target DOM element:
const publisher = OT.initPublisher('myPublisherElementId',
                                 {width:400, height:300});
session.publish(publisher);

const publisherOptions = {
  insertMode: 'append',
  width: 400,
  height: 300
};
const publisher = OT.initPublisher('publisherContainerElementId', publisherOptions);
session.publish(publisher);

const options = {width: 400, height: 300, insertMode: 'append'}
const subscriber = session.subscribe(stream, 'containerElementId', options);

const publisherOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%'
};
const publisher = OT.initPublisher(publisherContainerElement, publisherOptions);
session.publish(publisher);

<style>
	#publisherContainer.large
	{ width: 640px; height: 480px; }
	#publisherContainer.small
	{ width:100px; height: 100px; }
</style>
<div id="publisherContainer"></div>
<script>
	const publisher = OT.initPublisher('publisherContainer',
	{width: '100%', height: '100%', insertMode: 'append'}
</script>

<style>
	#publisherContainer
	{ width: 100px; height: 100px; }
	@media screen and (max-width: 650px) {
	#publisherContainer
	{ width: 89px; height: 50px; }
	}
</style>
<div id="publisherContainer"></div>
<script>
	const publisher = OT.initPublisher('publisherContainer',
	{width: '100%', height: '100%', insertMode: 'append'}
</script>

document.getElementById("target").appendChild(publisher.element);
publisher.element.style.width = "100px";
publisher.element.style.height = "75px";

<script type="text/javascript">
	const publisherOptions = {
		insertMode: "append",
		height: "100%",
		width: "100%"
	}
	const publisher = OT.initPublisher("publisherContainer", publisherOptions);
	session.publish(publisher);

	function resizePublisher() {
		const publisherContainer = document.getElementById("publisherContainer");
		publisherContainer.style.width = "1000px";
		publisherContainer.style.height = "750px";
	}
</script>

<div id="container">
	<div id="publisherContainer"></div>
	<a href="javascript:resizePublisher()">resize</a>
</div>

// Replace the first parameter with the target element ID:
const publisher = OT.initPublisher("myPublisher",
                                 {name: "John"})
session.publish(publisher);

// Replace the first parameter with the target element ID:
const publisher = OT.initPublisher("myPublisher",
  {
    name: "John",
    style: { nameDisplayMode: "off" }
  });
session.publish(publisher);

// Replace the first two parameters with the stream and target element ID:
const subscriber = session.subscribe(stream,
  "mySubscriber",
  {
    style: { nameDisplayMode: "off" }
  });

const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  {
     name: 'John',
     style: {buttonDisplayMode: 'on'}
  }
);
session.publish(publisher);

const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  {
     style: {buttonDisplayMode: 'on'}
  }
);

const publisher = OT.initPublisher("publisher-element-id",
  {fitMode: "contain"});

const subscriber = session.subscribe(stream,
  "subscriber-element-id",
  {fitMode: "cover"});

const imgData = publisher.getImgData();
const img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);

// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);

const imgData = subscriber.getImgData();
const img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);

// Replace with the parent DIV for the img
document.getElementById("containerId").appendChild(img);

const subscriber = session.subscribe(event.stream, 'subscriberElement', function(error) {
  if (error) {
    console.log(error.message)'
    return;
  }
  if (subscriber.stream.hasVideo) {
    const imgData = subscriber.getImgData();
    subscriber.setStyle('backgroundImageURI', imgData);
  } else {
    subscriber.setStyle('backgroundImageURI',
      'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1" height="1"%3E%3Crect width="1" height="1" fill="%23f4eadf"/%3E%3C/svg%3E'
    );
  }
});

subscriber.setStyle('audioLevelDisplayMode', 'off');
const movingAvg = null;
subscriber.on('audioLevelUpdated', function(event) {
  if (movingAvg === null || movingAvg <= event.audioLevel) {
    movingAvg = event.audioLevel;
  } else {
    movingAvg = 0.7 * movingAvg + 0.3 * event.audioLevel;
  }

  // 1.5 scaling to map the -30 - 0 dBm range to [0,1]
  const logLevel = (Math.log(movingAvg) / Math.LN10) / 1.5 + 1;
  logLevel = Math.min(Math.max(logLevel, 0), 1);
  document.getElementById('subscriberMeter').value = logLevel;
});

const subscriber = session.subscribe(event.stream);

SpeakerDetection(subscriber, function() {
  console.log('started talking');
}, function() {
  console.log('stopped talking');
});

const SpeakerDetection = function(subscriber, startTalking, stopTalking) {
  const activity = null;
  subscriber.on('audioLevelUpdated', function(event) {
    const now = Date.now();
    if (event.audioLevel > 0.2) {
      if (!activity) {
        activity = {timestamp: now, talking: false};
      } else if (activity.talking) {
        activity.timestamp = now;
      } else if (now- activity.timestamp > 1000) {
        // detected audio activity for more than 1s
        // for the first time.
        activity.talking = true;
        if (typeof(startTalking) === 'function') {
          startTalking();
        }
      }
    } else if (activity && now - activity.timestamp > 3000) {
      // detected low audio activity for more than 3s
      if (activity.talking) {
        if (typeof(stopTalking) === 'function') {
          stopTalking();
        }
      }
      activity = null;
    }
  });
};

const subscriberOptions = {
    style: { audioBlockedDisplayMode: "off" }
  };
const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  subscriberOptions
);

subscriber.on({
  audioBlocked: function(event) {
    // display custom UI
  },
  audioUnblocked: function(event) {
    // hide custom UI
  }
});

customElement.addEventListener('click', async () => {
  try {
    await OT.unblockAudio();
  } catch (err) {
    console.error('Unblocking audio failed.', err);
    return;
  }
  console.log('Unblocked audio successfully.');
});

const indicatorBlinker = new IndicatorBlinker(subscriber);

const IndicatorBlinker = function(subscriber) {
  const timer;
  const indicatorOn = false;
  subscriber.on({
    videoDisabled: function(event) {
      start();
    },
    videoDisableWarning: function(event) {
      start();
    },
    videoDisableWarningLifted: function(event) {
      stop();
    },
    videoEnabled: function(event) {
      stop();
    }
  });
  const start = function() {
    subscriber.setStyle('videoDisabledDisplayMode', 'on');
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(function() {
      if (indicatorOn) {
        subscriber.setStyle('videoDisabledDisplayMode', 'off');
      } else {
        subscriber.setStyle('videoDisabledDisplayMode', 'on');
      }
      indicatorOn = !indicatorOn;
    }, 1000);
    indicatorOn = true;
  };
  const stop = function() {
    if (timer) {
      clearInterval(timer);
    }
  };
};

// Enabled
const publisher = OT.initPublisher('target', {
  audioFallback: {
    publisher: true,
  },
  style: {
    videoDisabledDisplayMode: 'off',
  }
});

publisher.on({
  videoDisableWarning: () => {
    // Custom action — for example, add custom UI notification
  },
  videoDisableWarningLifted: () => {
    // Custom action — for example, remove custom UI notification
  },
  videoDisabled: () => {
    // Custom action — for example, add custom UI notification
  },
  videoEnabled: () => {
    // Custom action — for example, remove custom UI notification
  },
});

publisher.setStyle('videoDisabledDisplayMode', 'off');

// Alternately:

publisher.setStyle({
  videoDisabledDisplayMode: 'off',
  // other styles ...
});

const publisherOptions = {
     showControls: false
  };
const publisher = OT.initPublisher(
  'publisher-element-id', // Replace with the replacement element ID
  publisherOptions
);

const subscriberOptions = {
     showControls: false
  };
const subscriber = session.subscribe(stream,
  'subscriber-element-id', // Replace with the replacement element ID
  subscriberOptions
);

const publisher = OT.initPublisher({insertDefaultUI: false});
publisher.on('videoElementCreated', function(event) {
  document.getElementById('publisher-video-parent-id').appendChild(event.element);
});

const subscriber = session.subscribe(stream, {insertDefaultUI: false});
subscriber.on('videoElementCreated', function(event) {
  document.getElementById('subscriber-video-parent-id').appendChild(event.element);
});

const [subscriberStream, setSubscriberStreams] = useState([]);
  async function subscribe(stream, session, options = {}) {
    if (session) {
      const subscriber = session.current.subscribe(stream, null, { ...options, insertDefaultUI: false });
      subscriber.on('mediaStreamAvailable', ({ mediaStream }) => {
        setSubscriberStreams((prev) => [...prev, { mediaStream, subscriber }]);
      });
    }
  }

import { useEffect, useRef } from 'react';

    const Subscriber = ({ subscriber, mediaStream }) => {
      const videoRef = useRef(null);

      useEffect(() => {
        if (mediaStream) {
          videoRef.current.srcObject = mediaStream;
        }
      }, [mediaStream]);

      return (
          <video
            ref={videoRef}
            autoPlay
            id={subscriber.streamId}
            playsInline
            muted
          ></video>
      );
    }

    export default Subscriber;

import { useEffect, useRef } from 'react';

    const Publisher = ({ publisher, mediaStream }) => {
      const videoRef = useRef(null);

      useEffect(() => {
        if (mediaStream) {
          videoRef.current.srcObject = mediaStream;
        }
      }, [mediaStream]);

      return (
          <video
            ref={videoRef}
            autoPlay
            id={publisher.streamId}
            playsInline
            muted
          ></video>
      );
    }

    export default Publisher;

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, { insertDefaultUI: false });
  subscriber.on('videoElementCreated', event => {
    // myVideoElement is a Video element you have created:
    myVideoElement.srcObject = event.element.srcObject;
  });
});

session.on('streamCreated', function(event) {
  const subscriber = session.subscribe(event.stream, { insertDefaultUI: false });
  subscriber.on('videoElementCreated', event => {
    // myVideoElement is a Video element you have created:
    myVideoElement.srcObject = event.element.srcObject;
    myVideoElement.play()
    event.element.addEventListener('play', () => {
      // The MediaStram has changed
      myVideoElement.srcObject = event.element.srcObject;
      myVideoElement.play();
    });
  });
});