So I've put up this little test code modeling what's going on with the real version of what i have. In it I have set up 2 peer connections in the same file, each having a dedicated video element on the html. The problem is, when i start sharing the screen, the stream is not being shown on the other peer (peer2), which is the same problem I get in the real version of the code.
Here is the js code
'use strict';
const video1 = document.getElementById('video1');
const video2 = document.getElementById('video2');
let peer1 = new RTCPeerConnection();
let peer2 = new RTCPeerConnection();
peer1.onicecandidate = ev => {
console.log('peer1 oncandidate event');
if (ev.candidate) {
const c = new RTCIceCandidate(ev.candidate);
peer2.addIceCandidate(c);
}
};
peer2.onicecandidate = ev => {
console.log('peer2 oncandidate event');
if (ev.candidate) {
const c = new RTCIceCandidate(ev.candidate);
peer1.addIceCandidate(c);
}
};
peer2.onaddtrack = ev => addStreamSource;
function startVideoStream() {
const videoOptions = {
video: true,
audio: true
};
navigator.mediaDevices.getDisplayMedia(videoOptions)
.then(gotLocalMediaStream)
.catch(logError);
}
function gotLocalMediaStream(stream) {
console.log('setting the stream');
console.log(stream.getTracks());
peer1.addTrack(stream.getTracks()[0]);
video1.srcObject = stream;
peer1.createOffer()
.then(desc => {
peer1.setLocalDescription(desc);
peer2.setRemoteDescription(desc);
peer2.createAnswer()
.then(des => {
peer2.setLocalDescription(des);
peer1.setRemoteDescription(des);
})
.catch(logError);
})
.catch(logError);
}
function addStreamSource(event) {
console.log('ADDING STREAM SOURCE:');
video2.srcObject = event.streams[0];
}
function logError(e) {
console.error(`Bad thing: ${e}`);
}
function logSuccess() {
console.log('Promise Success!');
}
index.html
<html>
<head>
<title>Pretty cinema</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 style="text-align:center;" id="text">
Pretty video streaming service
</h1>
<br />
<div id="vids">
<video id="video1" autoplay controls>
<source type='video/mp4' ; codecs="H.264" />
</video>
<video id="video2" autoplay controls>
<source type='video/mp4' ; codecs="H.264" />
</video>
</div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="./checking_peers.js"></script>
<div>
<div class="buttonsDiv">
<button onclick="startVideoStream()" type="button">Share</button>
</div>
</div>
</body>
</html>
important:
Already found the solution.
Simple explanation: I needed to create a MediaStream from the track received on peer2.
peer2.ontrack = event => {
const video = new MediaStream([event.track]);
video2.srcObject = video;
};
More details: The moment the two peers are connected (they've exchanged offer-answer's and ICE candidates) if you add a track on one end (peer1), the other end (peer2) is going to receive an event with the track in it if you've overriden the method ontrack of the peer2. You access the track as event.track. From that track you can create a MediaStream object by calling new MediaStream() and passing it an array of all tracks you want to base your stream on. That newly created stream can serve as the source for your video element, assign it with videoElement.srcObject = theMediaStream;.
Also: There was a problem with the way I set up the ICECandidate responses, so look closely into the code, it's written correctly here, might be you're having the same problem.
Related
I working on a project where user capture photo from camera and show captured photo, but I want upload That Photo to server . How we can upload that image file to server. I am new please help me.
please help me how we upload image file to server. I tried much but can not upload successfully.
<html>
<head>
<title>NigraniSof</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>
<button id="start-camera">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<div id="dataurl-container">
<canvas id="canvas" width="320" height="240"></canvas>
<div id="dataurl-header">Image Data URL</div>
<textarea id="dataurl" readonly></textarea>
</div>
<script>
let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");
let dataurl = document.querySelector("#dataurl");
let dataurl_container = document.querySelector("#dataurl-container");
camera_button.addEventListener('click', async function() {
let stream = null;
try {
stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
}
catch(error) {
alert(error.message);
return;
}
video.srcObject = stream;
video.style.display = 'block';
camera_button.style.display = 'none';
click_button.style.display = 'block';
});
click_button.addEventListener('click', function() {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
let image_data_url = canvas.toDataURL('image/jpeg');
dataurl.value = image_data_url;
dataurl_container.style.display = 'block';
});
</script>
</body>
</html>
you can add the canvas to an img tag for capturing and then you can take the image value using file reader method of javascript ,from that u will get the file blob which u can pass to php function using Ajax call. After that u can access that file blob in php which u can save to your server as well.
I try to play local video file in html video tag, I use open dialog to choose file and get file's path. Then I put this path in src
export default function VideoContainer() {
const { videoUrl } = useTypeSelector(state => state.video);
console.log(videoUrl);
return (
<div className='VideoContainer'>
{videoUrl !== '' && (
<video className='VideoContainer__video' controls>
<source src={`custom-protocol://${videoUrl}`} type={`video/mp4`} />
</video>
)}
</div>
);
}
For cyrillic files it doesn't work. error with cyrillic
How can I fix this?
I use Electron.js, React.js, Redux.
This what i've tried:
export default function VideoContainer() {
const { videoUrl } = useTypeSelector(state => state.video);
const newStr = decodeURI(videoUrl);
console.log(newStr);
return (
<div className='VideoContainer'>
{videoUrl !== '' && (
<video className='VideoContainer__video' controls>
<source src={`custom-protocol://${newStr}`} type={`video/mp4`} />
</video>
)}
</div>
);
}
but this same error.
You can solve this issue by decoding the URI where you pass your videoURL string as function input.
In Javascript, you can do it like example below (research for same code result via: React / Electron / Redux)...
videoURL = ...some_Cyrillic_text_encoding_with_%_sign...
//# update the string with decoded version of itself
videoURL = decodeURI( videoURL ); //eg: gives шеллы as new URL
You can see it solves the same problem of text encoding shown in your picture:
I am trying to display a video using the video tag and a Url I receive from the backend.
The problem is that :
Even though, everything works perfectly and I receive the right url, the video doesn't get displayed.
When I set the same url, statically, it works!
I display the used src in the video tag along with the videos here, they're exactly the same in both dynamic and static approach.
Yet, the dynamic approach doesn't work
Here's the code:
class ProfilePage2 extends Component {
componentDidMount() {
console.log("Inside ProfilePage.componentDidMount");
this.props.getCurrentProfile();
}
componentWillReceiveProps(nextProps) {
console.log("nextProps: ", nextProps);
}
render() {
console.log("Rerendering");
// this.props.profile contains all the different profile data not just personal profile
const { profile } = this.props.profile;
console.log("deconstructed personal profile data: ", profile);
let videoUrlToDisplay;
if (profile) {
videoUrlToDisplay = profile.videoURL;
}
if (videoUrlToDisplay == undefined) {
console.log("videoUrlToDisplay is undefined.");
} else {
// This gets logged with the video url
console.log(
"videoUrlToDisplay is NOT undefined. This is its value: ",
videoUrlToDisplay
);
}
return (
<div>
<h1>Setting source dynamically: </h1>
<div>src= {videoUrlToDisplay}</div>
<div>
<video controls="true" class="embed-responsive-item">
<source src={videoUrlToDisplay} type="video/mp4" />
</video>
<hr />
<br />
<h1>Setting source statically: </h1>
<div>src= {videoUrlToDisplay}</div>
<div>
<video controls="true" class="embed-responsive-item">
<source
src="https://res.cloudinary.com/dmam8ayrw/video/upload/v1602733968/yvaor"
type="video/mp4"
/>
</video>
</div>
</div>
</div>
);
}
}
I don't see why this happens. Everything should work perfectly. The url I use in src gets logged and displayed correctly but the video doesn't work.
I am trying to create an easy video player like youtube, I am using rest API for videos list, and the problem is that i don't know which video is selected in the list, to show that in the main frame. I mean, I get video Id from API and how to know which one is clicked. (javascript or jquery)
response.forEach(function (post) {
output += `
<p > <video width="100%" onclick="PlayVideo()" >
<source src="${post.url}" type="video/MP4" id="${post.id}"/>
</video></p>
`
});
You have to pass a reference of the triggering element to the function.
response.forEach(function (post) {
// "this" is passed as an argument
output += `
<p > <video width="100%" onclick="PlayVideo(this)" >
<source src="${post.url}" type="video/MP4" id="${post.id}"/>
</video></p>
`
});
Then in the function:
PlayVideo(element){
//...
var triggeringID = element.id;
console.log("Triggering element's ID: " + triggeringID; // You have it here...
}
Please have a look at the code below:
function longSentenceSpeak(text)
{
var url = "http://www.translate.google.com/translate_tts?tl=en&q="+finalString;
var url2 = "http://www.translate.google.com/translate_tts?tl=sp&q="+finalString;
var audio = document.getElementById('audio');
var source = document.getElementById('source');
source.src=url;
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
audio.onerror = function()
{
var url2 = "http://translate.google.com/translate_tts?tl=en&q="+text;
var audio = document.getElementById('audio');
var source = document.getElementById('source');
source.src = url2;
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
};
}
Below is my HTML:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/TTS.js"></script>
<script>
function longText()
{
longSentenceSpeak("hello world ");
}
</script>
</head>
<body>
<audio id="audio">
<source id="source" src="" type="audio/mp3" />
</audio>
<div><button onclick="longText()">Click me</button></div>
</body>
</html>
However this gives this error, even though it should handle it:
Failed to load resource: the server responded with a status of 404 (Not Found) (12:49:15:455 | error, network)
at http://www.translate.google.com/translate_tts?tl=en&q=hello
What I want to do is, if this error occurred, I want to use var url2 instead of var url in function longSentenceSpeak(text). How can I do this?
The error event doesn't bubble and in this case, it will fire on the <source> elements.
You thus need to listen to it from there:
function longText() {
var audio = document.getElementById('audio');
var source = document.getElementById('source');
source.src = '/foo.bar';
audio.load(); //call this to just preload the audio without playing
audio.play(); //call this to play the song right away
source.onerror = function() {
console.log('handling error event');
};
}
<audio id="audio">
<source id="source" src="" type="audio/mp3" />
</audio>
<div><button onclick="longText()">Click me</button></div>