Как осуществлять видеозвонки по Django каналам? - PullRequest
Новая
       14

Как осуществлять видеозвонки по Django каналам?

1 голос
/ 21 января 2020

Я хотел бы создать приложение, которое позволит пользователям совершать видеозвонки. Я нашел некоторое понимание здесь , но, к сожалению, ответ не объясняет ни то, какие сторонние сервисы могут быть использованы, ни какое-либо осмысленное понимание интеграции WebRT C.

Мне удалось создать живой чат на основе Django WebSocket с использованием каналов, и я решил "получить пользовательские медиа". Но я был полностью ошеломлен соединением Peer2Peer.

Как я могу интегрировать WebRT C по Django каналам? Или есть какой-нибудь более простой способ / сторонний сервис, который я мог бы использовать?

my consumer.py:

from channels.generic.websocket import AsyncWebsocketConsumer
from channels.consumer import AsyncConsumer
import json

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name
        self.user = self.scope["user"].username

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        user = text_data_json['user']

        # Send message to room group
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message,
                'user': user
            }
        )

    # Receive message from room group
    async def chat_message(self, event):
        message = event['message'],
        user = event['user']

        # Send message to WebSocket
        await self.send(text_data=json.dumps({
            'message': message,
            'user': user
        }))

мой чат: 

 {% extends 'main/header.html' %}

{% block content %}

<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>

<body>

<div class="container">
    <textarea id="chat-log"  class="materialize-textarea" ></textarea><br/>

<div class="input-field col s12 ">
    <input id="chat-message-input" type="text" />
    <a class="waves-effect waves-light btn prefix" id="chat-message-submit"><i class="material-icons right">send</i></a>

</div>

</div>

</body>
<script>
    var roomName = "{{ room_name|escapejs }}";

    var chatSocket = new WebSocket(
        'ws://' + window.location.host +
        '/ws/chat/' + roomName + '/');

    chatSocket.onmessage = function(e) {
        var data = JSON.parse(e.data);
        console.info(e)
        var message = data['message'];
        var user = data['user'];
        document.querySelector('#chat-log').value += (user +": " + message + '\n');
        elem = document.getElementById("chat-log")
        M.textareaAutoResize(elem);
    };

    chatSocket.onclose = function(e) {
        console.error('Chat socket closed unexpectedly');
    };

    document.querySelector('#chat-message-input').focus();
    document.querySelector('#chat-message-input').onkeyup = function(e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#chat-message-submit').click();
        }
    };

    document.querySelector('#chat-message-submit').onclick = function(e) {
        var messageInputDom = document.querySelector('#chat-message-input');
        var message = messageInputDom.value;
        var user = "{{user.username}}"
        chatSocket.send(JSON.stringify({
            'message': message,
            'user': user

        }));

        messageInputDom.value = '';
    };
</script>

{% endblock  %}

мой клиент. js: 

window.onload = function () {
   var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) { console.log(err.name + ": " + err.message); });
};

мое видеоокно: 

<html>
 {% load static %}
   <head> 
      <meta charset = "utf-8"> 
      <script src = "{% static 'main/js/client.js' %}"></script>
   </head>

   <body> 
      <video controls="" id = 'video-player' name = 'video-player' autoplay></video> 

   </body> 

</html>
...