视频直播

最新推荐文章于 2025-08-14 17:31:00 发布

转载最新推荐文章于 2025-08-14 17:31:00 发布 · 267 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/benmumu/p/10757997.html

文章标签：

#javascript #网络 #ViewUI

本文介绍了一种使用WebSocket进行实时图片传输的方法。通过创建WebSocket实例并监听消息，实现将接收到的数据作为图片源显示。这种方法适用于需要实时更新图像的场景，如直播或远程监控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>直播</title>
</head>
<body>
<imgid="receiver"style="width:1000px;height:600px"/>
</body>
<scripttype="text/javascript"charset="utf-8">
//创建一个socket实例 
var receiver_socket = new WebSocket("ws://172.16.151.190:7890");
var image = document.getElementById('receiver');
// 监听消息 
receiver_socket.onmessage = function(data)
{
image.src=data.data;
}
</script>
</html>

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <metahttp-equiv="X-UA-Compatible"content="ie=edge">
    <title>直播</title>
</head>
<body>
    <imgid="receiver"style="width:1000px;height:600px"/>
</body>
<scripttype="text/javascript"charset="utf-8">  
        //创建一个socket实例  
        var receiver_socket = new WebSocket("ws://172.16.151.190:7890");  
        var image = document.getElementById('receiver');  
         // 监听消息  
        receiver_socket.onmessage = function(data)  
        {  
            image.src=data.data;  
        }  
    </script>
</html>