LiveStream API - LiveInput not sending via PUT request

I am trying to do live-streaming and it’s working fine. After that, I have made PUT Request for live input but it is not starting the live streaming.
I’ve added the PUT request in the (Record Video from webcam) method to pass id in the PUT request but I was unable to start streaming. I’ve attached the code file in the mail please help me in this regard
I have followed this documentation https://developers.cloudflare.com/stream/stream-live/start-stream-live
Code Attached Bellow;
//First I’ve tried to create liveStreaming and in the response add PUT request for live input
//Request for Create liveStreaming
fetch(‘https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/stream/live_inputs’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
“X-Auth-Email”: “[email protected]”,
“X-Auth-Key”: “123asdf23”,
},
body: JSON.stringify({
meta:{ name: ‘testName’},
recording: { “mode”: “automatic”, “timeoutSeconds”: 10 }
})
}).then(res => {
return res.json()
})
.then(data => {
console.log(data.result.uid);
setLiveStreamId(data.result.uid);
InputLiveId = data.result.uid;
//Requst for live input Start
fetch('https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/stream/live_inputs/’+InputLiveId, {
method: ‘PUT’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
“X-Auth-Email”: “[email protected]”,
“X-Auth-Key”: “123asdf23”,
},
body: JSON.stringify({
meta:{ name: ‘testName’},
recording: { “mode”: “automatic”, “timeoutSeconds”: 10 }
})
}).then(res => {
return res.json()
}).then(data => {
console.log(data);
}).then(() => {
console.log(‘final’);
}).catch(error => {
console.log(‘ERROR from create component’)
})
//Input Request End

  })
  .then(() => {
    console.log('final');
  })
  .catch(error => console.log('ERROR from create component'))

//After not finding the solution. I’ve tried to add PUT request in my recording method as well but don’t know how to pass video object in PUT request
//Here is my Capture video code using React-webcam:
const handleStartCaptureClick = React.useCallback(() => {
setCapturing(true);
setVideoStatus(‘start’);
if (webcamRef.current.state.hasUserMedia != false) {
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: “video/webm”
});
mediaRecorderRef.current.addEventListener(
“dataavailable”,
handleDataAvailable
);
mediaRecorderRef.current.start();
console.log(mediaRecorderRef);
setMediaPack(mediaRecorderRef);

//Requst for live input Start 
liveStreamId = 'example1234'
fetch('https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/stream/live_inputs/'+liveStreamId, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    "X-Auth-Email": "[email protected]",
    "X-Auth-Key": "123asdf23",
  },
  body: JSON.stringify({
    meta:{ name: 'testName'},
    recording: { "mode": "automatic", "timeoutSeconds": 10 }
  })
}).then(res => {
  return res.json()
}).then(data => {
    console.log(data);
  }).then(() => {
    console.log('final');
  }).catch(error => {
  console.log('ERROR from create component')
})
//Input Request End 

} else {
setCapturing(false);
alert(“Allow Video Access”)
}
}, [webcamRef, setCapturing, mediaRecorderRef]);

Going live from the browser is not currently supported by Stream Live but it is something we are working to support. Stay tuned.

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.