Nodejs中有人知道blob怎么和video在客户端相互转换吗

Nodejs中有人知道blob怎么和video在客户端相互转换吗

我用webrtc获得了一个视频的src 是 blob:http%3A//localhost%3A3000/29b08b55-c734-4b85-a893-bb86e1cf306d 然后我用webscoket的方式将这个地址进行了多播，但是在别的客户端可以收到这个地址，但是视频流无法使用，结果为 Failed to load resource: the server responded with a status of 404 (Not Found) 。 求大神指点。


2 回复

当然，我可以帮助你解决这个问题。在WebRTC中，Blob对象通常用于表示二进制数据，如视频或音频文件。而Video标签则用于在网页上显示视频流。在客户端，你可以通过JavaScript来实现Blob与Video之间的转换。

问题分析

你提到的是通过WebSocket传输一个Blob URL（例如blob:http://localhost:3000/...），但在接收端无法加载该资源。这可能是因为Blob URL是本地浏览器生成的，并且只能在生成它的同一浏览器上下文中访问。

解决方案

步骤1：将Blob转换为ArrayBuffer

首先，我们需要从WebSocket接收到的Blob URL中提取出实际的二进制数据。由于Blob URL不能直接跨域共享，我们需要通过Blob URL获取实际的二进制数据（ArrayBuffer）。

function getBlobData(blobUrl, callback) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', blobUrl, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function() {
        if (xhr.status === 200) {
            callback(xhr.response); // ArrayBuffer
        }
    };
    xhr.send();
}

步骤2：创建新的Blob并生成新的URL

一旦我们有了ArrayBuffer，我们可以将其转换回Blob，并为这个Blob生成一个新的URL，这样就可以在任何地方访问它了。

function createNewBlobAndUrl(arrayBuffer) {
    const blob = new Blob([arrayBuffer], { type: 'video/mp4' });
    return URL.createObjectURL(blob);
}

步骤3：将新的Blob URL应用到Video元素

最后，我们将新生成的Blob URL设置为<video>元素的源。

<video id="videoPlayer" controls></video>

<script>
const videoUrl = 'blob:http%3A//localhost%3A3000/29b08b55-c734-4b85-a893-bb86e1cf306d';
getBlobData(videoUrl, function(arrayBuffer) {
    const newBlobUrl = createNewBlobAndUrl(arrayBuffer);
    document.getElementById('videoPlayer').src = newBlobUrl;
});
</script>

总结

这种方法绕过了Blob URL的局限性，通过获取其实际的二进制数据（ArrayBuffer），然后再创建一个新的Blob和URL。这样，你可以在任何地方使用这个新的URL来播放视频。希望这能解决你的问题！


在客户端，Blob（Binary Large Object）可以直接与Video元素进行相互转换。Blob表示一个不可变的、原始数据的类文件对象，而Video元素则用于播放视频。

示例代码

Blob转Video

// 假设你已经有了一个Blob对象
const blob = new Blob([...], { type: 'video/mp4' });

// 创建一个URL对象，该对象包含一个唯一的URL，指向当前的Blob对象
const url = URL.createObjectURL(blob);

// 创建Video元素并设置其src属性
const video = document.createElement('video');
video.src = url;

// 将Video元素添加到DOM中
document.body.appendChild(video);

Video转Blob

// 假设你已经有了一个Video元素
const video = document.querySelector('video');

// 创建一个MediaRecorder对象，用于录制Video元素的媒体流
const mediaRecorder = new MediaRecorder(video.captureStream());

// 开始录制
mediaRecorder.start();

// 存储生成的Blob片段
let recordedChunks = [];

// 当录制生成新的数据块时触发
mediaRecorder.ondataavailable = function(event) {
    recordedChunks.push(event.data);
};

// 当录制结束时触发
mediaRecorder.onstop = function() {
    const blob = new Blob(recordedChunks, { type: 'video/mp4' });
    
    // 创建一个URL对象，该对象包含一个唯一的URL，指向当前的Blob对象
    const url = URL.createObjectURL(blob);
    console.log(url); // 输出Blob的URL
};

// 停止录制
setTimeout(() => {
    mediaRecorder.stop();
}, 5000); // 持续录制5秒

解释

  1. Blob转Video:

    • 使用URL.createObjectURL()方法创建一个临时的URL，指向当前的Blob对象。
    • 将此URL赋值给Video元素的src属性。
    • 最后将Video元素添加到DOM中以显示视频。

  2. Video转Blob:

    • 使用captureStream()方法从Video元素获取媒体流。
    • 使用MediaRecorder对象开始录制媒体流。
    • 当有新数据块可用时，将其添加到recordedChunks数组中。
    • 录制结束后，将所有数据块组合成一个Blob对象，并创建一个新的URL指向该Blob对象。

关于WebSocket传输问题

你提到通过WebSocket传输Blob URL遇到了404错误，这是因为Blob URL是临时的，只在当前浏览器会话中有效。若要通过WebSocket传输Blob数据，应直接发送Blob对象或Blob的二进制表示（如ArrayBuffer），而不是Blob URL。

回到顶部