I'm looking into the subject to use in my TCC, how do I make video calls using PHP or similar language?
I searched for various terms and could not find any relevant information. The goal is to make simple video calls between one client and another, is there any ready-made solution for this for PHP or JavaScript? Sorry for the lack of content, because I did not find much related in the searches that I did.
With @LauroMoraes' answer I had a broader search field and I ended up discovering PeerJs , which is a JavaScript library of its own. On their own website they have a simple video example called 1-1. (although it is not functional on their site because they do not have SSL).
Follow the example given by them, translated and commented by me:
<html>
<head>
<title>PeerJS - Exemplo de Video Chamada</title>
<meta charset="utf-8" / >
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><scripttype="text/javascript" src="../../dist/peer.js"></script>
<script>
// Variavel para pegar permissão de camera e microfone, definição de acordo com navegador.
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// Definições do PeerJS, como dominio, key e outros
var peer = new Peer({ host: '192.168.137.130', port:9000, debug: 3});
// Pega ID da conexão atual
peer.on('open', function(id)
{
$('#my-id').text(id);
});
// Recebendo uma chamada
peer.on('call', function(call)
{
// Responde a chamada criando uma chamada entre os dois usuários
call.answer(window.localStream);
createCall(call);
});
// Se houver algum erro
peer.on('error', function(err)
{
// Exibe o erro em um alert
alert(err.message);
// Agurada nova conexão ou ação
waitingAction();
});
// Eventos de clique
$(function()
{
// Iniciar uma nova chamada
$('#make-call').click(function()
{
// Requisita uma chamada para o ID indicado
var call = peer.call($('#callto-id').val(), window.localStream);
// Cria chamada entre os dois
createCall(call);
});
// Finalizar uma chamada
$('#end-call').click(function()
{
// Fecha conexão (chamada) existente
window.existingCall.close();
// Espera por uma nova ação
waitingAction();
});
// Tentar ativar site novamente
$('#getPermissionAndStream-retry').click(function()
{
// oculta o erro
$('#getPermissionAndStream-error').hide();
// pega novamente permissão para dispositivos de saida e entrada
getPermissionAndStream();
});
// No inicio do site, requisita acesso a dispositivos
getPermissionAndStream();
});
// Preparação, pegando permissão de camera e microfone
function getPermissionAndStream ()
{
// Tenta pegar dispositivo de audio e video
navigator.getUserMedia({audio: true, video: true}, function(stream)
{
// Associa elemento HTML com o dispositivo de video capturado
$('#my-video').prop('src', URL.createObjectURL(stream));
// Pega dispositovos encontrados
window.localStream = stream;
// Aguarda ação
waitingAction();
}, function()
{
// se houver algum erro mostra o erro
$('#getPermissionAndStream-error').show();
});
}
// Aguardar ação
function waitingAction ()
{
// Esconde tela de criar uma chamada
$('#getPermissionAndStream, #createCall').hide();
// Mostra tela de esperar ação
$('#waitingAction').show();
}
// Cria uma chamada
function createCall (call)
{
// Fecha chamada existente se existir
if (window.existingCall)
{
window.existingCall.close();
}
// Aguarda sinal de dispositivo fisico para criar chamada
call.on('stream', function(stream)
{
// Adiciona dispositivo fisico do destinatario a tela do usuário
$('#their-video').prop('src', URL.createObjectURL(stream));
});
// Define como chamada atual
window.existingCall = call;
// Adiciona um peer na página
$('#their-id').text(call.peer);
// define achão close como esperar uma ação
call.on('close', waitingAction);
// Exibe tela para criar chamada
$('#getPermissionAndStream, #waitingAction').hide();
$('#createCall').show();
}
</script>
</head>
<body>
<div class="pure-g">
<!-- Area de visão -->
<div class="pure-u-2-3" id="video-container">
<!-- Video do outro usuário -->
<video id="their-video" autoplay></video>
<!-- Video do proprio usuário -->
<video id="my-video" muted="true" autoplay></video>
</div>
<!-- Visões -->
<div class="pure-u-1-3">
<h2>PeerJS Video Chamada</h2>
<!-- Esperando por permissão de dispositivos externos-->
<div id="getPermissionAndStream">
<p>Por favor, permita que acessemos seu dispositivo de camera e microfone, apra isso clique em "Permitir".</p>
<!-- Erro ao pedir permissão -->
<div id="getPermissionAndStream-error">
<p>Opsss.. ocorreu um erro ao acessar sua camera ou microfone. Verifique se o servidor está ativo, com SSL e se você deu a permissão para acessar-mos esses dispositivos.</p>
<a href="#" class="pure-button pure-button-error" id="getPermissionAndStream-retry">Tentar novamente</a>
</div>
</div>
<!-- Tela para fazer ligação -->
<div id="waitingAction">
<p>Seu ID: <span id="my-id">...</span></p>
<p>Compartilhe esse ID para que outros membros possam falar com você.</p>
<h3>Fazer ligação</h3>
<div class="pure-form">
<input type="text" placeholder="Call user id..." id="callto-id">
<a href="#" class="pure-button pure-button-success" id="make-call">Ligar</a>
</div>
</div>
<!-- Chamada ativo, tela para finalizar -->
<div id="createCall">
<p>Em chamada com <span id="their-id">...</span></p>
<p><a href="#" class="pure-button pure-button-error" id="end-call">Finalizar</a></p>
</div>
</div>
</div>
</body>
</html>
In case I used a local server, it is necessary to install the PeerJS Server. But there is an option where you create an account on their site, and creating a Key API uses their own server (free plan allows up to 50 concurrent connections). In the code it would only change:
var peer = new Peer({ host: '192.168.137.130', port:9000, debug: 3});
To
var peer = new Peer({ key: 'minhaChaveDeAPI', debug: 3});
Of course there are several other options for improving video calling, even IP blocking and more. But that already gives a starting foot tip for many. I'm going to mark Lauro's answer as right, because it was she who gave me the path I needed to find the answer.
I believe the scope of your question is to live stream with technology like PHP .
I have exactly the same question here at stackoverflow although the closest I got was using javascript .
I was able to implement my own solution for video calls although I did not address the issue of video conferencing the idea is the same.
WebRTC | wikipedia proposes to do this work, although it is an API in development it is very stable and is supported in the main browsers including versions Mobile support .
Some considerations to WebRTC (RTMP protocol):
To use with broadcast it takes 2MB of bandwidth to distribute one audio channel (1MB) plus one video channel (1MB) and each new listener doubles. >
To mitigate this, WebRTC uses connections in PeerConnection pairs where the first pair to connect to the distribution source starts to distribute if a new pair connects to the channel and so on the second to the third, the third to the fourth, etc ...
If the subject matter is relevant to a TCC it would be nice to take a look at NW.js since nwjs uses the Chromiun V8 engine and it is written (based on) javascript and HTML and it is extremely easy to implement a client to use WebRTC by simply creating (or using some) signaling server and connecting your running application to nwjs.
NW.js can be distributed regardless of whether the OS runs on Windows, Linux, Mac or you can compile the binary for these although it is requirement for use that the client machine has Node.js installed.