基于在本地实现直播demo

4/24/2023 10:44:40 AM

535

前面两篇文章已经讲述了HLS在页面上用http的播放方式，本文不在叙述。直接上代码

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
        video {
            width: 320px;
        }
    </style>
</head>
<body>
    <video id="video" controls width="100%"></video>
    <script type="text/javascript"  src="https://www.helloweba.net/demo/2018/hls/hls.js"></script>
    <script type="text/javascript">
        var video = document.getElementById('video');
        if (Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource('/attachment/livestreaming/user1/u1.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = '/attachment/livestreaming/user1/u1.m3u8';
            video.addEventListener('loadedmetadata', function () {
                video.play();
            });
        }

    </script>
</body>
</html>

为了比较好的测试效果，你这个页面配置到服务器上最好，m3u8的资源路径要设计好，如果用相对路径的画。

进入你的直播视频的地址目录，我测试的目录是站点下/attachment/livestreaming/user1/目录，找到这个目录，在地址栏执行 cmd 这个命令后，进入到cmd的同时进入到当前目录，当然你可以直接使用运行 cmd的命令进入到当前目录，或者不进入这个目录也行，但是需要注意使用的命令。

需要使用到 ffmpeg 请提前安装好。

执行命令

ffmpeg -f dshow -i video="Integrated Camera" -f hls -hls_time 1 -hls_playlist_type event u1.m3u8

注释：

Integrated Camera s是本地摄像头的名称，在计算机的设备管理器中可以看到
event 直播模式，vod 点播模式
u1.m3u8 保存的文件名称地址，本例是直接保存到当前目录。

执行效果如下图：

扩展：

查看本地摄像头设备使用如下命令

ffmpeg -list_devices true -f dshow -i dummy

ffmpeg一边使用摄像头采集视频一遍转为HLS文件。此时打开H5页面就可以看到视频画面，不过延迟较大，感兴趣的可以测试一下。

本文链接:https://blog.nnwk.net/article/157

基于在本地实现直播demo

全部评论