What object type to pass to seriously.js seriously.source() when using React 16 and Agora 4.18 SDK for web

15 Views Asked by At

I'm getting this error no matter what type of object I pass when calling seriously.source(myobject):

> seriously.js:3331 Uncaught Error: Unknown source type
    at new SourceNode (seriously.js:3331:1)
    at findInputNode (seriously.js:1623:1)
    at Seriously.source (seriously.js:4833:1)
    at eval (HostView.jsx:127:1)

I checked the seriously docs on github in their wiki, and I see examples, but no spec as to what type is required.

I'm trying to apply various effects (like chromakey) by drawing the camera input to a canvas, applying the effects, then passing the canvas as the MediaTrack to the output (into an Agora video conference).

I've tried passing a MediaStreamTrack, a MediaStream. When I create the MediaStream by calling like this:

navigator.mediaDevices.getUserMedia(mediaObject)
    .then((mediaStream) => {

      streamingToCanvas = true;

      const videoSource = mediaStream.getVideoTracks()[0];
      const audioSource = mediaStream.getAudioTracks()[0];
      const canvas = intermediateCanvasRef.current;
      const ctx = canvas.getContext("2d");

      let canvasStream;
      video = intermediateVideoRef.current;
      video.srcObject = mediaStream;
      setCameraStream(mediaStream);

Here is the relevant seriously.js code:

 let seriously = new Seriously();
  let huesat = seriously.effect('hue-saturation');
  let bricon = seriously.effect('brightness-contrast');
  let chroma = seriously.effect('chroma');
  let blend = seriously.effect('blend');
  let transform = seriously.transform('reformat');
  let intermediateCanvasRef = useRef();
  let intermediateVideoRef = useRef();
  let source;
  let target;
  let strack;
  let sstream;

  chroma.weight = chromaWeight;
  chroma.balance = chromaBalance;
  chroma.clipWhite = chromaClipWhite;
  chroma.clipBlack = chromaClipBlack;
  chroma.mash = chromaMask;
  chroma.screen = chromaScreen;

  useEffect(()=>
  {
    if(!channelParameters || !channelParameters.localVideoTrack)
      return;
    strack = channelParameters.localVideoTrack;
    sstream = video.srcObject;
    source = seriously.source(sstream);
    console.log("SOURCE", source);
    target = seriously.target(intermediateCanvasRef.current);

    if(chromakeying)
0

There are 0 best solutions below