2013-05-09 12 views
10

Tôi sử dụng Node.js để truyền trực tuyến qua Websocket video webm thời gian thực đến trang web sẽ phát video đó trong thẻ. Sau đây là mã từ cả máy chủ và máy khách:Luồng video qua Websocket tới <video> thẻ

SERVER:

var io = require('./libs/socket.io').listen(8080, {log:false}); 
var fs = require('fs'); 
io.sockets.on('connection', function (socket) 
{ 
console.log('sono entrato in connection'); 
var readStream = fs.createReadStream("video.webm"); 

socket.on('VIDEO_STREAM_REQ', function (req) 
{ 
    console.log(req); 

    readStream.addListener('data', function(data) 
    { 
     socket.emit('VS',data); 
    }); 

}); 
}); 

KHÁCH HÀNG:

<html> 
<body> 

<video id="v" autoplay> </video> 

<script src='https://localhost/socket.io/socket.io.js'></script> 
<script> 
window.URL = window.URL || window.webkitURL; 
window.MediaSource = window.MediaSource || window.WebKitMediaSource; 

if(!!! window.MediaSource) 
{ 
    alert('MediaSource API is not available!'); 
    return; 
} 

var mediaSource = new MediaSource();  
var video = document.getElementById('v'); 

video.src = window.URL.createObjectURL(mediaSource); 

mediaSource.addEventListener('webkitsourceopen', function(e) 
{ 
    var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"'); 
    var socket = io.connect('http://localhost:8080'); 

    if(socket) 
     console.log('Library retrieved!'); 

    socket.emit('VIDEO_STREAM_REQ','REQUEST'); 

    socket.on('VS', function (data) 
    { 
     console.log(data); 
     sourceBuffer.append(data); 
    }); 
}); 

</script> 


</body> 
</html> 

Tôi đang sử dụng Chrome 26 và tôi nhận được lỗi này: "của router Lỗi: InvalidAccessError: Ngoại lệ DOM 15 ". Có vẻ như loại đệm được nạp vào phương thức chắp thêm là sai. Tôi đã cố gắng chuyển đổi nó trong một Blob, Array và Uint8Array, nhưng không có may mắn.

Trả lời

5

dụ của bạn chỉ chứa các mã được hiển thị trên trang kết xuất từ ​​đây: http://html5-demos.appspot.com/static/media-source.html

Kiểm tra mã nguồn, dòng 155 là những gì bạn đang thiếu:

var file = new Blob([uInt8Array], {type: 'video/webm'}); 

Vì vậy, bạn cần phải cho Blob biết loại nội dung và sau đó nạp bộ đệm với Uint8Array (xem dòng 171):

sourceBuffer.append(new Uint8Array(e.target.result)); 
+0

can thiệp có thể làm việc với web rtc không? –

+0

Đây là lý do tại sao SO đề xuất đặt đoạn mã; 4 năm sau, khi URL không hoạt động nữa, chúng tôi vẫn có thể hiểu mã/ngữ cảnh ... –

+0

URL vẫn hoạt động và bạn cũng có thể kiểm tra phiên bản đã lưu trong bộ nhớ cache nếu thay đổi http://webcache.googleusercontent.com /search?q=cache:c1PEM1X38zMJ:html5-demos.appspot.com/static/media-source.html+&cd=1&hl=hu&ct=clnk&gl=hu – Jamesgt