Я пытаюсь создать потоковую трансляцию с веб-камеры, поэтому я использую angular4, nodejs, socket.io и webRtc.
Сначала получайте данные в буфере каждую 1 секунду.от webcam и отправки его на сервер nodejs с помощью кода
const recordedChunks = [];
this.video = document.querySelector('video');
navigator.mediaDevices.getUserMedia(audio: true, video: true).then(
stream => {
this.video.srcObject = stream;
const options = {mimeType: 'video/webm;codecs=vp9'};
const mediaRecorder = new MediaRecorder(stream, options);
const server = this._chatService;
mediaRecorder.ondataavailable = function (event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
server.sendData(recordedChunks);
}
};
mediaRecorder.start(1000);
},
error => {
console.log('Error: ' + error);
});
код сервера
io.on('connection', (socket) => {
console.log('new connection made');
socket.on('blobs', function(data){
// console.log(data);
socket.emit('blobs', data);
})
});
Теперь я получаю данные в моих сервисах. ts
recieveData() {
const observables = new Observable(observer => {
this.socket.on('blobs', (data) => {
observer.next(data);
});
return () => {this.socket.disconnect();}
});
return observables;
}
Теперь я хочу показать, что получение данных буфера в виде видео, но я получаю представление о том, как сделать HTML для этого.
Я сделал некоторую логику, но она не работает
video: HTMLVideoElement;
constructor(private _chatService: ChatService) {
this.video = document.querySelector('video');
this._chatService.recieveData()
.subscribe(data => {
console.log('data--> ', data);
this.video.srcObject = data; //it showing an error
});
}
Пожалуйста, кто-нибудь, помогите мне.
Я получаю данные моего буфера на сервере как
[ <Buffer 1a 45 df a3 9f 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 84 77 65 62 6d 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ff ff 15 49 ... 53876 more bytes> ]
[ <Buffer 1a 45 df a3 9f 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 84 77 65 62 6d 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ff ff 15 49 ... 53876 more bytes>,
<Buffer 41 ab 81 03 c0 80 fb 83 84 97 85 2d c7 d9 a6 12 c0 c8 c0 a4 bf bb 8b 6b 94 f1 78 40 a5 e3 29 e1 42 de f0 9a 4d 94 bd 3c c8 ae 9c 07 b2 c2 65 e1 22 ea ... 196152 more bytes> ]
[ <Buffer 1a 45 df a3 9f 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 84 77 65 62 6d 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ff ff 15 49 ... 53876 more bytes>,
<Buffer 41 ab 81 03 c0 80 fb 83 84 97 85 2d c7 d9 a6 12 c0 c8 c0 a4 bf bb 8b 6b 94 f1 78 40 a5 e3 29 e1 42 de f0 9a 4d 94 bd 3c c8 ae 9c 07 b2 c2 65 e1 22 ea ... 196152 more bytes>,
<Buffer 41 83 81 07 80 80 fb 03 1b 17 0a 66 f9 02 76 71 9f 1a 28 61 41 a8 10 f8 d5 a9 61 02 dc 31 62 a7 f8 e9 01 56 ae 6c c8 b1 b4 96 6b 16 67 71 4d de 9b a9 ... 95249 more bytes> ]
[ <Buffer 1a 45 df a3 9f 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 84 77 65 62 6d 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ff ff 15 49 ... 53876 more bytes>,
<Buffer 41 ab 81 03 c0 80 fb 83 84 97 85 2d c7 d9 a6 12 c0 c8 c0 a4 bf bb 8b 6b 94 f1 78 40 a5 e3 29 e1 42 de f0 9a 4d 94 bd 3c c8 ae 9c 07 b2 c2 65 e1 22 ea ... 196152 more bytes>,
<Buffer 41 83 81 07 80 80 fb 03 1b 17 0a 66 f9 02 76 71 9f 1a 28 61 41 a8 10 f8 d5 a9 61 02 dc 31 62 a7 f8 e9 01 56 ae 6c c8 b1 b4 96 6b 16 67 71 4d de 9b a9 ... 95249 more bytes>,
<Buffer 41 83 81 0b 7c 80 fb 03 3c 11 fe 6a 0b d7 93 d1 49 c0 34 ac b5 84 38 13 ae 53 40 e5 4c 5e 38 0e 7c 65 5b 43 83 a2 6d 63 55 9c c2 ef 15 af 2c de c2 74 ... 117426 more bytes> ]
и data от this._chatService.recieveData () - 