加入测试页面

2 years ago · 89ebf28810
3 changed files with 70 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -50,6 +50,11 @@ Body: `SDP`
 Content-Type: `application/sdp`
 Response Body: `SDP`
 ### 推流测试页面
 `/webrtc/test/publish`
 ## WHIP
 WebRTC-HTTP ingestion protocol
 用于WebRTC交换SDP信息的规范
--- a/main.go
+++ b/main.go
@ -10,8 +10,9 @@ import (
 	"go.uber.org/zap"
 	"m7s.live/engine/v4"
-	"github.com/pion/interceptor"
+	_ "embed"
 	"github.com/pion/interceptor"
 	. "github.com/pion/webrtc/v3"
 	"m7s.live/engine/v4/config"
 	"m7s.live/plugin/webrtc/v4/webrtc"
@ -43,6 +44,10 @@ import (
 //		conn *net.UDPConn
 //		port int
 //	}
 //go:embed publish.html
 var publishHTML []byte
 var (
 	reg_level = regexp.MustCompile("profile-level-id=(4.+f)")
 )
@ -168,6 +173,10 @@ func (conf *WebRTCConfig) Push_(w http.ResponseWriter, r *http.Request) {
 	}
 }
 func (conf *WebRTCConfig) Test_Publish(w http.ResponseWriter, r *http.Request) {
 	w.Write(publishHTML)
 }
 var webrtcConfig WebRTCConfig
 var WebRTCPlugin = engine.InstallPlugin(&webrtcConfig)
--- a/publish.html
+++ b/publish.html
@ -0,0 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试WebRTC推流</title>
 </head>
 <body>
    <video id="video" width="640" height="480" autoplay muted />
 </body>
 <script>
    (async () => {
        const mediaStream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true,
        });
        document.getElementById('video').srcObject = mediaStream;
        const pc = new RTCPeerConnection();
        pc.addTransceiver('video', { direction: 'sendonly' });
        pc.addTransceiver('audio', { direction: 'sendonly' });
        pc.oniceconnectionstatechange = () => {
            console.log('oniceconnectionstatechange', pc.iceConnectionState);
        };
        pc.onicecandidate = (e) => {
            console.log('onicecandidate', e.candidate);
        };
        mediaStream.getTracks().forEach((t) => {
            pc.addTrack(t, mediaStream);
        });
        const offer = await pc.createOffer();
        await pc.setLocalDescription(offer);
        const result = await fetch(
            `/webrtc/push/live/webrtc`,
            {
                method: 'POST',
                mode: 'cors',
                cache: 'no-cache',
                credentials: 'include',
                redirect: 'follow',
                referrerPolicy: 'no-referrer',
                headers: { 'Content-Type': 'application/sdp' },
                body: offer.sdp,
            },
        );
        const remoteSdp = await result.text();
        await pc.setRemoteDescription(
            new RTCSessionDescription({ type: 'answer', sdp: remoteSdp }),
        );
    })()
 </script>
 </html>