Hey guys, I’m using an @livepeer/webrtmp-sdk package and getting a TypeError but as a novice to live peer I am facing difficulty understanding it so can anyone help me with this?.
Here’s my code:-
import React, { useRef, useEffect, useState } from "react";
import { Client } from "@livepeer/webrtmp-sdk";
import '../App.css'
const Livepeer = () => {
const inputEl = useRef(null);
const video = useRef(null);
const stream = useRef(null);
useEffect(() => {
(async () => {
video.current.volume = 0
stream.current = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
})
video.current.srcObject = stream.current
video.current.play()
})()
})
const client = new Client();
const onButtonClick = async () => {
const StreamKey = inputEl.current.value;
if(!stream.current){
alert('Video stream was not started');
}
if(!StreamKey){
alert('Invalid StreamKey');
return
}
const session = client.cast(stream, StreamKey)
session.on('open', () => {
console.log('Stream started.')
})
session.on('close', () => {
console.log('Stream stopped.')
})
session.on('error', (err) => {
console.log('Stream error.', err.message)
})
};
return (
<div className="App footer-top" id="root">
<input
id="input"
ref={inputEl}
placeholder="Stream Key"
className="App input"
type="text"
/>
<video id="video" className="App-video" ref={video} />
<button
id="button"
className="App-button"
onClick={onButtonClick}
>Start</button>
</div>
);
};
export default Livepeer;
Thank you!